Adaptability testing. Checking optimization for mobile devices. Mattkersley - all sizes on one page

“Project manager of the Business Motor team, webmaster, copywriter.
Mobile adaptation is an important stage of working with a website. With the introduction of mobile ranking factors, onboarding has become even more important. We tell you how to conduct basic testing of website mobility"

The ease of displaying a website on mobile devices is a factor whose importance has been steadily growing in recent years. And this is not only due to the growing number of users who view sites from smartphones and tablets, but also to rankings at the search engine level.

Google officially announced the impact of this factor on the site’s position on April 21, 2015. More recently, information about it appeared on the Yandex blog. The algorithm, which takes into account the convenience of displaying the site on mobile devices, was called “Vladivostok” and, according to Yandex representatives, it is already being actively implemented in Russia.

The importance of adapting websites to the needs of mobile users is growing and will continue to grow. Mobile adaptation will be reflected both in the conversion of visitors and in the ranking of pages in search results. But how do you know if your project meets these requirements? How to determine if a site is mobile friendly in every detail? We will talk about this in our today's review.

Is the site mobile friendly?

The first stage of diagnostics is to open the site on mobile devices yourself. But even here, not everything is as simple as it might seem, because certain responsiveness problems can only manifest themselves in certain browsers and on certain screen sizes. For this reason, we recommend running tests:

on a smartphone with a vertical screen orientation (including on narrow screens about 300 pixels wide);
on a smartphone with a horizontal screen orientation (from 480 pixels wide);
on tablets with vertical and horizontal screen orientation (from 768 pixels wide).

It is quite natural that trying a site on different devices is not always inconvenient. If only because you may not have all the necessary gadgets at hand. You can solve this problem using various mobile screen emulators. However, it is not necessary to turn to third-party services: a similar emulator is pre-installed in Google Chrome. In order to use it, just open the site you are interested in, press F12 (call the developer console) and click the icon with the image of a mobile phone:

It is extremely important to take into account the features of mobile browsers, because they can also have their own features. When testing, it is important to view the site at:

pre-installed Android OS browser;
Google Chrome mobile;
“fast” browsers – for example, Opera Mini or UC Browser;
Safari (for example, on iPhone).

How do search engines see your site?

The first automatic check that you should go through if you are interested in the problem of adaptability of your website is mobile friendly test from Google. This tool is quite simple and gives a clear verdict regarding page optimization for mobile devices. And if the answer is no, the site is almost certainly considered inconvenient for small screens and at the level of Google algorithms - with all the ensuing consequences.

If there are any complaints about the formatting of content on smartphone screens, they will be listed here. This will allow you to quickly diagnose specific display problems and immediately move on to solving them:

Please note: the screenshot of the site on a mobile screen in the verification results may not correspond to how you see it on a smartphone. Most often, this is due to the fact that only files indexed by the search engine are involved in the mobile friendly test, and style files (css) and scripts (js) are often closed for indexing at the robots.txt level. By the way, in accordance with the latest Google recommendations, they should be made visible to search engines.

Optimizing a website for mobile devices in the Google and Yandex webmaster's account

It is important to note that information on how well the site complies with search engines’ ideas about ease of display on mobile devices can be obtained in the webmasters’ accounts – Google Search Console and Yandex.Webmaster (so far only in the beta version of the new account).

In Google Search Console, the results of the current page check are available here: Search traffic => Ease of viewing on mobile devices. This page duplicates the information that we can get using the mobile friendly test, but is provided for all indexed pages of the site as Google robots crawl them:

In the new webmaster's account in Yandex, mass current verification data is not yet displayed. Instead, you can find a tool there similar to Google's mobile friendly test. With its help, you can manually check whether the search engine algorithms consider a particular page suitable for viewing on smartphones.

P.S.

How the site and its responsiveness are perceived by search engines is an extremely important issue, but user experience is no less important. Thus, according to formal criteria, a page may fully meet the requirements for ease of viewing on mobile devices, but in reality – for “live” users – this convenience will be questionable. The direct result of this is a decrease in conversion, lost sales, and worsening behavioral factors (which, in turn, also affect rankings).

