Rules with examples and explanations in a convenient checklist for work. Updated material.
The level of the material is close to the basics, so it will be useful for beginners.
According to Google spokesman John Mueller and SEO London Digital, moving a website to Mobile-first index depends on factors:
- whether Google is able to crawl all content on the resource pages;
- can this content be displayed on mobile devices at all.
If a store does not meet these conditions, it not only loses mobile traffic and customers, but also its position in search results.
Choosing a responsive website template
To make the site mobile responsive, one of the options is used: mobile version, adaptive or dynamic layout — RESS (Responsive Design + Server Side).
This is a separate site on a subdomain. The server takes into account the user-agent of the user’s device, determines that he entered from a smartphone, and redirects it to the version for mobile viewing. The URL is usually prefixed with “m.”
The main and mobile versions are perceived and indexed separately by search robots. On the pages of the main site, the URL of the mobile version must be indicated, for example, using a link:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.site.com/page.html">
Pros : you can facilitate or add additional functionality in comparison with the desktop one, place other promotions. If necessary, the user can switch to the full version if it is more convenient for him.
Cons : you will have to optimize and administer versions separately, spend more resources, set up redirects. Developing a mobile version costs more than an adaptive one.
There is only one website, the interface adjusts to the screen resolution of the gadget, there is one URL for all devices. The content viewing area is set with the Viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1">.
If you don’t set the tag, the entire desktop viewport is scaled down to fit on the screen.
Pros : it is enough to make changes to the desktop version, you do not need to promote the two versions separately, working on a responsive layout is cheaper and easier.
Cons : the content for users from mobile and desktop will be the same, there is no way to view the desktop version from a smartphone, it can be difficult to implement for existing sites.
A technology for adapting a site for mobile on the server side. Depending on the device type, the server sends the user one of the HTML and CSS code variants.
Pros: the ability to simplify the code for mobile, setting up different offers for different devices, for example, users on Android can be offered to install an application from Google Play.
Cons: problems with unpopular gadget models, implementation is more expensive and more difficult. Webmasters often render both mobile and desktop templates in code and obscure the unnecessary version of “display: none”. This is a bug due to which the loading will become slower and the bot may display the site incorrectly.
The choice of the adaptive version depends on the company’s capabilities: we would recommend the responsive layout as the easiest option, but if different content for mobile and desktop users is important to you, consider the mobile version.
Making a website mobile does not end with choosing a display template. Check the checklist how your resource is optimized for mobile devices and make it even more convenient.
Website optimization checklist for mobile devices
Download the short checklist to your computer or copy it to Google Docs to mark the progress in your file.
Items from the checklist with explanations and examples:
1. Implementation of display on mobile
Your site should have a user-friendly mobile view. Choose a method based on resources and needs. For the mobile version, specify the URL in the code of the main pages; for the adaptive template, set the viewport with the Viewport tag.
2. The site is available for robots
3. Answer 200 OK
If the server sends a response with the HTTP code 200 OK , then everything is in order with the page: it is available for viewing and is displayed correctly in the search results.
You can check server response codes and find errors by checking internal pages in Site Analysis .
4. Support for all technologies
No Flash elements, Java applets or Silverlight plugins — these technologies slow down loading and may not be supported on mobile devices, so we recommend disabling them and embedding content using HTML5. Heavy interactivity needs to be lightened or abandoned for the sake of fast loading.
5. Fast loading
Mobile users can wait a couple of seconds longer than desktop users, but the faster a page loads, the less likely it is to close it. Search engines also dislike slow sites, for example, because of the Google Speed Update algorithm, sites with slow loading lose their positions in the search results.
How many seconds should the site load?
There are no specific limits, the site loading speed also depends on the Internet speed, so it may differ slightly for different users. John Mueller of Google in 2016 cited about 2–3 seconds as a guide.
You can check the download speed with the “ Site Speed Checker “ tool , it will calculate the speed and give tips on optimization.
For faster browsing, you can connect AMP pages from Google or Turbo from Yandex: optimizers argue about all the pros and cons, so you can try on your site and turn it off if you don’t like the result.
6. Separate favicon
A separate simplified favicon can be installed for mobile devices. It appears in the featured links and on the smartphone desktop if the user saves the site for quick access. Favicon for mobile is prescribed in the HTML code of the main page.
Favicon sizes and installation codes are in the manual .
7. Only vertical scrolling
Horizontal scrolling is a marker of an outdated site, the content should not go beyond the edges of the screen, this is taken into account when developing a responsive or responsive design. If this is not done, the user will have to inconveniently move the page to the sides for reading.
8. Large icons
It’s hard to hit the small icon on the phone screen with your finger. The average width of the fingertip is about 10 mm, so we recommend making the clickable elements large and placing them at a distance from each other to avoid false clicks. The Android app interface guidelines for active elements recommend a minimum width of 7 mm or 48 pixels of CSS on the site.
9. Large print
Small print is inconvenient to read — you have to scale the page so as not to strain your eyes. Make the font large, increase the line height in proportion to the font size — about 140% of the text size. For viewing from iOS devices, 17pt is recommended for plain text, 13sp for Android. A study by the Baymard Institute shows that the optimal line length is 50–60 characters, including spaces. Focus on the audience, if your users are people of retirement age, it will be convenient for them to read larger text.
10. Contrasting text
For the text, we recommend choosing not strictly contrasting colors: eyes get tired less from dark gray text on a white background than from black on white. Tool Color Contrast Checker will help you choose a combination of text and background colors.
11. Pop-ups don’t cover content
In addition to banner blindness, users develop pop-up blindness — a desire to close a pop-up window without reading the content. On mobile, interactive elements and pop-ups interfere with reading useful content, and on some devices it is difficult to close them: it is inconvenient to hit the cross or it does not fit into the interface. We recommend hiding such windows and leaving only those necessary for communicating with the seller.
12. Simplified registration
Users do not like to transfer a lot of information about themselves; it is even more inconvenient to enter a lot of data on the ea screen of a smartphone to register on the site. We recommend reducing the number of fields and making registration available via social networks or sms with a code by phone.
13. Using geodata
Phones transmit the geographic location of the owner, this information can be used to make it easier to fill in the shipping address.
14. Simplified communication with the company
It is inconvenient to copy phone numbers and correspond in the site chat. Set up quick access to the chat with a transition to a user-friendly messenger and make the phone number active so that the user can only tap on the call by tapping on it. This is configured using the code:
<a href="tel:+74952235555">Call me</a>
The user does not need to copy the number and manually paste it into the call log.