Websites are usually developed not on phones or even tablets, but on computers or laptops. But site users can view it from any device. In order to understand that the site’s content is displayed equally well on most devices, you can have at hand a bunch of mobile phones with different screen resolutions and running under different operating systems, or you can use ready-made services that will check how well the site is adapted for viewing on mobile devices. In this article, we'll look at one such tool offered by Google to check if your page is optimized for mobile devices.

How to open the Google Search Console mobile optimization checker

To open the mobile optimization checker Google Search Console you need to enter the address in the browser address bar:

https://search.google.com/test/mobile-friendly

or simply follow → this link (opens in a new window).

After the mobile optimization check page Google devices Search Console is open, you need to enter the address of the site or page of the site, the optimization of which you want to check and click on the button “ Check"as shown in the picture below:

After this, Google Search Console will take some time to load and analyze the specified page:

If according to the results Google checks When Search Console decides that the page is optimized for mobile devices, it will receive a message similar to the one in the picture below:

If the results of the check reveal errors, the message page will look something like this:

indicating obvious problem areas on the page.

Summary:

In this way, you can quickly and quite effectively assess how much the site is optimized so that it is convenient to use not only on a computer, but also on mobile phones. In addition, Google Search Console provides a number of recommendations that can be useful for optimizing the correct operation of the site on any device, including mobile ones.

Today there is no longer any need to convince anyone of the need for a mobile version of the site. After all, every day there are more and more visitors from smartphones and tablets. As of this writing, about 20% of my blog visitors use a mobile device for browsing. That is, every fifth person visits my website from a phone or tablet.

A few years ago, I didn’t even think about such visitors, but when their number exceeded 10% of the total, I began to use adaptive layout. This made it possible to correctly display content on mobile devices and increase loyalty to the site of both visitors and search engines.

A mobile version of a website and responsive design are not the same thing. In this article we will talk about testing adaptive layout, when the site design changes depending on the screen resolution of the visitor’s device.

To be sure that your site displays correctly on mobile devices, you need to check, and for this there are several useful services and tools.

Quick check of adaptive layout

Popular Internet browser (browser) Mozilla Firefox equipped with built-in tools for checking website design for suitability for display on mobile devices. To use it, go to “Menu” - “Development” - “Adaptive Design”. Or just press three keys on your keyboard at the same time ++[M]

You should see something like this:

By changing the screen resolution and orientation, you can check how your site will be displayed to mobile visitors.

Google Browser Chrome It also has built-in support for checking the adaptability of the site design. To do this, go to the menu, select “Additional tools” and then “developer tools” (or press the ).

After that, click on the responsive design icon (or simultaneously press on your keyboard ++[M]):

In the middle of the screen you will see how your site will be displayed on mobile device screens:

SEO testing of mobile design

As is known in two world search leaders Google and Yandex have their own immodest opinion on how a website should look on mobile device screens. And if a site is deemed inconvenient for mobile visitors, then it is downgraded search results. So, from an SEO point of view, if you don't want to lose mobile visitors, then you should not only have a responsive design, but also search engines should consider it as such, that is, suitable for mobile devices.

To check adaptability using the Google service, go to the following address and enter the name of your site: https://www.google.com/webmasters/tools/mobile-friendly/.

This is what the result of checking my blog looks like:

With Yandex it’s a little more complicated; to check, you must register with the Yandex.Webmaster service and use the beta version of the interface:

Online services for testing adaptability

The main task of these services is to present (show) what your website will look like on a mobile device. There are a great many sites with such functionality. I will give just a few of them. In most cases, they duplicate the built-in functionality of FireFox and Chrome.

Google resizer

I’ll start again with Google, which has its own service for demonstrating adaptability: http://design.google.com/resizer/#

Quirktools screenfly

The second nice service is http://quirktools.com/screenfly/. It will show you how your website can look even on TV!

Symby.ru adaptest

Well, in order not to offend the “domestic manufacturer,” I’ll give an example of another site: http://symby.ru/adaptest/. On one page you will see several views with different screen resolutions.

Speed ​​of the mobile version of the site

Once you are sure that your site is responsive and displays correctly on most devices, you should check its speed. Again in relation to mobile visitors.

PageSpeed ​​Insights

Google, as always, is ahead of the curve: https://developers.google.com/speed/pagespeed/insights/. This service will show you what the site looks like on a phone screen and give recommendations for optimizing the code to increase loading speed on mobile devices.

WebPageTest

