Overview

The Mobile Usability report shows which pages on your website have issues that represent non-responsive websites when viewed on mobile devices. As mobile usability is an important factor that affects the search engine rankings of your website, you should
generate Google mobile usability reports to identify the issues and ensure the best performance for your mobile users. Google gives a lot of preference to mobile-friendly sites and hence, you should make sure optimal mobile experience by conducting a
mobile usability test.  The Google Search Console report will show a list of errors and on which pages, with the page links. 

Most of the websites have been noticing that traffic from mobile devices increases day by day. Hence, you need to ensure a smooth user experiencefor your audience. Mobile usability tests are a must to provide a memorable experience to the users. 

Types Of Errors:

The following types of errors can appear in the Mobile Usability report:

1. Viewport not set
2. Viewport not set to “device-width”
3. Content wider than screen
4. Uses incompatible plugins
5. Text too small to read
6. Clickable elements too close together

1. Viewport not set

“Viewport not set” is a meta tag error. The viewport performs an important role in the responsiveness of websites. The 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 users of your website use different types of devices with differant screen sizes. from large devices to small smartphones your pages should specify a viewport using the meta viewport tag.

How to fix: The website should include a viewport meta tag in the header.

<meta>: This tag contains instructions for the browser for scaling the dimensions of the page.

width=device-width: This part of the tag sets the page width of the viewport to the width of the device.

initial-scale=1: This part of the viewport tag sets the initial zoom level as 1 when the visitors visit the page.

2. Viewport not set to “device-width”

The page defines a fixed-width viewport property, which means that it can’t adjust for different screen sizes.

Viewport not set to “device-width” error is generated when the header contains the viewport tag without the width=device-width and initial-scale=1.0 part. Without this part makes the viewport non-responsive to other devices.

How to fix: 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. 

3. Content wider than screen

“Content wider than screen” is a CSS error. Horizontal scrolling is necessary to see words and images on the page. This happens when pages use absolute values in CSS declarations.

How to fix: 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.

4. Uses incompatible plugins

The page includes plugins such as Flash that are incompatible for viewing on mobile browsers.

How to fix: We recommend designing your page using modern, broadly-supported web technologies, such as CSS3, HTML5. Plugins that are not mobile-friendly should be uninstalled.

5. Text too small to read

“Text too small to read” is a CSS error. Users often find it difficult to read the text of a website on mobile browsing because of small font sizes. After specifying a viewport for your web pages, set your font sizes to scale properly within the
viewport.

How to fix: If you find the font size to be smaller. We recommend a minimum body font size of 16px.

6. Clickable elements too close together

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 neighbouring element. This degrades the user experience and the user bounces
back from your site.

This issue is returned if your visitors are having trouble clicking on different elements on your site using their mobile devices.

How to fix: To fix these errors, make sure to click an element without your fingertip overlapping a neighbouring clickable element. The touch target size should be around 48px.