According to statistics, 52% of web traffic is provided by smartphones, 4% by tablets, and 43% by desktops. At the same time, the share of the first increased by 4% in 2017, while the second and third decreased by 13% and 3%, respectively. Thus, modern content delivery implies an indispensable orientation towards the mobile user. What should the mobile version of the site take into account?
About site adaptability
Site adaptability ensures the correct display of pages from any device. A responsive site adjusts to any size and does not look overloaded on the screens of phones, tablets, desktops, and TVs. Such sites have well-thought-out navigation, so the interaction between the user and the resource is convenient and understandable.
The bounce rate on responsive sites is lower due to easy interaction. Non-responsive sites look complicated and overloaded on different devices, so it is easier for the user to switch to another resource.
Increase site traffic due to mobile users
Put the interests of users first to create a convenient, understandable, and responsive site. To do this, you need to:
Abandon Flash technologies
Flash technologies slow down the site loading speed, so browsers are gradually abandoning them. Quite often, online business owners do not even realize that the use of resource-intensive Flash technologies reduces site traffic.
Adapt the site to voice search
Interacting with search engines using voice is more convenient and faster, so the method is rapidly gaining popularity. If you want your site to rank for voice queries, use low- and ultra-low-frequency key phrases in your content. It is easier and faster to speak a query than to write it, so phrases for voice search are different and consist of 5-6 words.
By the way, now assessors (specialists who evaluate search results and sites included in it) will evaluate sites using voice search or audio content. For some tasks, requirements have appeared for the evaluator to have headphones and speakers. Previously, such tasks were experimental, now this mark has been removed.
According to statistics, 65% of users aged 25-49 interact with their devices at least once a day.
Evaluate content on pages
The text on the pages of the site should have subheadings that are related to each other in content. It is important that the page with the content does not cut off the screen borders and interacts correctly with images.
The user should easily find the necessary section, even if he opens the material on 40 screens. In this case, you need to add the table of contents at the beginning of the text so that the user does not have to scroll, for example, 33 screens to the necessary information. You can also hide some of the content under the guides.
Assess the convenience of the buyer's journey
It's easier for a user to leave a resource than to figure it out and "hit" the small "buy" buttons with their finger.
It's important not only to make the site responsive, but also to think through the user's journey. The site interface should smoothly guide the user from the main screen of the site to achieving the goal. If all the site elements are in their places, the site's conversion will increase.
Get rid of pop-ups
Pop-ups are unsettling for desktop users, and on the mobile version of the site, it is even more difficult to get to the small close icon, so the likelihood of the user leaving is high.
Abandon PNG images
Google recommends replacing PNG with WebP. All browsers work fine with this format, and difficulties arise only in Safari. You can convert images using the Squoosh service. The recommended image size is 20 KB.
*how the Squoosh optimizer works
After changing the image format, the site pages will load faster and the bounce rate will decrease.
New type of mobile search
Favicons have been added for mobile search. The Ad icon has lost its frame and is highlighted in bold, and favicons are now located before the site names.
This is how Google is trying to improve navigation in search results so that users can better navigate the results using brand icons.
How to check the adaptability of the mobile version of the site?
Now you understand the importance of the mobile version of the site. But how to understand how good your resource is in this? You can check this yourself using the Mobile Optimization Checker tool available in Google Search Console.
It's very easy to work with: you just need to paste the URL of the page you want to check into the appropriate field and click the "Check Page" button.
The check itself takes about 1-2 minutes. After the check is complete, you will see whether your page is optimized for mobile devices, and if not, what errors are preventing it.
If everything is not right with the display of the page on mobile devices, you may find the following problems in the check results:
- Unsupported plugins are used, such as Flash. They are incompatible with most mobile browsers and significantly impair the responsiveness of your site. It is better to use more modern technologies that have wide capabilities.
- The content is wider than the screen. In this case, a horizontal scroll bar appears on the page, which significantly worsens the perception of the content. This error occurs due to an error in positioning elements in CSS styles, as well as in cases where images are not scaled.
- The viewport meta tag value is not set and there is no device-width value in the viewport meta tag. Viewport signals the browser to correctly resize elements on the page to fit the device's screen size. By correctly configuring the display area using this tag, you will achieve the correct display of your site pages on different devices. If the viewport tag specifies a fixed width, adapting the page to the screen size will be impossible, so configure scaling in the viewport meta tag using the device-width value.
- Small font. This error indicates that the content on the mobile version of the page is illegible - users will have to zoom in to read the text on it.
- Interactive elements, such as navigation buttons, are located close together. In this case, users will touch other menu items or other buttons when trying to click on the desired page on the mobile version.
You may also see an error message if the tool cannot access the page - this is possible if your site has some malfunctions or if your Internet connection is unstable. In this case, you should repeat the check after eliminating all the errors.
As you can see, the tool provides comprehensive information about the errors that prevent a particular page from displaying correctly on mobile devices.
To find out how the entire site is displaying, you need to use Google Search Console. You can find all the necessary information in the "Mobile-Friendly" report.
After correcting the errors, you need to check them and update the data in Google. To do this, click the button on the page with information about the error on the page. If everything is fine, the error will no longer appear, and the corrected page will be displayed correctly in the mobile version.
Instead of conclusions
The Mobile First algorithm affects search results not only during mobile surfing but also when using desktop devices. The main and mobile versions of the site are ranked by the same index, so if the resource is not adapted to mobile devices, the site's positions may drop.
If a user goes to the site, does not find useful information, and returns to the search results, Google perceives this as a negative signal and lowers the site's position in the ranking.
Checklist of requirements for the mobile version of the site
1. Form of content organization
It should be borne in mind that a person viewing smartphone pages often does so in uncomfortable conditions - in transport, on the street, in public places. This imposes such an important requirement on the form of content presentation as increased convenience of information perception: sufficiently large font size, large navigation elements, quick link buttons, and clear organization of the material.
2. Minimization of text content
It should be remembered that long reads are not the best option for maintaining attention in conditions when a person is uncomfortable reading. In addition to the correct visual organization of content, it is extremely important to minimize the amount of information presented: only the most important, only what is meaningful to the user. If there is a need to place voluminous text content, it is advisable to divide it into several fragments.
3. Cropping graphics and other heavy elements
Sites with adaptive design, as well as with dynamic content output, give mobile users exactly the same content as those used by desktops. When using a separate mobile version of the site, the requirement to minimize content also applies to non-text information. The restrictions apply to graphics, flash objects, and videos that eat up traffic and load the computing power of the mobile device.
4. Links to the main site
When using the mobile version of the site, it is important to link to the main resource. For voluminous content, this is a good option not to overload the pages, while giving users the opportunity to go to the full content.
5. Not being intrusive
In the mobile version, it is not recommended to use intrusive methods of interaction with users. Pop-ups, annoying assistants, various means of stimulating sales - all this, against the background of forced minimalism, is annoying and does not add a positive attitude to the resource. Instead, you should rationally organize the call to action and place the corresponding buttons in one clearly visible and intuitive place.
6. Less scrolling
Despite the fact that scrolling on a smartphone is easier than sitting at a non-touch desktop, the small screen diagonal imposes certain limitations on the user's scrolling comfort. Ten-fold finger movements are still not very convenient, so it makes sense to place everything that is most important as high as possible on the page. Contact information and a call to action should be placed at the top of the screen.
The limitations on the content that mobile device users receive are related to the peculiarities of perceiving information on a small screen, with the limited computing power of smartphones, as well as the fact that in some cases the mobile Internet leaves much to be desired.
When developing a website, one should not forget that, in addition to a mobile truncated version, it is necessary to organize the work of the website according to the principle of adaptive design or dynamic display of content to users, which removes a number of the limitations described above.
