Adaptation check. How to test responsive design? Viewport meta tag value not set

Greetings! Now it's time to talk about site responsiveness. As you probably know, this is a very important parameter. The number of tablet and smartphone users is increasing every day. My blog receives 30% of traffic from mobile devices. When the percentage of mobile traffic increased, I began to think about adaptive layout, which I advise you to do too. What will it give you? This will increase the loyalty of both search robots and visitors to the blog.

Even a large number are already coming with responsive designs. Of course, the design is not always made with high quality, so you have to make all kinds of edits and improvements on your own. How to check site responsiveness? There are many useful tools and services for this.

We will check how responsive and high-quality the design of your website is using the built-in functionality of browsers, as well as several online services. Well, let's get started? Let's start with online services first.

7 services for checking website responsiveness online

1. Online service ami.responsivedesign.is

You have arrived at the main page of the service.

Scroll to the very bottom and write the address of your blog in the input field. Click on the "Go" button.

After some time, you will be able to see the check of the site's responsiveness on different devices. The service is very good, but there is a small defect. And it lies in the fact that it cannot show adaptability at several of the most popular resolutions.

Tablets and mobile phones have different screen sizes and, accordingly, different resolutions. Therefore, you will not wait for a complete analysis from this service)).

2. Online service deviceponsive.com

Everything here is the same as in the previous service. Paste the site address into the input field and click "Go".

Now we need to go a little lower where we will see the first "MacBook" device that has a resolution of 1280 x 800 pixels.

You can scroll down the page and click on the required elements and check the responsiveness. If you scroll down, you'll see what your project looks like on other devices, ranging from 1280x800 to 320x240 pixels. This service will show you the complete picture, unlike the previous one.

3. Online service responsinator.com

In the upper left corner, insert the name of your resource into the window, click "Go". You will have to wait a little while the page is loaded, and you can see the result.

The width of each screen of the devices is signed here, and there are plenty of them here.

4. Online service quirktools.com

Another service with which you can check the responsiveness of the site online. Insert the name of the website into the field and click "Go".

What I like here is that the service can show the adaptability of even the TV)).

5. Online service symby.ru

We follow the steps you are familiar with and enjoy the result.

6. Online service responsive.is

A wonderful project for a site responsiveness test. There are many screen resolutions for phones as well as tablets.

7. Online service mattkersley.com

The simplest service for checking a website for responsive design. Almost all known mobile device resolutions are available here.

Check the site for responsiveness to mobile devices using the Mozilla browser

The famous Mozilla Firefox browser has rich functionality. Using this from Mozila's tools, we will check the site for responsiveness. We carry out the following steps: go to "menu" - "development" - "adaptive design". These actions can be done using the keyboard by pressing several ++ [M] keys at the same time.

After the steps taken, you will see the following.

By changing the resolution, you can see how your project is displayed to a mobile audience.

Google site responsiveness check

With the help of the mega giant Google Chrome, you can also test the responsiveness of your project. We do the following: go to the "menu", then to the item "Additional tools", and "developer tools ()".

Checking the site for responsiveness Yandex

If you want to check the site for Yandex adaptability, you need to register with Yandex. Webmaster. We go to the webmaster, then we find the item "Check mobile pages", click on this item and see the result.

Conclusion

In my opinion, it will be easier to use the functionality of the Google and Mozilla browsers in your day-to-day website design. Well, to calm your soul, use online services to check the adaptability of the site. Check your project for adaptability, make changes, fix errors. Well, that's all for me. Bye everyone!

Best regards, Vyacheslav Koptyakov!

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. At the time of this writing, about 20% of my blog visitors are using mobile devices for browsing. That is, every fifth comes to my site from a phone or tablet.

Several years ago I did not even think about such visitors, but when their number exceeded 10% of the total number, I began to use a responsive layout. This made it possible to correctly display content on mobile devices and increase the loyalty of both visitors and search engines to the site.

The mobile version of the site and the responsive design are not the same thing. This article will focus on testing responsive layout when the site design changes depending on the screen resolution of the visitor's device.

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

Quick check for responsive layout

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

You should see something like the following:

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

Google Browser Chrome also has built-in support for checking site design responsiveness. To do this, go to the menu, select the "Additional tools" item and then "developer tools" (or press the key ).

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

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

SEO mobile design testing

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

To check the adaptability using the Google service, go to the following address and type in 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 is a little more complicated, for verification it is necessary to 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) how your site will look 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 responsive demonstration service: http://design.google.com/resizer/#

Quirktools screenfly

The second pretty service is http://quirktools.com/screenfly/. It will show you how your site might look even on TV!

Symby.ru adaptest

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

The speed of the mobile version of the site

After you have made sure that your site is responsive and displays correctly on the screens of most devices, you should check the speed of its work. Again, applied to mobile visitors.

PageSpeed ​​Insights