And in conclusion, I will give an example of a service that will not only show what a site looks like on a mobile device, but also show its speed: http://www.webpagetest.org/

conclusions

In my opinion, in everyday work, when making changes to the site design, it is easier to use the built-in capabilities FireFox browsers and Chrome. After which, of course, you need to check the loyalty of search engines to your design. And only then, to calm your soul or to show off, you can use online services.

Greetings, dear friends!

Mobile gadgets have taken over the world. Today they don’t even go out to buy bread without a phone.

Nowadays, the Internet is developing rapidly. Rapid market growth mobile Internet forces creators of web resources to adapt their sites to this type devices.

My point is that if you want your website to be successful and popular, then you should think about how to make it easy to view on all kinds of gadgets.

In this article I will tell you how to check a website on mobile devices using special services. I roughly divided them into two groups: free and paid.

They all work on almost the same principle:

1. go to the website of the developer of a particular service
2. download the necessary software
3. launch the application
4. and after a while the mobile version of your website is in front of you!

There are services that can test your website online.

The choice, as always, is yours!

Free

Mobile Friendly. This application was created by Google specifically to check whether a web resource is optimized for smartphones and other gadgets.

Responsinator. Thanks to this application you can easily see what the site looks like on Kindle, iPad, Android, iPhone.

iPad Peek. One of the most popular free testing tools with which you can see the display of your own website on iPhone and iPad.

Opera Mini Simulator. The emulator from Opera contains very large base mobile gadgets. Its only drawback is the lack of an online mode, that is, to test your resource you will have to download and install the necessary software.

Gomez. Evaluates the compatibility of your resource with mobile devices using 30 parameters, which allows you to get the most complete assessment. For free use You should enter your contact information.

MobiReady. Great tool for testing, which evaluates the adaptability of the design. The verification is based on the best W3C (World Wide Web Consortium) standards.

Mobile Phone Emulator and Screenfly. Similar services that also make it possible to view the status of a web resource on the screens of any gadgets.

Paid

CrossBrowserTesting. Checks at 130 different browsers and 25 operating systems, including: Blackberry, Android, iPad, iPhone. To use it you will have to pay $29.95 monthly.

BrowserStack. Provides fast access to a huge base. It costs up to $19 for one month, but there is also a free version.

Browshot. Designed for removal from Android, iPad, iPhone. For five screenshots you will have to pay $1.

Perfecto Mobile. Gives access to the tablet database and cell phones, allowing you to see how well the optimization performs on each type of device. To use it you need to pay up to $15 per day.

Multi-Browser Viewer. Cross-browser application containing mobile emulators and browsers for testing in any format. Costs up to $140, and there is a free demo version.

DeviceAnywhere. An excellent tool that allows you to precisely check web content, testing the resource in real time. It can be either paid ($100 per month) or free.

As you can see, there are a lot of programs and services, choose the most convenient option and use it to your health.

Mobile version for search engines

Sometimes a site displays perfectly on all mobile devices, but Google search engines and Yandex do not recognize its mobility. It’s just that Yandex and Google have additional requirements for the mobile version.

You can check the adaptation of the mobile version to Google using the Mobile Friendly service. I already mentioned it in the list of free tools.

And for Yandex there is a similar tool in the currently testing version of the webmaster account (https://beta.webmaster.yandex.ru/).

Subscribe to the blog news and you will learn a lot more interesting and useful things. In the meantime, I say goodbye to you, see you in a new article!

Sincerely! Abdullin Ruslan

Website versions are not only a possible whim of the developers, an additional item of expense (or earnings, if we talk about contractors) and a manifestation of concern for visitors to the resource. According to recent announcements from Google, sites that do not meet responsive design requirements will suffer in mobile searches. The domestic search engine Yandex also released recommendations “The importance of being mobile” and assured that, acting for the convenience of mobile device users, it will mark mobile versions in search results and give preference to adaptive pages.

Thus, developers must adapt sites for smartphones and check that the resource is displayed correctly. Otherwise, you can soon expect the loss of a significant part of the traffic, and therefore potential customers, because new algorithms from Google and Yandex are already in effect. Check mobile version site you can different ways: changing the browser when switching to developer mode, using mobile device emulators or web services.

Site friendliness for mobile devices

Mobile responsiveness is assessed based on various parameters. It is important to check the mobile version of the site not only in terms of correct display; it is worth considering other factors:

• lack of animation, “heavy” design and pictures;
• resource loading speed (must be minimal);
• no need for horizontal scrolling;
• lack of Silverlight plugins and Java applets;
• easy site navigation;
• The viewport meta tag is included in the code.

If the above conditions are met, the algorithms of the most common search engines recognize the web page as suitable for mobile devices and increase the site’s position in the search results relative to resources that are not adapted.

Real testing on mobile devices

The most convenient way is to test the mobile version of the site on real smartphones. This method will allow testing in real conditions. Ideally, it is better to check a web resource on several devices, but if the project budget does not include the cost of purchasing several smartphones of the most popular models, a device on Android based or Apple.

Resizing the browser window

The simplest, but not optimal in terms of checking, is to resize the browser window. If the page is made using technology, you can check the mobile version of the site this way. But in cases where a separate design is used, the resource needs a clear indication that the user came from a smartphone, tablet or other mobile device. So, this method allows you to check the availability of a mobile version of the site. But the correctness of the display (in technical terms) is unlikely to be assessed.

Switching to developer mode in the browser

A more optimal way to check the mobile version of the site (Google or Yandex), as well as other search engines, highlight adaptability in the list the most important factors affecting ranking) is to switch to developer mode in the browser. The method works similarly with multiple browsers:

