How to Fix Mobile Usability Errors

How to Fix Mobile Usability Errors

You are  now living in Google Mobile First Index ranking World, that means the new Google Search Console Mobile Usability Report should not show any errors when you want to see higher Google rankings.

Although #RankYa how to video tutorials are aimed at simplifying Google, WordPress and digital marketing, this particular tutorial on How to Fix Mobile Usability Errors in Google Search Console could be tricky if you are not familiar with Web Development. In all cases, I still tried to enlighten you as best that I can. Furthermore, if your website (or your clients website) is still experiencing issues with Mobile Usability, then, simply comment  on this post and let’s find a solution for you.

Search Console Mobile Usability Errors

Below are errors that can appear in the Mobile Usability report in Google Webmaster Tools (The New Search Console)

Uses incompatible plugins errors

The page includes plugins, such as Flash, that are not supported by most mobile browsers. Google recommends redesigning your page using modern, broadly-supported web technologies, such as HTML5. Read more about web animation guidelines. For most WordPress setups, this won’t show up unless you are using a functionality that uses incompatible plugins.

Viewport not set issues

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. Learn more in Responsive Web Design Basics.

Viewport not set to “device-width” error

Your page defines a fixed-width viewport property, which means that it can’t adjust for different screen sizes. To fix this error, adopt a responsive design for your site’s pages, and set the viewport to match the device’s width and scale accordingly. Read how to correctly Set the Viewport.

Or you could just add this to head portion (located at public_html > wp-content > themes > yourThemeName > header.php (find <head> and place it just after it and save))

<meta name="viewport" content="width=device-width, initial-scale=1">

Content wider than screen errors

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. Read more in Size Content to Viewport.

CSS usually fixes this error img{width:100%;height:auto} or you may need to use display:block for the containing element (usually <div>s)

Text too small to read errors

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. Read more about font size best practices in Use Legible Font Sizes. Depending on your level of knowledge of CSS, you could try your hands in responsive font sizes, if not, at least stay safe with font-size:16px

Clickable elements too close together errors

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. Read more in Size Tap Targets Appropriately. This is where you can use paddings and  margins for the elements Search Console Mobile Usability report is complaining about.

Video Tutorial for How to Fix Mobile Usability Errors in Search Console

Best Practices for Ranking Higher in Google in 2019

Long ago, I’ve advised RankYa fans to prepare for the future of Google rankings by suggesting to just have 1 version of a website that renders well across all devices (desktop, laptop, mobile smart phones, IPads, Iphone and smartphones). This is still the best option to consider.

If you are lucky to be using WordPress as Content Management System, then, you do not need to hire Web Developers, instead go to Google and search for premium WordPress Themes and just change your WordPress theme to be using one of the latest mobile ready and mobile responsive themes (RankYa recommends Jupiter Theme). Got any questions?

Author: RankYa

Online Entrepreneur, Qualified Web Developer, Google AdWords and Google Analytics Professional. Specialist in: Google SEO, Website Optimization, WordPress, Structured Data, JSON-LD, Microdata, Microformats, RDF, Schema.org Vocabulary, HTML5, Advanced Image Optimization, Google Search Console, Google Webmaster Guidelines, Social Media Marketing, Facebook marketing and YouTube video ranking.

Thank you for sharing this blog post. Description: 'How to Fix Mobile Usability Errors in Google Search Console is detailed, to learn how to get rid of errors for Mobile Usability of a WordPress website'