Blog

How to adapt a website for mobile devices

June, 12, 2015

Author: Diana Kostogladova & Tatiana Zabello Category: SEO, Google, Website Optimization

Google will consider website optimization for mobile devices as a new ranking factor from April 21, 2015. According to the latest research, smartphone and tablet users tend to return to websites optimized for mobile devices. As a result, the convenience of browsing websites on such devices will affect positions in mobile search.

You can use Google’s tool at http://www.google.com/webmasters/tools/mobile-friendly/ to test your website for compliance with requirements for mobile websites.

Here you can find recommendations on how to set up your mobile website on popular CMS:

https://developers.google.com/webmasters/mobile-sites/website-software/?hl=ru

If your website is based on the other CMS, you can take advantage of the following tips.

What key factors do indicate that your website isn’t adjusted for mobile use?

Small font

The smaller the font is, the more complex it is for a user to read the text on a small screen. This factor directly affects higher bounce rate.

Recommendations:

We suggest you set a basic font size at 16 pixels. The space between lines of text should be at least 1.2 em.

Links and buttons are small and are too close together

It is much more complicated to put a finger on small or closely placed links (buttons) than to use a pointer. They must be large enough and placed at a distance from each other, so that a user can easily choose any active element. This will keep to a minimum the number of false clicks. The average finger-pad width of an adult person is 10 mm. For that reason, recommendations for the interface of Android applications are to set the size of active elements at no less than 7mm, or 48 CSS pixels with a properly adjusted viewing area for mobile devices.

Recommendations:

Make sure important elements on your website (which are most widely used) are large enough – at least 48 pixels in width and height (provided that you have already configured the viewing area). Less commonly used elements can be made smaller, but the distance between them must be sufficient, so that a finger pad of 10 mm width couldn’t press two buttons simultaneously. Users should be able to select an element without zooming and other browser options (for example, Chrome’s pop-up magnifying glass).

Make essential active elements large enough. This can be referred to the most commonly used elements (for example, the most common button action, search string, essential fields and major navigation links). The size of these elements must be at least 7 mm, or 48 CSS pixels with a properly adjusted viewing area. Otherwise, you should set an extended interval between them.

Make sure that there is extra space between small active elements. Infrequently used links and buttons should be made smaller than 7 mm as recommended. However, there must be no other active elements at a distance of 5 mm (32 CSS pixels) vertically and horizontally around them, so that a user doesn’t click on them by mistake.

A viewing area for mobile devices isn’t specified

Optimized pages for various mobile devices must contain the «viewport» meta tag in the <head>. It provides specifications to the browser on how control the page size and scale.

Recommendations:

Use the <meta name="viewport" content="width=device-width"> tag to adjust a page to the specific screen width (in device independent pixels). It helps to manage the content size and position, so the website looks good on any mobile device. Some browsers don’t modify the page width and content size, but change website orientation to landscape and increase scale. With the «initial-scale=1» attribute, you can specify the ration between CSS pixels and a mobile device. It must be 1:1 regardless of the screen orientation, so that a page looks good in the landscape shape.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Comment this:

Comments (0):