• Mozilla: You can switch to developer mode by selecting the "Responsive Design" option in the "Development" menu; by pressing the combination Ctrl + Shift + M; by clicking on the “Responsive Design Mode” button on the web developer toolbar;
• Chrome: switch to mobile mode by pressing F12, then select the mobile version icon (smartphone in the left top corner window that appears).

In Opera, switching to developer mode to check the mobile version is done by pressing the combination Ctrl+Shift+i, but there is another way. A special version of the browser - Opera Mobile Classic Emulator - allows you to diversify mobile design. Versions of the program exist for major operating systems.

Mobile device emulators: Android Studio and Apple Xcode

You can check the mobile version of the site (Yandex and Google) using mobile device emulators, which for Android and Apple are Android Studio or Apple Xcode, respectively.

Such tools quite accurately reproduce the site as it will look on mobile devices: the programs come pre-installed with the most common versions of browsers for mobile devices. However, emulators do not take into account loading speed and some other nuances that can be observed in real conditions.

To check, just install one of the above programs on your computer and open the site from an emulator.

Mobile design verification web services

There are more simple ways check the mobile version of the site. For example, the online service Responsinator allows you to evaluate the correct display of a resource on mobile devices and the ease of use of the site by the user. The resource displays the site as it would look in six various devices based on Android or Apple and in several orientations.

Checking the optimization of web pages for mobile devices

Other resources that allow you to check the mobile version of the site additionally evaluate adaptability, and not only show how the site would look on different devices. The most authoritative services: Google Mobile Friendly and Yandex WebMaster (checking web pages). The optimization of a site for mobile devices is also assessed by the Bing checker or, for example, Mobile Checker from W3C.

All that is required of the webmaster when evaluating the version of the site for mobile devices using online services is to enter the resource address and wait for the analysis to complete. Most of the above services check optimization against the mobile friendliness parameters listed above.

So, you can evaluate the adaptability of a web resource in several ways: from testing on real smartphones, tablets or other mobile devices or resizing the web browser window, testing in emulators or in web browser developer mode, to using services from Yandex and "Google". It is very easy to comprehensively check the mobile version of the site, and this will allow you to make the necessary changes and improve the site’s position in search results.

Here's the thing: Google will soon (according to rumors - from April 21, 2015) will begin to rank very poorly sites that have not been tested by Google Webmasters for ease of viewing on mobile devices.

It’s not clear exactly whether the site will have problems only if it is shown to mobile users, or even to those who logged in from a PC, i.e. will there be separate output?

This hardly changes the essence for sites where half, or a significant part, mobile traffic. Therefore, it is better to get checked as quickly as possible.

I'll tell you how to do it like this:

Before	After

• First chip, which helped resolve the issue without additional movements.

In robots.txt write the line:
Allow: /wp-content/themes/Template_Name/style.css

(If the file with styles is located at a different address, then we register it. If there are several files with styles, then we insert lines for each file.)

• Second point, if we see the message “Interactive elements are located too close to each other.” Shows at google.com/webmasters/tools/mobile-friendly.
  Simply in the styles for the required class, it assigns more indents for links and buttons. A margin or padding of 5px is enough.

  Sometimes the Adsense block can create this problem. Perhaps you need to insert a larger block, or with a larger font.

P.S. Initially, I expect that the primary one was made by you.