In the next article in this series, in a week, we will tell you how to see a site through the eyes of its visitors, how to find “bottlenecks” in mobile display, and what criteria should be used to evaluate its usability.

conclusions

The ease of viewing a website on mobile devices plays an increasingly prominent role both in conversion and in search engine ranking of pages.

The first step to assessing website responsiveness is testing on different screens and in different mobile browsers.

Google’s mobile friendly test, as well as the corresponding functionality in the webmaster’s accounts (Google Search Console and the new webmaster’s account in Yandex) will help you find out how search engines evaluate the ease of displaying a site on mobile devices.

Reading time 6 minutes

Why is it so important to check websites for responsiveness? According to Yandex.Metrica, the number of people using mobile devices in Russia is close to 50% and is constantly growing.

In this regard, search engines are striving to make mobile search results more convenient for users. In February 2015, Google stated that having a responsive or mobile version has a positive effect on rankings. Exactly a year later, in February 2016, Yandex announced the same thing.

What qualities should a responsive website have?

No horizontal scrolling.
The viewport meta tag is written correctly.
Interactive elements (links, buttons, forms, etc.) are not too close to each other.
Lack of Flash elements and Silverlight plugins.
Convenient navigation through sections.
Content (text and pictures) is adapted to the screen size and can be read without magnification.

Services for online testing of website adaptability

Google Mobile Friendly - https://search.google.com/test/mobile-friendly

Displays what the first screen of a website looks like on a smartphone and gives an overall assessment of the quality of optimization.

Advantages

Official Google service.
Indicates specific errors.
Able to determine the availability of a mobile version.

Flaws

You can't see what the site looks like at different screen sizes.
Shows only the first screen, you cannot interact with the site.

Yandex.Webmaster Mobile Friendly - https://webmaster.yandex.ru/site/tools/mobile-friendly/

Unlike Google's tool, you can only check your resources to which you have confirmed rights in Yandex.Webmaster. Shows the overall score and shows how the site looks on a smartphone.

Advantages

Official Yandex service.
Indicates specific problems in optimization.
Understands whether the site has a mobile version.

Flaws

You can only check your own sites.
There is no way to see what the site looks like on different screens

Quirktools- http://quirktools.com/screenfly/

A convenient and functional service, it is possible to see how the site will look on various devices from smartphones to TVs.

Advantages

You can choose from a ready-made list of devices or set your own resolution
You can interact with the site

Flaws

Can't detect the presence of a mobile version
No error list

Iloveadaptive - http://iloveadaptive.com/

A service with which you can check adaptability for popular mobile devices and operating systems.

Advantages

It is possible to see what the site looks like on different operating systems (IOS and Android)
It understands whether there is a mobile version
Extension for Google Chrome

Flaws

You cannot specify the screen size yourself, you can only select from a ready-made list
No error list
Always automatically downloads the mobile version, without the ability to see what the desktop version looks like at different resolutions

http://adaptivator.ru/

Advantages

Gives a general assessment of the quality of optimization and gives advice on correcting errors.
“Does not see” the mobile version.

Flaws

“Does not see” the mobile version.
There is no way to specify your screen size.

Conclusion

If you have access to webmaster services (Yandex.Webmaster or Google Search Console), it is best to conduct an adaptability test with their help. They reflect the most current requirements of search engines for your site.

If this is not possible, then you can use http://iloveadaptive.com/ in conjunction with http://adaptivator.ru/, since they complement each other in functionality.

Hello, dear blog readers. It’s not surprising that adaptive design is becoming more and more popular on the Russian Internet. And of course, layout designers need to study it. Since responsive design will soon be on almost all websites, because more and more people are using mobile devices.

And I would like to say that sites with it are much more convenient to read on such devices than without it.

Today I want to introduce you to 5 very useful and cool services with which you can check your website for adaptability.

And so, let's go.

5 services where you can check your website for adaptability.

www.responsivedesigntest.net

A good service for checking sites. There are many screen resolutions for both tablets and phones.

mattkersley.com

