New Mobile Usability Issues Detected on your Site?
If you have a Google Search Console account, you will probably be familiar with the New Mobile Usability Issues detected on your site email. You’ll then be informed that ‘Search Console has identified that your site is affected by x new issues of type Mobile Usability‘.
Google then advises ‘We recommend that you learn more about these issues and fix them when possible to enable your site to have the best possible experience and coverage in Google Search‘. So you’ll probably want to do something about this if you can but what do the errors actually mean.
Here are four errors that are very common.
1. Text too small to read
This one may seem obvious but it’s a common error. Your text has to be big enough to read on tiny screens. Google will flag this as an issue if it considers your font size for the page to be ‘too small to be legible and would require mobile visitors to “pinch to zoom” in order to read.
Google recommends using a base font size of at least 16 pixels.
2. Clickable elements too close together
Google looks at is how close your links are. Fingers are much clumsier and less precise than mouse pointers and, because of this, Google uses the size and proximity of links as a mobile-friendliness factor.
Google will flag this as an issue if it considers ‘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’.
The recommended button height/width is a minimum 48px, and clickable elements should be at least 32px from other elements.
3. Content is wider than the screen
This is usually because a page will contain a fixed width element such as an image that is wider than the screen. Fixing this will make sure your visitors don’t have to scroll sideways to view your page.
However, Google sometimes seems to flag this as an issue even on sites even where everything looks fine so treat cautiously.
Typically, your best solution for managing widths is to make sure fixed width elements scale down and the proper use of the viewport meta tag (see below) . This allows you to instruct browsers to display a page’s dimensions based on screen size.
4. Viewport not set
A website’s viewport controls the width of a webpage for the device a user is viewing it on. If you don’t configure your website’s viewport properly, vsitors will have to keep pinching and zooming to view your content.
Google will flag this as an issue if ‘your page does not define a viewport property, which tells browsers how to adjust the page’s dimension and scaling to suit the screen size. Because visitors to your site use a variety of devices with varying screen sizes—from large desktop monitors, to tablets and small smartphones—your pages should specify a viewport using the meta viewport tag‘.
The ‘meta viewport’ tag should go on the head section of your page’s code:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
For more information on these errors: https://support.google.com/webmasters/answer/9063469?hl=en
Testing for Mobile Friendliness
You can run a Google Mobile Test to test how easily a visitor can use your page on a mobile device which will often reports your site as mobile friendly even if Google has been notifying you of the errors above – https://search.google.com/test/mobile-friendly
You may need to look at your mobile usability report in Search Console to find out more and to pinpoint on which pages there are errors and if they are consistent over time.
Sometimes these errors come and go suggesting Google’s crawler is not always assessing pages consistently or correctly, and indeed one. Personally, I find Google’s reporting on these errors rather erratic, and am not alone in this – see this Local Search Forum post for example.
In addition, John Mueller, Senior Google Webmaster Trends Analyst, recently said:
‘one of the things that sometimes happens is we need to be able to fetch the CSS files for these pages as well so that we can see what they look like. And sometimes we either don’t have enough time to do that for your pages, or your server is a bit slow, and we don’t have enough capacity to get that very quickly. And then the test might fail. So if we can’t get the CSS, then it might look like the page isn’t really mobile-friendly. And usually this is something that settles down over time and maybe you’ll see individual pages that fall into the state. But in general, that’s something I wouldn’t really worry about. If the page is really mobile-friendly, if for the most part other pages on your website are seen as mobile-friendly, then that would generally be fine. It might fluctuate a little bit. You might see that as a warning in Search Console but I wouldn’t worry too much about it if you’re really sure that everything else is lined up properly.’ (https://www.mariehaynes.com/december-14-2018-google-help-hangout-notes/)
In conclusion, it’s probably best to try to fix these errors if they are occurring consistently and over time but there may be no need to worry too much if your site passes the Google mobile friendly test.
If you do not know how to fix the errors yourself, ask your developer to help.