Google, as always, is ahead of the rest: https://developers.google.com/speed/pagespeed/insights/. This service will show you how the site looks on the phone screen and give recommendations on how to optimize 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 how the site looks on a mobile device, but also show the speed of its work: 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 of the FireFox and Chrome browsers. After that, of course, you need to check the loyalty of search engines to your design. And only then, to calm the soul or to show off, you can use online services.

The modern user browses sites not only from a computer, but also from a smartphone or tablet. For the convenience of people, the creators of the site should make it responsive to display on all common devices and in all resolutions. Therefore, every web designer and web developer must know the principles of responsive design. To check the adaptability of the site, there are many special services, of which we have selected the most convenient and functional, the use of which is free of charge.

XRespond

This tool supports a huge selection of devices that can be viewed by scrolling to the side of the site. We recommend that you bookmark XRespond.

Responsinator

Responsinator service allows you to check the display of the site in landscape and portrait orientation on smartphones iPhone, Nexus and iPad. There is also the ability to switch between HTTP and HTTPS.

Responsive design checker

Responsive design checker provides the ability to check the responsiveness of the site on smartphones, including new phones, such as Google Pixel, tablets, different monitor resolutions, and also allows you to adjust the window size yourself.

Matt kersley

The designer and developer from England Matt Kersley has launched his own service on his website, where you can check the responsiveness of the site, where the default width is 240 pixels. Kersley decided not to add extra sizes and limited himself to five: 240px, 320px, 480px, 768px, 1024px.

The designer has posted the tool's code on github for those who wish to install it on their site.

Am I Responsive?

Am I Responsive? - an excellent choice if you need to quickly check the responsiveness of the site on multiple devices and demonstrate it to the customer on a screenshot.

Mobile-Friendly Test

Google has many webmaster assistance services and Mobile-Friendly Test is one of them. Mobile-Friendly Test differs from the rest of the web services on our list - it cannot be used to view the display of the site on different devices. Its function is to check the optimization of a site on mobile devices, while providing advice on how to fix problems. There is no doubt about the value of Google's advice.

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

The convenience of displaying a website on mobile devices is a factor that has been steadily growing in importance in recent years. And this is not only about the growing number of users who browse sites from smartphones and tablets, but also about ranking at the level of search engines.

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

The importance of adapting sites 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 the 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 adaptability problems can manifest themselves only 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 emulators of mobile screens. However, it is not necessary to contact a third-party service: such an emulator is preinstalled in Google Chrome. In order to use it, just open the site of interest, press F12 (call the developer's console) and click the icon with the image of a mobile phone:

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

• preinstalled browser for Android OS;
• Google Chrome mobile;
• "Fast" browsers - for example, Opera Mini or UC Browser;
• Safari (for example, on the iPhone).

How do search engines see the site?

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

If there are any claims to the formatting of content on smartphone screens, they will be listed here. This will allow you to quickly diagnose specific display problems and jump right to their solution:

Please note: the screenshot of the site on the mobile screen in the scan results may not match the way you see it on your smartphone. Most often this is due to the fact that only files indexed by the search engine participate in the mobile friendly test, and style (css) and script (js) files 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.

Website optimization for mobile devices in the webmaster's office Google and Yandex

It is important to note that information on how the site corresponds to the views of search engines about the convenience of displaying on mobile devices can be obtained from the webmasters' offices - 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 => Mobile Usability. 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 they are crawled by Google robots:

In the new webmaster's office in Yandex, the data of the current mass check is not displayed yet. Instead, a similar tool to Google's mobile friendly test can be found there. With its help, you can manually check whether the search engine algorithms consider this or that page convenient for viewing on smartphones.

P.S.

How search engines perceive a site and its responsiveness is a huge issue, but user experience is equally important. So, according to formal criteria, a page can fully meet the requirements for the convenience 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 conversions, loss of sales, worsening behavioral factors (which, in turn, also affect rankings).

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

conclusions

The convenience of mobile browsing plays an increasingly prominent role in both conversions and search engine rankings.

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

The mobile friendly test from Google, as well as the corresponding functionality in the webmaster's offices (Google Search Console and the new webmaster's office in Yandex) will help find out how search engines evaluate the convenience of displaying a site on mobile devices.

In many countries, smartphones are more commonly used to surf the Internet than computers. Therefore, it is very important to adapt the site for mobile devices. Find out if your pages are convenient for smartphone users with a special tool in Search Console.

Usage

It's easy to check if the page is convenient for viewing on a smartphone: just specify its full URL. Verification usually takes less than a minute. If there are redirects on the page, they will be processed as well.

Based on the results of the check, 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 print (difficult 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 specify 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, adjust the viewport using the viewport meta tag. To learn more about this, see the Responsive Web Design Basics section of our guide.

Viewport meta tag must have device-width

It is impossible to adapt the page for screens of different sizes, because the viewport property with a fixed width is specified in its code. In this case, you need to apply a responsive design by adjusting the page scaling to fit the screen.

Content wider than the screen

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

Too small font

This report lists pages in small print that users must use zoom gestures to read. After setting up the viewport, you need to define the sizes of the fonts so that they appear correctly in it.