A simple service for checking a website from Matt Kersley. All popular mobile device resolutions are also available.

screenqueri.es

A very cool service that will check any site. I really liked the design, as well as the functionality.

quirktools.com

Very beautiful and functional service. It is even possible to check how the site will look on TV :-)

Search engines strive to improve search results for users of mobile devices (smartphones, tablets), so sites optimized for different screen sizes will be displayed higher than sites without such optimization. This also includes mobile versions of sites.

Signs of a mobile-friendly website:

Easy to read content (readable without magnifying), large form fields and buttons.
Lack of “heavy” pictures, Flash elements and unnecessary animation.
Lack of Java applets and Silverlight plugins.
No horizontal scroll bar.
Minimum site loading speed.
As simple as possible navigation.
The viewport meta tag has been added.

Services for checking a site for "mobility"

To demonstrate how the services work, let’s take the website of my good partners - CONTEXT translation agency.

1. Google Mobile Friendly

You can check any site by simply entering its address in a line.

Displays on the screen what the site looks like on a smartphone and gives an overall assessment of its optimization for mobile devices.

Unlike other services, here you can check not every site, but only your own. That is, after the site is added to the webmaster’s interface with confirmation of rights to it.

The service displays the overall rating, checks 6 points of compliance and shows what the site looks like on a smartphone.

3. Bing Checker

General optimization plus compliance with 4 points is checked.

It also displays how the site looks on a smartphone screen (of course, on Windows OS, while previous services displayed an Android smartphone =)).

4. Mobile Checker from W3C

The longest of all services. So “long” that I didn’t even wait for the check to finish =)

I waited for about 5 minutes, while other services handled it in 5-20 seconds.

5. Responsinator

Unlike the others, it doesn’t give any ratings, but it displays what your site looks like on 6 different devices in two orientations: IOS and Android, which is very cool.

UPD1: 07/20/2017:

6. Adaptivator

The service suggested in the comments to this article. I haven’t personally used it, but it seems to be pretty good. The capabilities are similar to the responder, but there is also an assessment of the result of adaptability.

UPD2: 3.11.2017:

7. iloveadaptive.ru

Another new service proposed in the comments. In my opinion, it is a little bulky and impractical, but this more than pays off with great capabilities. There is even sorting by OS.

Conclusion

Undoubtedly, adapting a website for mobile devices is not just a tribute to fashion and time, but a necessary attribute of a modern website, helping not only the end user.

Therefore, I recommend to anyone who wants to be closer to the client and have more visits/leads to adapt their websites as quickly as possible. Ask me a question -

In many countries, smartphones are more often used to surf the Internet than computers. Therefore, it is very important to adapt the site for mobile devices. A special tool in Search Console will help you find out whether your pages are user-friendly for smartphone users.

Usage

It’s easy to check whether a page is suitable for viewing on a smartphone: just enter its full URL. The check usually takes less than a minute. If there are redirects on the page, they will also be processed.

Based on the test results, you will see how the page looks on a smartphone and find out what problems may arise when viewing it. Most often, these are small font (hard to read on a small screen) and Flash elements (not supported on most mobile devices).

Viewport meta tag value not set

The page code does not include the viewport property, which tells the browser how to properly resize page elements to fit the device's screen size. To ensure your site displays correctly on different screen sizes, customize your viewport using the viewport meta tag. You can learn more about this in the Responsive Web Design Basics section of our guide.

The viewport meta tag must contain device-width

Adaptation of the page for different screen sizes is not possible, since its code specifies the viewport property with a fixed width. In this case, you need to apply a responsive design by adjusting the page scaling to fit the screen size.

Content wider than screen

This report identifies pages that require horizontal scrolling to view text and images. This issue occurs when dimensions in CSS styles are set to absolute values or when images are used that are designed for a specific browser window width. Make sure CSS element widths and positioning values are relative and images are scaled. For more information on this, see the Viewport Content Dimensions section of our guide.

The font is too small

This report lists pages with small print that requires users to make pinch-to-zoom gestures to read. After setting up the viewport, you need to determine the font sizes so that they display correctly in it.