Reading time 6 minutes
Why is it important to test websites for responsiveness? According to Yandex.Metrica, the number of people using mobile devices in Russia is approaching 50% and is constantly growing.
Concerning search engines strive to make mobile issuance more convenient for users. In February 2015, Google states that having a responsive or mobile version has a positive effect on rankings. Exactly one year later, in February 2016, Yandex announces the same thing.
What qualities should a responsive website have?
- No horizontal scrolling.
- The viewport meta tag is correct.
- Interactive elements (links, buttons, forms, etc.) are not too close to each other.
- Lack of Flash elements, Silverlight plugins.
- Convenient navigation through sections.
- Content (text and pictures) is adapted to the screen size and is read without magnification.
Services for online check of site adaptability
- Google Mobile Friendly - https://search.google.com/test/mobile-friendly
Displays how the first screen of the site looks on a smartphone, gives an overall assessment of the quality of optimization.
Advantages
- Official Google service.
- Indicates specific errors.
- Able to determine the presence of a mobile version.
Flaws
- You can't see how the site looks at different screen sizes.
- Shows only the first screen, you can not interact with the site.
- Yandex.Webmaster Mobile Friendly - https://webmaster.yandex.ru/site/tools/mobile-friendly/
Unlike the tool from Google, you can only check your own resources for which you have confirmed the rights in Yandex.Webmaster. Shows the overall rating and shows how the site looks on a smartphone.
Advantages
- Yandex official service.
- Indicates specific problems in optimization.
- Understands if the site has a mobile version.
Flaws
- You can only check your sites.
- There is no way to see how the site looks on different screens
- Quirktools- http://quirktools.com/screenfly/
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 list of devices or set your own resolution
- You can interact with the site
Flaws
- Can't detect 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 how the site looks on different operating systems(IOS and Android)
- He himself understands if there is a mobile version
- Extension for Google Chrome
Flaws
- You can not specify the screen size yourself, only choose from a ready list
- No error list
- Always automatically downloads 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, gives advice on correcting errors.
- "Does not see" the mobile version.
Flaws
- "Does not see" the mobile version.
- There is no way to set your screen size.
Conclusion
If you have access to webmaster services (Yandex.Webmaster or Google Search Console), it is best to test for adaptability with their help. They reflect the most relevant search engine requirements 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 terms of functionality.
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. To find out if your pages are suitable for smartphone users, a special tool in the Search Console will help you.
Usage
Checking if a page is suitable for viewing on a smartphone is easy: 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 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 (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 specify the viewport property, which tells the browser how to properly resize page elements to fit the device's screen size. To make your site display correctly on different screen sizes, adjust the viewport using the viewport meta tag. Details on this are provided in the Responsive Web Design Basics section of our guide.
The viewport meta tag must have a device-width value
Adaptation of the page for screens of different sizes is impossible, since the viewport property with a fixed width is specified in its code. In this case, you need to apply adaptive design by adjusting page scaling to fit the screen.
Content wider than the screen
This report identifies pages where you have to scroll horizontally to view text and images. This issue occurs when CSS sizes are set to absolute values, or when images are used that are designed for a specific browser window width. Make sure the width and position values are css elements are relative, and images are scaled. Detailed information about this is provided in the Viewport Content Sizes section of our guide.
Too small font
This report lists pages with small print that require users to zoom in to read. After setting up the viewport, you need to determine the font sizes so that they display correctly in it.
Frameworks, such as or , which greatly facilitate and speed up page layout.
implies an excellent display of a web page on all devices and monitor extensions. Probably not every layout designer has full set devices with all possible extensions displays, 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 will go bankrupt. What to do? For these purposes, we have developed services for testing adaptive sites. Their working principle is very simple. Most often there is a frame of a certain size where the page opens. The effect is about the same as when viewed on a mobile device. I want to note that the service does not always accurately show the display of the page on a phone or tablet. During layout, you should test with the help of services, but after completion, if possible, test on the most common devices.
So. For your attention best tools for testing responsive websites.
Responsive website testing tool 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. On the this moment supported devices with the following operating systems: iOS, Android, Kindle Fire.
“Project manager of the Business Motor team, webmaster, copywriter.
Mobile adaptation is an important stage of working with the site. With the introduction of the mobile ranking factor, onboarding has become even more important. We tell you how to conduct basic site mobility testing»
The convenience of displaying the site on mobile devices is a factor whose importance in last years is growing steadily. And the point here is not only in the growing number of users who view sites from smartphones and tablets, but also in ranking at the search engine level.
Google officially announced the influence of this factor on the position of the site on 04/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 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 in the future. Mobile adaptation will be reflected in both visitor conversions and page rankings 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 everything is not 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 testing:
- on a smartphone with a vertical screen orientation (including on narrow screens of about 300 pixels wide);
- on a smartphone with horizontal orientation screen (from 480 pixels wide);
- on tablets with a vertical and horizontal screen orientation (from 768 pixels wide).
It is only natural to try a site on different devices not always uncomfortable. If only because at hand it may not be all the necessary gadgets for this. You can solve this problem using various mobile screen emulators. However, it is not necessary to contact a third-party service: a similar emulator is preinstalled in Google Chrome. In order to use it, just open the site of interest, 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 characteristics. When testing, it is important to view the site on:
- pre-installed Android OS browser;
- Google Chrome mobile;
- "fast" browsers - for example, Opera Mini or UC Browser;
- Safari (for example, on the iPhone).
How do search engines see your site?
First automatic check, which is worth going through if you are interested in the problem of the adaptability 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 the answer is no, it's almost certain that the site is considered inconvenient for small screens and at the level of Google's algorithms - with all the ensuing consequences.
If there are any claims to content formatting on smartphone screens, they will be listed here. This will allow you to quickly diagnose specific display problems and jump right into solving them:
Please note: screenshot of the site on 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 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.
Website optimization for mobile devices in Google and Yandex webmaster's office
It is important to note that information about how the site corresponds to the ideas of search engines about the convenience of displaying on mobile devices can be obtained in the webmasters' offices - Google Search Console and Yandex.Webmaster (so far only in the beta version of the new account).
Google Search Console results current check pages are available here: Search traffic => Viewability on mobile devices. This page duplicates the information that we can get using the mobile friendly test, but is given for all indexed pages of the site as they are crawled by Google robots:
In the new webmaster's office in Yandex, the mass current check data is not yet displayed. Instead, you can find a tool similar to Google's mobile friendly test. With it, you can manually check whether the search engine algorithms consider a particular page convenient for viewing on smartphones.
P.S.
How the site and its adaptability are perceived by search engines is an extremely important issue, but user experience is equally important. So, according to formal features, the page can fully meet the requirements for ease of viewing on mobile devices, but in reality - for "live" users - this convenience will be doubtful. The direct result of this is lower conversions, lost sales, worse behavioral factors(which, in turn, also affect rankings).
In the next article of this cycle in a week, we will tell you how to see the site through the eyes of its visitors, how to find bottlenecks in mobile display, and what criteria should be used to evaluate its convenience.
conclusions
The ease of viewing a site on mobile devices is playing an increasingly prominent role in both conversion and search ranking pages.
The first step to evaluating the adaptability of the site is testing on different screens and in different mobile browsers.
To find out how search engines evaluate the convenience of displaying a site on mobile devices, the mobile friendly test from Google will help, as well as the corresponding functionality in the webmaster's offices (Google Search Console and new office webmaster in Yandex).
2015-09-11 8204 4 Denis Abdullin
Responsive design is not easy new trend and to some extent a necessity. Now Russian sites are also made in such a way that they look good, beautiful and convenient on any screen.
We share with you a list of services online website responsiveness check. Unlike other blogs, we have only the best services.
I note that in the official uCoz template store, all themes are responsive, because. this is one of the main conditions for publishing a template for sale.
Screenfly - checking the adaptability of the site with the choice of device
Screenfly is ranked first because it has a list of popular screen sizes mobile phones, smartphones, laptops and desktop computers. Of course, you can set your own dimensions and see, it is also possible to view the site through a proxy server, turn scrolling on and off.
Mattkersley - all sizes on one page
The project is good in that you enter a link to your site, and it loads it into all the frames that are on the page. You can immediately test the site on 5 sizes. There are 2 modes: just test width or show device names and their height.
Responsive.is - Responsiveness test on multiple devices
A good and convenient service, but you can only check the site on 5 devices. Compared to previous services, this is very small. For those users who get lost in all these sizes, they are not even listed here, just device icons are shown.
Personally, I do not use such services, but just reduce the width of the browser. Plus, site adaptability check services do the same thing, it’s better to watch your project on real devices, in standard Android browsers and Safari on iPhone.
There are other services, including in Russian. At first we wanted to bring exactly them, but they simply copied the sites listed above, the existing text was simply translated, just instead of “Phone”, for example, you will see “Phone”.