With just days to go until Google’s mobile-friendly algorithm launches (April 21), we take a look at three more mobile usability errors, and show you how to fix them – fast.
This post is adapted from our free eBook – The Ultimate Guide to Google’s Mobile Usability Algorithm.
A few things before we start.
If you’re confused by all this, read our introductory post on Google’s mobile-friendly algorithm. This covers all the essential facts about the changes to mobile search, which one Google employee described as being more impactful than Panda or Penguin.
All of the errors described below crop up in Google’s mobile usability report. Here’s how to run a report on your website.
And if you’re looking for part one, it’s here.
So without further ado…
Content Not Sized to Viewport
“This report indicates pages where horizontal scrolling is necessary to see words and images on the page. This happens when pages use absolute values in CSS declarations, or use images designed to look best at a specific browser width (such as 980px). To fix this error, make sure the pages use relative width and position values for CSS elements, and make sure images can scale as well.”
The problem described here will be familiar to most mobile browser users – when a piece of content is too large for the screen, it forces the user to scroll left and right to see the content in its entirety.
This is caused by the content using fixed size values that are larger than the defined viewport, or positional values that place the content outside of the viewport.
This content could be a table, a block of text, or an image, amongst other things.
Google’s ‘content not sized to viewport’ error tends to appear when absolute values are used as part of a responsive design.
It’s an issue that can creep in through forgetfulness. If you already have a responsive site in place, but one blog post mistakenly includes an image with an absolute width that exceeds the size of the viewport, Google should pick up on this error in a mobile usability report.
To avoid this error, make sure all page elements across affected pages use relative dimensions that adjust to the user’s screen size.
The following code will define an image size as 42 x 42 pixels. These are absolute values, so are against Google’s guidelines:
<img src=”example.gif” height=”42” width=”42”>
The following code will define an image as 50% the width and height of the page (or a containing element). This is in line with Google’s guidelines:
<img src=”example.gif” height=”50%” width=”50%”>
As well as using relative dimensions, rather than absolute dimensions, you should also make sure you use relative co-ordinates to place elements on the page. Otherwise, you can end up with stray content being placed outside of the viewport.
Small Font Size
“This report identifies pages where the font size for the page is too small to be legible and would require mobile visitors to “pinch to zoom” in order to read. After specifying a viewport for your web pages, set your font sizes to scale properly within the viewport.”
This issue is fairly self-explanatory. If your font sizes are too small for most normal- sighted people to read on a mobile device, then you’re creating a user experience problem.
Normal-sighted users shouldn’t have to zoom in on a page to read its text – this defeats the purpose of responsive design, which aims to provide seamless, user-friendly experiences across devices.
The answer to this problem isn’t quite as simple as ‘make the text bigger’ .
There are two issues to be aware of – the units of measurement that define font sizes, and Google’s recommended font sizes for mobile devices.
Many units of measurement can be used to resize fonts, including inches, centimetres and millimetres. However, the most common are pixels (px), points (pt), EMs (em) and percent (%).
In this context, a pixel refers to a CSS pixel – a defined unit of measurement that will appear to be the same size across all devices.
Google recommends using pixels as your unit of measurement for fonts across your site. Although CSS pixels are a fixed size measurement, they are much less likely to cause confusion than common fixed measurements like millimetres or centimetres.
Google also recommends using a base font size of 16px, then defining other font sizes in your CSS that can be used across your site. These sizes should be defined in direct relation to this base size (for example, a ‘small’ font that’s 75% the size of your base).
In addition, you should:
- Adjust the vertical spacing between lines of text to make it legible on mobile devices. Google recommends the browser-default spacing of 1.2em.
- Be careful with your typographical choices. Using too many fonts can make pages look messy and difficult to read, especially on mobile.
Touch Elements Too Close
“This report shows the URLs for sites where touch elements, such as buttons and navigational links, are so close to each other that a mobile user cannot easily tap a desired element with their finger without also tapping a neighboring element. To fix these errors, make sure to correctly size and space buttons and navigational links to be suitable for your mobile visitors.”
Again, this is self-explanatory. If buttons, links and other ‘touchable’ elements are too close together, the user’s intended input may be misread by the device. This causes obvious usability issues.
If you face this error, you need to evaluate behaviour drivers and calls to action on key pages and ensure links and buttons are big enough to press easily with touchscreen devices.
Google recommends that important touch elements are at least 48 by 48 CSS pixels (roughly seven millimetres square). This is based on the average adult finger pad size of 10mm.
Less important touch elements, like links in body text, can be smaller. However, they should be placed far enough from one another that the user doesn’t mistakenly hit the wrong link. Google recommends spacing these elements at least 5mm apart from one another.