This article explains how and why to fix mobile usability issues on your website. The why is simple, google will penalize your website if you don’t.
You could have content that’s amazing – sparkling text, comprehensively researched, stunning images and well formatted text. Unfortunately, if you haven’t optimized for mobile devices, you ranking position could be much lower than you expected.
Prioritise finding and fixing mobile usability issues before writing more content. I’ll explain how in a second…
Table of Contents
Why do you need a mobile website for your business?
Everyone uses mobile phones today, you see people on mobile devices all the time. Wherever you go, walking, waiting for the lift, public transport even behind the wheel of a car!
Mobile devices are the main way people access the internet. That’s why Google uses the mobile version of your page for ranking and indexing purposes.
54%
of all website traffic worldwide is from mobile devices
Source: Blogging Statistics 2023
When people want information on a product or service or want to research a topic the first place they go is the internet – and specifically Google.
If your website is not showing up for relevant queries from potential customers you are losing business.
Having a mobile friendly website will improve your ranking position with Google and other search engines.
Reasons your website doesn’t work on mobile devices
Not getting the organic traffic to your site you expected? It could be your site just doesn’t work on mobile devices properly.
Common issues found on non-mobile friendly websites
Large Popups
Text too small
Images too large
Site too slow
Buttons/links too close to each other
You need to find and fix all these issues to improve your rankings. The next section we will get into how to solve these problems.
Okay, my page is not mobile friendly. What should I do?
The good news is fixing your mobile issues isn’t difficult. The first thing you need to do is test your website using the Google mobile usability test. This will provide a report on mobile issues found on your website.
You need to test not only the home page but specific article pages to find all the mobile issues you have. More on how to do a comprehensive check of your website later.
Take the Google mobile usability test
Take the test here: https://search.google.com/test/mobile-friendly
If the page doesn’t have any mobile issues you will see this result below:
Only one page is tested, it’s possible you could have mobile issues on other pages even if you get the all clear from this test. Let me explain the possible errors you will get from the report.
Error #1: Uses incompatible plugins
Some technologies are old fashioned and not used in modern web browsers. A common technology that is incompatible with mobile devices is Flash. It should not be used on your website. If you need to animate parts of your website there are modern ways that are supported by mobile web browsers.
→ Use a modern, responsive, mobile friendly theme for your website
This site uses GeneratePress, read my review here: GeneratePress review: Fast WordPress theme in free and premium versions
Error #2: Content wider than screen
This error occurs when the user has to horizontally scroll to see your content. This provides a poor user experience and quickly becomes annoying to users.
Read more about size content from Google here: https://web.dev/responsive-web-design-basics/#size-content
→ Avoid using fixed width and position values on your page. Ensure images can scale to page size.
Error #3: Text too small to read
The font size on your website is too small to easily read. This will causes visitors to squint or have difficulty reading your content. Many users will abandon your page than try to continue reading.
You need to set a minimum font size across your website.
My website had this error. I fixed it by setting a minimum size of 16px for all elements.
→ Set minimum font size on all elements to 16px
Error #4: Clickable elements too close together
I also got this error for my website, specifically the social media sharing buttons were too close together.
The solution to this error is to add padding to all blocks that have clickable elements. Typically this will be navigation bars, footer links, sharing buttons etc.
You may need to make several adjustments and keep retesting to fix this completely (I know I did).
→ Add padding to clickable elements (navigation links, sharing button etc)
Error #5: Viewport not set
The page tested does not contain a viewport property that tells browsers how to scale a page for the screen size of the device.
This problem is caused by your theme. Most modern themes should set this property for your automatically. You should not need to set this property manually.
→ Change your theme – all popular themes will be mobile friendly by design
Error: Viewport not set to “device-width”
Similar to previous error. Again this problem will not occur with a modern mobile friendly theme. As above the fix is to change your theme.
Bing mobile friendly test
Check your page is mobile friendly according to Bing, important for ranking well in the Bing search engine:
https://www.bing.com/webmaster/tools/mobile-friendliness
Monitor mobile usability using Google Search Console
Use Google Search Console to monitor your mobile usability for free. From the left hand sidebar there is a Mobile Usability link. This page has two panels. The first panel shows the number of usable and not usable pages on mobile devices:
It’s very important when Google indicates that one or more pages are not usable that you find the issues and fix them. Mobile usability is a ranking factor and you will very likely see a drop in your ranking position until you have fixed and verified the issue.
As you can see from the image about I had mobile issues, once I fixed the issues I immediately verified the fix using Google Search Console again.
The second panel shows what mobile issues you have on your site. You can click on the issues to see exactly what pages have each issue.
Once you have fixed the issue on your website verify the fix on Google Search Console.
If you have pending issues you will see each web page on your website with this issue listed. You can click on the “VALIDATE FIX” button. Google will then schedule a re-test of that page to verify you have fixed the issue.
You can click on “SEE DETAILS” button to see the status of any pages Google found issue with. The details page is shown below:
From the other tabs you can see PASSED, FAILED and OTHER.
It’s good to keep monitoring Google Search Console to ensure all your pages are mobile friendly.
Final Thoughts
What’s the bottom line?
→ Validate all your content for mobile friendliness. Fix any issues you find.
If you found this article helpful, please consider sharing it with your network by using the social media sharing buttons below. Thank you for your support!