All internet marketers have long understood that it was necessary to adapt sites for mobile traffic the day before yesterday. Owners of Internet projects no longer doubt whether you need to make a mobile version of the site. Today they are trying to figure out which way to optimize a resource for mobile traffic.
This article is intended for marketers who have chosen to create a mobile version of the site or dynamically display data for different groups of users. In it you will find a list of questions for the operational control of the correctness of the use of the mobile site. This checklist will help you correct common errors, as well as use optimization methods for mobile traffic, which even experienced professionals sometimes forget.
- Combining mobile and full versions of sites
- What technical aspects to pay attention to
- Does the design meet user needs?
- Is navigation convenient
- Check content
- Make sure the video is published for mobile users.
- Consider the difference between mobile and desktop search results pages.
- How to check the mobile version of the site
How to check the mobile version of the site
Imagine the following situation: you went to a web design studio to get a mobile version of the site. Within the specified period, the studio employees have handed over the work. On the screen of your smartphone, the site looked fine, the links worked, the pages opened quickly. Therefore, you thanked the partners and went to your office.
Now you are sitting in the office and waiting for the reaction of the audience to the appearance of the mobile version of the site. To evaluate it, you will have to wait a few weeks. And in order not to look silly in the eyes of users, spend half an hour on an independent audit of the mobile version. The checklist below will help you find and fix common errors.
Combining mobile and full versions of sites
1. Check redirects
- Are users redirected to the mobile version of the site if they use smartphones or tablet PCs for surfing?
- If a mobile user wants to go to the internal page of the site, will he get to it or be redirected to the main page?
- If owners of stationary PCs get to the mobile site via the link, will they be redirected to the full version of the site?
Redirects are configured correctly if you answer these questions in the affirmative. Mobile users should be redirected to the mobile version of the site. The visitor should go to the selected page, and not to the main mobile version. Owners of stationary PCs should fall on the full version of the site. However, leave them the opportunity to return to the mobile page.
2. Allow mobile users to work with the desktop version of the site
- Can a mobile user easily upgrade to the full version of the site?
- If the mobile user chose the full version, will he stay on it after switching to a new page? Or will it be thrown to the mobile version at every transition?
Redirects are configured correctly, if the user can quickly select the full version of the site and stay on it after the transitions.
3. Check out the dynamic display feature.
- Has a hary header Vary: User-Agent been added to the site’s HTML?
This header tells search engines and browsers that the site’s version should be selected according to the type of client gadget.
4. Check attributes for mobile and full site versions.
- Is the HTML code for the full version of the site tag rel = "alternate"?
- Has the rel = "canonical" tag been added to the HTML code of the mobile version of the site?
In order for browsers to show the mobile version of the site to owners of smartphones and tablets, add the following line to the full version header:.
In order for browsers to show the full version of the site to desktop owners, add the following line to the header of the mobile version:.
What technical aspects to pay attention to
1. Check if search engines index mobile site
- Are there any error messages in the Google webmaster service?
- Are there any error messages in the Yandex.Webmaster service?
To check for errors using the Google Webmaster Service, use the Google Index - Indexing Status menu. To check for errors using the Yandex.Webmaster service, use the menu item "Indexing a site - excluded pages".
2. Create or check a mobile site map.
- Are all pages of the mobile version of the site listed on the site map?
- Is the number of pages equal in the mobile and full version of the site?
Create separate maps for full and mobile versions. This will help you keep track of the number of indexed mobile pages and compare it with the number of indexed pages of the full version. Read about creating a mobile site map here.
3. Check the download speed of the mobile version of the site
- How fast is the site loading?
Download speeds are critical areas for optimizing mobile sites. To check this criterion, use the Google PageSpeed Insights tool. This tool will not only help you determine the download speed, but also tells you how to improve this indicator.
Does the design meet user needs?
1. Check how the site looks on the screens of different mobile gadgets
- Is it convenient to view the site on the screen of smartphones?
- Is it convenient to view the site on the tablet screen?
Check the appearance of the site with several gadgets of the same type. Choose devices with different screen sizes running on different operating systems. Try to open the site using smartphones iPhone (iOS), Samsung Galaxy (Android), Nokia Lumia (Windows). Also use the "tablets" iPad, Samsung Galaxy, Kindle Fire, Asus Transformer Book.
2. Check the possibility of using links
- Is it convenient to use links?
According to Google recommendations, the interval between links or navigation elements of a mobile version of a site should be 28 pixels by 28 pixels. However, do not waste time counting pixels. Check for yourself whether it is easy to follow the link. Do you press other navigation elements when trying to "tap" the selected button?
3. Do not use items running on Flash technology.
- Does the site have elements that use Flash?
Gadgets on iOS do not support Flash technology. Gadgets on the Android OS hardly display elements that work on Flash. Therefore, remove these items from the mobile version of the site.
4. Check if mobile browsers can take into account the size of the screen of the gadget
- Do you use the viewport meta tag?
Add a line to the header of the mobile version of the site so that mobile device browsers can take into account the gadget screen size.
5. Make sure the site does not have pop-ups.
- Are pop-up windows displayed on the mobile version of the site?
Mobile gadget users may leave the site due to pop-up windows. These elements are not always easy to close by viewing the site using a tablet or smartphone. In addition, they increase the loading time of the site.
Is navigation convenient
1. Make sure that all sections and pages of the mobile version of the site are accessible to visitors.
- Are all navigation elements and section links available to the mobile user?
Sometimes designers reduce the number of navigation elements of the mobile version, which impairs the user experience. Make sure that navigation allows visitors to get into each section of the site and find the content of interest.
2. Check if mobile users have access to links to full site pages
- Can a mobile version visitor view desktop pages for which there is no mobile version?
If the full version of your site contains 1000 pages, do not restrict mobile users to access to 50 customized pages. If you do not have a mobile version of all pages, open access to desktop pages for owners of smartphones and tablets. Analyze the needs of mobile users, perhaps this will push you to create additional pages of the mobile version.
1. Make sure that the number of pages of the full and mobile versions of the site is the same.
- Is the number of pages on the mobile and full version of the site the same?
In some cases, the number of pages on the mobile version of the site may exceed the number of pages on the full version. For example, it is appropriate if you divide the content of a dextpage page into several parts and publish them on separate mobile pages. In any case, each page in the full version should have an equivalent mobile page.
2. Make sure your content is suitable for mobile visitors.
- Will the user be able to consume your content on the go?
Mobile users can read short news stories as well as great analytical materials. However, high volume materials must be structured. An elephant is easier to eat bit by bit. A large article from the screen of a mobile gadget is easier to read if it is combined into several semantic blocks, has subtitles, bulleted lists and illustrations.
3. Be sure not to advertise to mobile visitors.
- Do you show ads to mobile visitors?
If advertising is not the main source of income for your business, remove it from the mobile version of the site. This will increase the speed of loading pages and improve the user experience.
Make sure the video is published for mobile users.
1. Use a video player that supports HTML5
- Can I view the video posted on the website on the smartphone screen?
Use HTML5-enabled YouTube video hosting for publishing.
2. Use adaptive video
- Does the video size adapt to the gadget screen size?
This option is available if you use YouTube or Vimeo hosting for video publishing.
Consider the difference between mobile and desktop search results pages.
1. Note the page title.
- Does the page title appear in two lines attractive?
- Is the page description fully displayed on the page?
The title of the mobile page should not exceed 70 characters with spaces. Please note on the mobile issue page the header is displayed in two lines. Description of the page should not exceed 120 characters with spaces. In this case, it will be displayed on the full page.
How to check the mobile version of the site
The proposed checklist allows you to avoid the most common mistakes when launching a mobile version of sites. Checking the site on your own or with the support of friends, you can predict the reaction of the audience and notice various inconveniences and drawbacks. Quickly eliminating errors, you will help the audience to view your site using mobile gadgets.