How to optimize your site for mobile: 14 rules of a mobile site

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

mobile version

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.

Adaptive layout

<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.

RESS

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

Items from the checklist with explanations and examples:

1. Implementation of display on mobile

2. The site is available for robots

3. Answer 200 OK

You can check server response codes and find errors by checking internal pages in Site Analysis .

4. Support for all technologies

5. Fast loading

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

Favicon sizes and installation codes are in the manual .

7. Only vertical scrolling

8. Large icons

9. Large print

10. Contrasting text

11. Pop-ups don’t cover content

12. Simplified registration

13. Using geodata

14. Simplified communication with the company

<a href="tel:+74952235555">Call me</a>

The user does not need to copy the number and manually paste it into the call log.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store