Why websites have to be responsive and Mobile ready understanding google pagespeed results.
Website traffic from mobile devices is on the rise, and studies show that mobile visitors are more likely to revisit mobile-friendly sites. The mobile usability report identifies pages on your site with usability problems for visitors on mobile devices.
Mobile usability issues detected over time on your site.
- The initial screen shows a count of pages exhibiting specific errors, grouped by type.
- Click on an error type to see a list of pages affected by the chosen error.
- Click on a page URL to get a list of instructions on how to fix the error.
Errors on mobile devices
The following errors can appear in the Mobile-usability report:
Flash usage is not rendered(play/show)
Mobile browsers do not render Flash-based content. Therefore, mobile visitors will not be able to use a page that relies on Flash in order to display content, animations, or navigation. We recommend designing your look and feel and page animations using modern web technologies. Read more about Look and Feel in our Web Fundamentals guide.
Viewport not configured
Because visitors to your site use a variety of devices with varying screen sizes—from large desktop monitors, to tablets and smartphones—your pages should specify a viewport using the meta viewport tag. This tag tells browsers how to adjust the page’s dimension and scaling to suit the device.
Fixed-width viewport
This report shows those pages with a viewport set to a fixed width. Some web developers define the viewport to a fixed pixel size in order to adjust a non-responsive page to suit common mobile 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.
Content not sized to viewport
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.
Small font size
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.
Touch elements too close
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.