How to adapt a website for mobile

It's no secret that search engines prefer sites that look equally good on different screen sizes. Most of the world's internet traffic comes from mobile devices, which means people are more likely to access the web from smartphones and tablets than from computers. In this regard, resource adaptation becomes a necessary step towards winning the loyalty of users and search engines. If a website has a responsive design and fast loading, Google robots will rank it much better. Any webmaster needs to be able to optimize a project for user gadgets. We will share ten ways to adapt your website for mobile devices.

10 methods to optimize your website for mobile devices

Using the Viewport tag.
No horizontal scrolling.
Large font size.
Large icons.
Contrasting text.
Setting up Gzip compression.
Robot-exposed CSS styles.
Fast site loading on mobile devices.
Pop-ups do not obscure content.
The width of images and input fields is 100%.

Of course, the lion's share of changes will have to be made to the layout and design, but the visual component is not everything. To make the site convenient to use on various devices, it is also necessary to optimize its speed. Below we will talk in more detail about the most common recommendations, the observance of which will allow you to create a web project adapted for a wide variety of audiences.

Using the Viewport Tag

Adaptability means that the site's scale will automatically change depending on the size of the user's screen. By default, web browsers perceive the content width to be equal to the width of the desktop version of the page (1024 pixels), so on mobile devices non-responsive resources are reduced several times. If you have already optimized the CSS files, but the browser continues to shrink/enlarge the content, implement a special meta tag in the HTML code of the project. Typically it is placed in the <head> block:

Where viewport is the name of the tag, device-width is an indication that the width of the browser window should be equal to the width of the device, and 1 means that the original scale must be used. This way you tell the browser that you adapt the content to the size of the gadget and it doesn’t need to change the scale to fit everything into the viewing area.

No horizontal scrolling

How advised Kirill Kulagin the CEO of KeyRealSeo - "to optimize a website for small phone screens, simply “zooming” the page is not enough. Perhaps the text will be better visible and the buttons will become larger, but in order to see the entire contents of the document, the user will have to move it to the sides, and this is very inconvenient. If you get rid of horizontal scrolling, usability for a “mobile” audience will increase significantly. Information should never go beyond the boundaries of the screen. The only exception is tables with a large number of columns - scrolling is allowed for them, but the rest of the content must be adapted."

Large font size

No one wants to read small text on their phone, especially people with vision problems. Adapting a website for mobile devices means, among other things, making text information readable. Make the font larger so that users don't have to zoom the page or strain their eyes trying to make out small letters. For iOS gadgets, the standard plain text is 17pt, for Android – 13sp.

It is also recommended to optimize the line height (approximately 140% of the text size). It is optimal if it is about 50–60 characters long with spaces.

Large icons

Adapt buttons and other interactive elements to fit your average fingertip size (10mm) so they can be pressed comfortably on a small screen. If the icons are too small or too close to each other, the percentage of false clicks will increase, and with it, the dissatisfaction of your visitors. They will miss between checkboxes, accidentally click on adjacent links, and go to the wrong sections. Optimize all clickable elements of the site so that the interaction process is comfortable from any device. The labels on the buttons should also be legible.

Contrasting text

Black font on a white background is a standard that can and should be broken. You should not use sharply contrasting colors, so as not to burden the user’s vision once again. For example, instead of a strict black and white combination, choose dark gray and white. A person may not notice the difference, but his eyes will thank you. The same applies to the opposite situation: white on black is perceived even worse, so for a “dark theme” it is better to choose different shades of gray. There are many services on the Internet that help you find good color combinations for adapting text on mobile devices.

Setting up Gzip compression

As we have already said, it is necessary to optimize not only the client part, but also the server part. gzip technology allows you to compress content and entire pages to speed up their transmission to the browser. Set it up on your server so that before sending files, they are reduced in size, and after they are received by the user, they are restored to their usual size. This is a working way to adapt site loading for mobile devices, because this way they will spend less traffic. Gzip compression is supported by all popular web browsers, so there should be no problems with its implementation.

Robot-exposed CSS styles

Since the site is adapted through style files (.CSS), it is necessary that search engine bots can crawl them. Without this, crawlers may decide that the resource is not responsive, which means it should be lowered in search results for requests from mobile devices. Rules for indexing robots are usually written in robots.txt. A file with this name is located in the root directory of the project. If it is not there, create a new one, enter permission to scan CSS and JavaScript files there (via the allow directive), and then upload it to the server. This will allow you to optimize the project not only for users with gadgets, but also for different search engines.

Fast site loading from mobile devices

Another condition for a good adaptive experience is high loading speed (within 2–3 seconds). As a rule, content takes longer to load on phones than on computers, so be sure to check the site loading time in a special service (for example, PageSpeed Insight). There you will find out which elements “eat up” the most traffic when opened from mobile devices, and you can optimize them to improve this indicator. Usually, the first step is to adapt the images: compress them, convert them to a lighter format, or reduce their size. Graphic content weighs a lot, so by optimizing it, you will significantly speed up loading and, accordingly, make the web resource more convenient.

Pop-ups don't cover content

The number of advertising banners and pop-ups on mobile devices should be reduced. When using the desktop version of the site, pop-up windows are more tolerable because there is enough free space on the page, but when the screen is small, they take up too much space and block the content that is interesting to the user. This causes justifiable irritation - especially if it is not possible to close such a block the first time due to a meager button.

When adapting your project, make sure that pop-ups occupy less than 50% of the screen and are easy to close. This will also help optimize it for search engines - due to annoying advertising, bots often rate the resource as low-quality.

Width of images and input fields 100%

Some images may be larger than the mobile device screen, in which case they will extend beyond the viewing area. As a result, the same horizontal scrolling will appear. Optimize their width via CSS files:

img {max-width: 100%}

.header {background:url (header.png)50% no-repeat; background-size: contain}

The second option is suitable for pictures used as backgrounds. In both cases, images will be displayed at a maximum of 100% of the screen width.

The same must be done with input fields: if they are not adapted, then only the most patient will enter information on your site. Add the following code to the CSS file:

input, textarea {max-width:100%}

Now both images and input fields will not extend beyond the edges of the screen.

Conclusion

The described methods will help you adapt an existing web resource to the needs of a “mobile” audience. Improving usability on different devices is in your own interests, because the more inconvenient the site is, the fewer people want to interact with it. If you want to increase traffic or at least retain existing users, be sure to use the tips from our article and optimize the project.