If you had the chance to read our recent post about responsive websites and why they’re loved by Google, then you’ll know that the search giant has gotten pretty serious on mobile-friendliness as a ranking factor in its search results.
Google is all about improving the experiences of its users, and since mobile traffic is already exceeding desktop traffic in more than 10 countries worldwide, the masterminds over at Google HQ are understandably seeking to make the internet a more mobile-friendly environment.
This basically means that any website Google considers to be non-mobile friendly will be pushed down in the search engine results pages, while those that are fully functional on mobile devices may be rewarded with a rankings boost.
Though Google is a self-confessed supporter of responsive design, your site will reap the benefits of this update regardless of whether it uses responsive, mobile or adaptive design, as long as it is considered to be fully mobile-friendly. And luckily for you website owners, Google has been nice enough to develop a mobile-friendly testing tool, which will help you to see if your website passes or fails the test.
All you need to do is paste your web address into the field provided, and hit “Analyze”.
If all goes well, you’ll see a message like the one below:
If however your website fails the mobile-friendly test, you’ll see something like this:
You may not receive all 5 error messages, but here’s a quick breakdown of them all, what they mean, and what you can do to resolve them:
Text too small to read:
This one may seem obvious, but it can be easily missed; especially if your text appears clear on your desktop.
But understandably, if someone is looking at your website through a smaller screen, they should be able to read through your content without it causing them a headache. Equally, they shouldn’t need to pinch, zoom or expand the page in order to read the text.
It’s super easy for search engines to check your text point size, and should be equally as easy for you to change it. Google recommends using a base font size of at least 16px CSS pixels, then resizing based on the font’s properties. For more detailed instructions, have a read of Google’s official guidelines.
Content wider than screen:
This issue tends to crop up with websites that have failed to properly implement a mobile friendly template or design. Although it might seem like a no-brainer to make sure your content doesn’t out-span the width of the device in question, surprisingly this error message turns out to be one of the most common, so it’s definitely worth mentioning.
Your best solution for managing widths and eliminating the need for sideways scrolling is proper implementation of the viewport Meta tag (more information below)...
Mobile viewport not set:
A viewport is the window within which a webpage is displayed. Without a viewport, mobile devices will render the page at a typical desktop screen width. Therefore pages optimised for use on a variety of devices must include a Meta viewport tag; a tag which instructs browsers to display a page’s dimensions based on screen size and scaling.
Of all the errors described in this post, this one is the most difficult to fix, because this happens when an element of your webpage is larger than the defined viewport width. Fortunately, there are lots of resources out there that can help with viewport configuration, including this one from Google.
Links too close together:
Another thing that Google looks at is how close together your links are. Fingers are much clumsier than mouse clicks, so if buttons and links are placed so close together that a user cannot easily tap their way through the site on a touch-screen device without accidentally knocking other elements, you’ll earn yourself a big red cross.
In order for your website to pass the tap test, you’ll need to set the most important buttons on your screen to a height and width of at least 48 CSS pixels. Less important links can be made less prominent, but should still be no smaller than 32 CSS pixels. Once again, there is more instruction on this available on Google’s official developer site.
Uses incompatible plugins:
A plugin is a piece of software code that enables an application or browser to process special types of content. Some of the more common plugins include Flash, Silverlight and Java. Without these, some elements of a webpage become unavailable to you:
Most mobile devices do not support plugins as they are a leading cause of crashes, hangs and security incidents. However, most content that once required plugins like Flash can now be created using native web technologies. Have a read of this article by Google for more guidance on correctly using images, videos, graphics and other files on your website.
So there you have it! We hope this post gives you all the ammunition you need to go forth and tackle those issues head on, and if you have any tips that you think might be of use to our other readers, please post them in the comments section below!