How to improve the mobile version of the site. Recommendations and video tips

The level of training webmaster: medium or high

Wondering how to improve the mobile version of the website, and do not know where to start? Especially for you, we have prepared a list of recommendations that will help improve your mobile site. We accompanied some of the recommendations to well-known examples from practice and research results, and for some we even made several video tips (they can be watched with subtitles in Russian and several other languages). These tips and tricks will help you figure out how to correctly interpret data from Google Analytics and Webmaster Tools to improve the mobile version of your site.

Step 1. Make your mobile site truly user friendly.

A) Remove additional windows in versions for all mobile devices ( Google recommendations , useful article ).

• Do not use JavaScript pop-ups that are difficult to close.
• Remove all floating ads, especially advertising applications. Instead, use iOS 6+-style smart banners , side navigation, emails and other marketing tools.
• Do not invite users to participate in the survey before they solve their problems.

B) Optimize the site for different devices.

• Discard functions that require the use of plug-ins or video playback tools that may not be available on the user's device. For example, Adobe Flash Player is not available in the iPhone, as well as in Android 4.1 and later versions ( example from practice ).
• Show tablet users either a version optimized for desktop computers, or - even better - a website for tablets ( research results ).
• Give mobile phone users the ability to switch to a PC version. User selection should be applied throughout the session: do not force visitors to switch to the PC version after loading each page ( research results ).

C) Make it easy for mobile pages so that users don’t waste time and mobile traffic.


How to facilitate mobile pages, focusing on data on bounce rate and events from Google Analytics ( presentation )
')
D) Accelerate the loading of pages and continue to work in this direction if your indicators are below average ( example from practice ).


How to speed up a mobile site in a short time and compare it with competitors' sites ( presentation )

A detailed list of things that cause inconvenience to visitors to mobile sites, published on this page .

Step 2. Help visitors get what they came for.

A) Optimize your site for scanning and indexing , and also make it more convenient for users who come from search engines ( practice example ).

• Enable resource indexing ( CSS , JavaScript , etc.) in robots.txt .
• Follow the tips on optimizing the mobile version of the site for search engines (depending on the method of implementing the mobile site):
  1. Responsive design : be sure to include a CSS @media. query CSS @media.
  2. Separate mobile version of the site : add the attributes rel=alternate media and rel=canonical , as well as the HTTP header Vary: User-Agent , so that Googlebot will immediately indicate the mobile URL in the search results
  3. Dynamic display : add the Vary: User-Agent HTTP header.
  
  B) Learn how mobile users behave on the site, and help them quickly achieve the desired result.
  
  
  How to optimize your site in accordance with common scenarios of the behavior of mobile device users, based on data from Google Webmaster Tools and Google Analytics ( presentation )
  
  

  Step 3. Turn customers into fans.

  
  A) Allow Google’s search engine to index content in your application. Read more about this feature and its implementation .
  B) Consider how you can captivate a user:
  
  • Create an application for users of mobile devices, for example, for visitors to your store or shopping center ( examples from practice ).
  • Engage the GPS sensor, camera and accelerometer of the smartphone.
  • Increase the degree of social involvement of users ( examples from practice ).
  • Use gestures: flipping, pressing, shaking. It is both fun and intuitive.
  
  In this post we have gathered basic tips for improving mobile sites. The full version of our recommendations for developers can be found here . If we have missed something important, we will be glad to your suggestions in the comments.