Google's Mobile Quality Guidelines Explained
by Geoff Hineman
For years, mobile has been the most rapidly increasing source of inbound traffic for websites and it shows no sign of slowing down anytime soon. In turn, many site owners have already taken the initiative to develop sites that are mobile-friendly, either via "m." sites or through responsive design that optimizes its display based upon the screen size of the visitor. Still, many sites have, for one reason or another, held off on designing for mobile searchers. The time for waiting is over.
The End is Near
On February 26, 2015 Google made the announcement that mobile usability would become a ranking factor for searches conducted on mobile devices as of April 21, 2015. Since approximately 50% of all searches done on Google are conducted via a mobile device, this will have tremendous reach. In fact, Google has also stated that this change will have more of an impact than either the Penguin or Panda updates. Again, however, this is just for mobile devices... for now. Google has long championed a good user experience and they have fine-tuned their algorithm with that aim in mind. This is because of Google's vested interest in delivering searchers to sites that best answer the questions they're asking. The more people who use Google and trust their search results, the more money Google stands to make from AdWords and other advertising platforms. Ultimately Google is looking to sync user experiences and history across all devices. For this reason, at some point in the not-too-distant future, mobile usability will most likely become a factor in all user searches, regardless of which device is used to conduct the search.
Where Do You Stand?
If you have already taken steps to be mobile-friendly, you are likely ahead of the curve. If you are unsure about how your site stands with regard to mobile-friendliness, however, you can take this mobile-friendly test offered by Google. Simply enter a URL and click the Analyze button. After a few seconds, you will get a result that tells you if the page is mobile-friendly or not mobile-friendly. If the page appears not mobile-friendly, you will see a list of reasons why, as well as a screenshot of how Googlebot sees the page on a mobile device. We recommend testing several pages of your site that feature different designs, such as:
- home page;
- category page;
- subcategory page;
- product page;
- checkout; and,
By testing a range of pages, you will have a better understanding of the degree to which you will need to make changes, if any. If Google Webmaster Tools is set up for your site, you can also look at your site's Mobile Usability results, which can be found under the Search Traffic heading. This will give you a downloadable list of which mobile usability factors are affecting pages of your site. It should be noted that some of these factors will overlap and, by correcting one issue, you may be able to correct others at the same time.
What Google's Mobile Usability Factors Mean
To date, Google is using six factors to determine mobile-friendliness. We expect that this will increase in time; so when you are making changes to address the issues listed below, try to be forward-thinking and embrace techniques that lead to a better mobile experience regardless if they are current usability factors or not. They may soon be and this will put you ahead of your competitors if/when that time comes. The six factors used to determine mobile-friendliness are listed here, with explanations and links to further resources.
- Flash Usage: This has been an issue that has plagued iOS users forever and still affects some other mobile browsers—the inability to render Flash-based content. There was hope that these browsers would "come around" and embrace this technology, since it is so widely used. That time has not yet come. Therefore, it is recommended that you replace your Flash-based content (i.e., animations, navigations, content display, etc.) with other modern web technologies.
- Viewport Not Configured: Visitors come to your site from desktops, tablets, and mobile devices, all of which have varying screen sizes. As such, your pages should be able to render accordingly. This can be done by having your pages designate a viewport via the meta viewport tag, which tells browsers exactly how to scale pages and adjust dimensions to best fit whichever device is being used. If you are not familiar with this, we recommend learning more about responsive web design basics sooner rather than later.
- Fixed-width Viewport: Related to the previous point, some developers have set a fixed width viewport to accommodate the most common browser sizes. These sizes, however, may not be rendering optimally for many devices. As mentioned earlier, the scope of devices accessing sites is progressing quickly with no real end in sight. Fixing these errors requires responsive design. In addition to the link in the previous bullet point, you can learn how to set the viewport if you feel your particular situation can be remedied by doing so.
- Content Not Sized to Viewport: Yes...even more about the viewport. In this instance, some CSS (cascading style sheets) declarations use absolute values designated to suit certain viewing sizes. These values are causing mobile users to scroll horizontally to view basic images and text. To fix this, use relative width and position values in your CSS elements. Further, look to see if your images are scaling properly. Here is where you can learn more about sizing content to the viewport.
- Small Font Size: Just as it sounds, this issue occurs and when mobile users have to "pinch and zoom" to read your site's text. Once you have addressed your site's viewport issues (if you have any), set your font sizes to also scale according to the browser and screen size. Here are some best practices related to using legible font sizes.
- Touch Elements Too Close: These issues are related to elements that a user has to tap to activate, such as navigational items, buttons, etc. If these elements are too close, users can get frustrated because they cannot select the item they want without inadvertently touching neighboring links and buttons. To handle this issue, revisit the size and spacing of touch elements on your pages to be sure that they render in a mobile-friendly manner. Here is more information about appropriately sizing tap targets.
Where to Get Started
This might sound like a lot to digest all at once. The truth is that you may only have issues with some of these factors. To find out, we recommend you first take a look at your Google Webmaster Tools account to learn the scope of your mobile usability issues and start formulating a plan of attack with your developer(s) from there. If you are still unsure about how to execute necessary changes, Google offers a handy Get Started guide to help you.