Checking adaptability for mobile devices. Checking optimization for mobile devices. Viewport meta tag value not set
Frameworks, such as or, which greatly facilitate and speed up page layout.
implies excellent display of a web page on all devices and monitor extensions. Probably, not every layout designer has a full set of devices with all possible display extensions, for testing your layout. This is not surprising, because technology is not cheap these days.
So. Buying mountains of mobile phones and tablets is not an option - we'll go broke. What to do? For these tasks were developed services for testing adaptive websites. The principle of their operation is very simple. Most often there is a frame of a certain size where the page opens. The effect is approximately the same as when viewed on a mobile device. I would like to note that the service will not always accurately show the display of the page on a phone or tablet. When coding, you should test using services, but after completion, if possible, test on the most common devices.
So. For your attention best tools for testing responsive websites.
A tool for testing responsive websites from Adobe. To use it you need to install it on your computer.
The program allows you to synchronize your devices via WIFI and view the site as it will be displayed on your device. Currently supported devices with the following operating systems: iOS, Android, Kindle Fire.
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.
The modern user views websites not only from a computer, but also from a smartphone or tablet. For the convenience of people, website creators 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 a website, there are many special services, of which we have selected the most convenient and functional, the use of which is free.
XRespond
This tool supports a huge selection of devices, the display of which can be viewed by scrolling sideways on the site. We recommend saving XRespond to your bookmarks.
Responder
The Responsinator service allows you to check the display of a website in landscape and portrait orientation on iPhone, Nexus smartphones and iPad tablets. There is also the ability to switch between HTTP and HTTPS.
Responsive design checker
Responsive design checker provides the ability to check the website's adaptability on smartphones, including new phones, such as Google Pixel, tablets, different monitor resolutions, and also allows you to adjust the window sizes yourself.
Matt Kersley
Designer and developer from England Matt Kearsley launched his own service on his website, where you can check the adaptability of the site, where the default width is 240 pixels. Kearsley decided not to add extra sizes and limited himself to five: 240px, 320px, 480px, 768px, 1024px.
The designer has posted the tool code on github for those who want to install it on their website.
Am I responsive?
Am I responsive? – an excellent choice if you need to quickly test the website’s responsiveness on several devices and demonstrate it to the customer in a screenshot.
Mobile-Friendly Test
Google has many services to help webmasters and Mobile-Friendly Test is one of them. Mobile-Friendly Test is different from other web services on our list - it cannot be used to view how a site is displayed on different devices. Its function is to check the site's optimization 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 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 of 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 significant 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.
Stop resizing your browser window, stop raping it! I bet you've heard this more than once. Okay, maybe you haven't heard. But if you develop responsive websites professionally, you know what I mean: any DOM change or CSS edit, and you again start pulling the edge of the browser back and forth, testing the changes and seeing if anything is broken.
The purpose of your movements is to imitate the screens of various devices.
In a corporate environment, you often have a variety of gadgets provided by the company for testing. At my job, I have an iPad, iPod, other tablets, laptops, and desktop monitors at my disposal. If you don't have that luxury, you have to use what's on hand.
Fortunately, there is an impressive set of online tools that simulate various device sizes. Of course, each of them has its own advantages and disadvantages, we will look at several of these tools.
For testing, I chose the truly responsive website PajamasOnYourFeet.com, the site is built on the basis of an HTML5 template provided free of charge by EGrappler.
Am I responsive?
Am I Responsive, a very simple tool that allows you to quickly view your site on up to 4 devices. All of them are iOS and the developer explains this as a feature of the site. In general, no settings, no choice, but very simple and clear.Available sizes:
- desktop monitor - 1600 x 992px;
- laptop - 1280 x 802px;
- tablet - 768 x 1024px;
- mobile phone - 320 x 480px.
There are two nice features: the ability to drag devices across your screen, and the ability to share a link to a site test.
device responsive
deviceponsive is very similar to Am I Responsive, in that it is just as simple, with a minimum of settings and options. All available devices are displayed at once on one long page. Of all the available options, this is the ability to edit the header background and add your logo there, which will be useful when you decide to share a screenshot.Devices and available screen resolutions.
- Macbook - 1280 x 800
- iPad portrait - 768 x 1024
- iPad portrait - 1024 x 768
- Kindle portrait - 600 x 1024
- Kindle landscape - 1024 x 600
- iPhone portrait - 320 x 480
- iPhone landscape - 480 x 320
- Galaxy portrait - 240 x 320
- Galaxy landscape - 320 x 240
responsive test
Like deviceponsive, responsive test displays your site on different devices. But instead of showing them all at once, you choose the device you need in the top menu of the page. By the way, scaling works correctly here, which allows you to test a higher resolution on a smaller one.30 different resolutions are available on the site, ranging from a huge desktop monitor, to what they call "crappy android" (to be fair, there is also a normal android).
As for the Firefox browser, it does not work correctly with this site. Note that the screenshot does not show the slider between the green header and the white background content area.
responsive.is
Very similar to the previous two tools, but there is one thing that sets responsive.is apart from the others. This is a smooth animation when moving from one device to another, as well as a semi-transparent area that shows the real area of the site that does not fall into the viewing area.Available device options are auto (the way you see the site), desktop computer, tablet in landscape and portrait orientation, smartphone in portrait and landscape orientation. Unfortunately, it is not possible to set arbitrary sizes in px.
Screenqueries
But the capabilities and available options distinguish Screenqueries from previous services. 14 phones and 12 tablets are featured here, with separate options to switch between portrait and landscape modes. The results are displayed on a grid with rulers. It is also possible to set a custom resolution by dragging the right or bottom edge.An interesting feature of this site is that for a number of devices there is a “Trueview” option that shows your site in the device’s native browser.
Unfortunately, Firefox was unable to display the slider here either. No need to blame me, Firefox is my favorite browser, but that's the way it is.
Screenfly
Screenfly is perhaps the most functional of all. There are 9 more than tablet devices available - from 10" laptops, to 24" monitors, 5 tablets, 9 phones, 3 TV resolutions, as well as custom resolutions. Add here a separate switch for portrait and landscape mode, as well as an option to show scrolling. You can also share a link to the test using one button.For each device, the screen size in px is indicated in the menu, and the actual size of your browser window is also displayed in the upper right corner.
All of the above advantages allow us to claim leadership, if not for one thing (quote from the developer): “Screenfly can use a proxy server to imitate devices while viewing your site. The proxy mimics the user agent string, but not the behavior of these devices." Screenfly is the only service on the list that allows testing based on the user agent string.
Do you use the presented tools in your practice? Share your secrets of developing responsive websites in the comments.
P.S. Please report any errors regarding translation via PM.
