What they mean and how to fix them.
If you have a Google Search Console account linked to your website (as you should), you might be familiar with the occasional “New Mobile Usability Issues Detected for ‘Your Site’” email from Google Search Console. Unfortunately, upon first glance, Google doesn’t seem to give a whole lot of information or even instructions for what exactly is the issue and how to fix it. However, once you do a little digging you can find out exactly what’s causing the alert and whether it’s something that you should look at closer or ignore and wait.
So that’s what we’re looking at today!
How to find out what pages are triggering the alerts
Here’s how you can find out what pages are causing the issues, so that you can fix them if necessary.
Step 1: Click on the big blue button that says “Fix Mobile Usability Issues”
Step 2: You’ll log into your Search Console account and see a graph with red bars showing the errors. Hover over an error from the list and click on it to see the pages that are triggering that error.
Step 3: Once you click on the error message you’ll get a list of URLs that are triggering the alert. At this point, you’ll want to click on each URL to pull up your website and see if there are any obvious issues. We recommend pulling up your website on your phone so you can actually see the mobile view and test it that way.
Step 4: Once you’ve identified the issue and fixed it, click on the ‘Validate Fix"‘ button for each of the errors. This will prompt Search Console to run a quick initial check to verify that the issues have been addressed. Eventually Search Console will run a full scan and send you an email letting you know whether the issues were successfully fixed or not.
Most common types of Mobile Usability issues
Depending on your website, there can be a range of issues that trigger these alerts, but there are four that are the most common. Let’s unpack them.
Content is wider than the screen
This basically means that one or multiple pages on your website have elements that are wider than a mobile screen, therefore needing horizontal scrolling to view the full content. This is not good because it takes away from user experience and can cause the web visitor to miss important content that might be outside the margins of their screen…. or simple cause them to be annoyed that they have to scroll side to side, which is a fair point!
The culprit is usually an image, video, or other element that has a fixed width. To fix this error, make sure that all your elements have relative widths and can scale to fit the different screen sizes, and that you use viewport meta tags properly (more on that in a bit).
Text too small to read
This one is pretty self-explanatory. Google thinks that the font in the page(s) in question is too small and hard to read in small mobile screens, therefore forcing people to "pinch to zoom” to read your content.
There are a couple ways that you can fix this. One of them is to set your font sizes to scale properly within the viewport (again, more about viewports in a bit!), and the other is to simply use a big enough font throughout your site that also applies to mobile. Google recommends using a font that is at least 16 px throughout your website, so not only within the body of the text, but also for your navigation, footer, buttons, etc.
Clickable elements too close together
Our fingertips are not as precise as mouse pointers, and Google knows it. This error message comes up when buttons, links, navigation items, or any clickable elements are so close to each other, so that it would be easy for someone wanting to tap one of them to tap the other accidentally.
This is an easy fix. You just have to make sure to separate your clickable elements enough so that you give fingertips plenty of space to zero-in on their target without tapping everything around them too. It is recommended that you make your buttons’ height/width at least 48px and keep your other clickable elements at least 32px from each other.
Viewport not set
Viewport settings and meta tags determine the width of a page for the screen size of the device it’s viewed on. What happens when this is not configured properly? The dreaded “pinch to zoom” and along with it, the Search Console mobile issue message.
You will get this notification from Google 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‘.
There’s a lot to understand here, but basically you have to make sure to have a ‘meta viewport” tag like the one below in the header section of your page’s code:
<meta name="viewport" content="width=device-width, initial-scale=1">You can learn more about viewports and how to ensure that your website renders properly on mobile here: https://web.dev/responsive-web-design-basics.
Oh, and in case you’re wondering, we build all of our website with fully responsive design in mind precisely to avoid issues like these.
What if you can’t see the problem?
Even Google goofs up once in a while. If you go to Search Console, click on the link that’s triggering the problem, check your site for mobile issues, and still can’t find anything, then something might have happened during Google’s scan of your site that didn’t allow it to see your page as it is seen by others.
The most likely theory is that sometimes a page hasn’t fully rendered (loaded) before Google is done crawling it, so all the styling might not be in place when Google is assessing your site, which is why it thinks that there are broken elements.
If you can’t find a problem, go ahead and ‘validate the fix’ anyway. Chances are that when Google rescans the site it’ll realize that there was no error.
How to test for mobile-friendliness
In 2021 it should be no surprise that most people access the internet from their phone or tablet more often than from a desktop computer. Because of this, a few years ago Google started implementing “mobile first” measures to push websites to improve the quality of their sites when seen on a mobile device. We firmly believe that a responsive design, meaning a website design that works well within any screen size, is a must-have. In fact, we build ALL of our websites that way.
If you have an older website or aren’t sure whether your site has been completely optimized for different screen sizes, you can use Google’s own testing tool to find out if your size is mobile-friendly. Just click here and enter your website’s URL.
Final Thoughts
A website that works well on mobile phones and tablets is so important! If your site is not mobile-friendly and you would like to change that, send us a message and let’s chat.
Mobile-friendliness is a big part of SEO (Search Engine Optimization) and can affect negatively your chances of ranking high in Google search results for your products or services. So let’s change that!