3 Mobile UX Reports for Perfect Mobile Friendliness

Contents

• Background

• Ryte Reports

• Missing viewport tag

• Overlapping tap targets

• Illegible text

• Troubleshooting and tips

Background

Mobile friendliness is essential for providing a great user experience, so it’s an unavoidable topic for marketers and website owners! In the USA, 94% of people with smartphones search for local information on their phones. 77% of mobile searches occur at home or workplaces where you would expect a desktop to be. 49% of people browse the web on mobile devices (source). The increasing use of mobile devices means it’s even more important for businesses to optimize their websites for mobile devices - this leads to happier users, better retention rates and higher conversion rates.

What’s more, Google’s mobile index (March 2021) and Search Signals for Page Experience (May 2021) means that mobile-friendliness is not just about user experience. Improving and ensuring a mobile-friendly website will help you take on the challenges of the Google Updates - so you get ahead of the competition as your rankings soar in May.

The Mobile index means that from March, Google will only be indexing the mobile versions of websites. Search signals for page experience includes factors such as Mobile Friendly, Core Web Vitals, Safe browsing, and HTTPS. Having a mobile-friendly website is therefore vital for achieving great rankings from May 2021.

The Ryte Reports

The new reports, "Missing Viewport Tag", "Overlapping tap targets", and "Illegible text" show issues that make your website difficult to use on mobile devices because the content is too small to read or that touch elements are too close together. The reports are available in Website Success under the menu point "Mobile". To see data in the reports, you must start a new mobile crawl. The reports use data from Lighthouse, Google’s open-source tool for website audits.

• Use standardised data: ensure that your fixes will have an impact as the report uses real Google data from Lighthouse – Google’s open source tool for website audits – meaning only issues are flagged that Google also sees as issues so you don’t get lost in a sea of data

• Know what to fix first: Find high-priority pages to fix first by sorting & filtering the data with advanced filters, including Google Analytics data.

• Get the know-how you need to fix the issues: The reports come with a detailed explanation of how to fix the issues to give you the know-how you need to fix them yourself, or enable you to easily pass the information on to a developer.

The URLs in the reports are sorted according to OPR (number of internal links a page has), but you can also sort or filter according to Google Analytics data to more easily identify your high-priority pages.

Missing viewport tag

This report shows pages with a missing or incorrectly set-up viewport tag. With a missing viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them very difficult for users to read. Incorrect viewport tags can lead to problems like the content being too wide for the screen, meaning that users have to scroll horizontally to read all the content.

To make sure that every page has a viewport tag that is set up correctly, you just need to add <meta name="viewport" content="width=device-width, initial-scale=1"> to the header area of every page. If you don’t have access to edit your page’s , reach out to your developer and communicate the importance of this issue’s fix.

Figure 1: Missing Viewport Tag Report

Overlapping tap targets

Tap targets are the areas of a web page that users on touch devices can interact with such as buttons, links, and form elements. It’s important to ensure that tap targets are big enough and far enough apart from each other for a user-friendly and accessible website.

This report shows you on which pages of your website tap targets are too close together. These pages have targets that are smaller than 48 px by 48 px or closer than 8 px apart. You can fix tap targets by increasing the padding property to 48dp minimum touch target size, and increasing the spacing between tap targets that are too close together using properties like margin to ensure there should be at least 8 px between tap targets.

If tap targets are too close together because of a missing viewport configuration, you or your developer just need to add <meta name="viewport" content="width=device-width, initial-scale=1"> to the header area of every page.

If you are not able to change padding properties via a CMS, download the list of URLs and pass them on to your developer.

Figure 2: Overlapping tap targets

Illegible text

The Illegible text report shows pages where 40% of the text has a font size smaller than 12px, which is too small to read on mobile devices. Font sizes smaller than 12px may require users to zoom in to display text at a comfortable reading size which has a negative impact on the usability of your mobile website.

You can fix this issue by checking your font sizes in your CSS. Aim to have a font size of at least 12 px on at least 60% of the text on your page. If you’re not able to change font sizes, download the list of URLs and pass them on to your developer.

In the table view, the selector/paragraph is highlighted where the text is too small so you can easily pinpoint the problem.

Figure 3: Illegible text report

Troubleshooting and tips

If you don’t see data in the report, make sure you have an updated crawl and make sure you are using the mobile crawl!
We recommend starting with the "Missing viewport tag" report first. The reports "overlapping tap targets" and "illegible text" will always show URLs that don’t have a viewport tag, because this will automatically cause problems with touch elements being too close together and content too small to read.

Figure 4: Benefits