How To Fix Mobile Usability Issues in WordPress: 9 Tips

Over half of people browsing the web use mobile devices. If your website is difficult to use via smartphones and tablets, it means you’re turning away lots of visitors.


GIPHY

But don’t worry; making websites responsive and fixing mobile usability issues in WordPress is easier than it seems!

Below, our tutorial explores how to check for WordPress mobile problems and discusses nine common errors you can fix.

What Are Mobile Usability Issues?

Mobile usability issues are problems that make web pages difficult to browse and use on mobile devices – such as smartphones, tablets, and wearable tech.

Common usability issues might include font sizing that’s difficult to read, formatting that’s too wide for smaller screen sizes, and clickable elements (such as links or buttons) that are too close together.

Thankfully, Google’s Lighthouse tool helps you find common mobile usability errors in WordPress. It’s the replacement for Google’s Mobile-Friendly Test tool and mobile checks within the Search Console.

However, be prepared to use other analytics tools alongside it. Google’s great at spotting most mobile usability problems, but not all.

The importance of mobile-friendly websites

As mentioned, web users are moving increasingly toward mobile browsing. Moreover, Google optimizes its search listings with mobile browsers in mind.

This means mobile usability impacts site indexing.

Websites optimized for mobile now receive preferential rankings in Google’s search results, regardless of the device screen viewing them. This means that if your website doesn’t have a mobile version, Google won’t recommend it to mobile users or non-mobile users.

Let mobile usability problems persist, and mobile visitors will simply click off and check out your rivals… if Google helps them find your website in the first place, that is.

How To Check for Mobile Usability Issues in WordPress

First, access your website via a mobile device. Is it easy to navigate and quick to load, and are buttons and links spaced apart enough?

Odds are that you’re familiar with mobile browsing as well, so you should be able to recognize when a website is mobile user-friendly intuitively.

If you’re noticing some problems, it’s time to use some professional tools.

Run Google Lighthouse

Lighthouse is a free tool that helps you manage your site’s SEO and overall performance by analyzing your:

  • Performance
  • Accessibility
  • SEO
  • Best Practices
  • Progressive Web (user experience)

You can run Lighthouse in a Chrome browser via DevTools.

To get started, open up the site you want to analyze in a Chrome browser, click the “three dots” menu to the far right of the window, and hover over “More Tools.”

“Developer Tools” appears in a new column. Select it.

A new panel appears in the same window. Look for the top menu and click the two arrows. Select “Lighthouse” in the list:

Now, click “Analyze page load” and let the program diagnose your site. After around a minute, you should receive a full report on your site:

Click through the different test sections to break down your site’s performance and look for errors.

Specifically, consider how the program scores your site under Progressive Web App or PWA. It’s here where Lighthouse gives you a pass or fail rating on your site’s accessibility.

Here’s an example PWA report where a website loads fast enough for mobile networks, but there are theme configuration issues, and some tappable assets are missing:

Use other performance checkers

Using other performance checkers allows us to fill in any gaps Lighthouse might leave behind.

To start, check out HubSpot’s Website Grader for a second opinion.

Simply enter your website and email, and HubSpot delivers a plain-language report that breaks down your mobile accessibility. The app’s mobile usability test measures essential functions such as your mobile speed, tap targets, and design responsiveness:

We also recommend Bing’s Mobile Friendliness Tool, which is just as easy to read and use:

Finally, you can also use third-party speed checkers to ensure your site loads fast enough for visitors’ demands. We recommend using GTMetrix.

Check out your analytics platform

As dynamic as Lighthouse, Hubspot, and Bing can be, there are a few other mobile usability insights that only in-depth web analytics can pick up on.

For example, you can use analytics software to track:

  • Which devices your visitors use
  • How long they stay on each page
  • Which elements (such as buttons and links) they interact with
  • How many times pages are visited by mobile devices

You could, therefore, find that a specific page has a short average session duration on mobile compared to desktop.

What’s more, there might be fewer button or link clicks compared to other pages. This indicates you need to fix that page for mobile use, e.g., by making content easier to read, including more tappable elements, and testing layout templates with more responsive designs.

If you don’t use analytics, don’t worry; you can always contact a StateWP expert to set up Google Analytics on your site and guide you through further checks!

How To Fix Mobile Usability Issues in WordPress: 9 Errors and Solutions

Below, we take you through nine common mobile usability errors in WordPress and show you how to fix them.

To start, we recommend you back up your website just in case you go wrong. Set up automated WordPress backups, too, if you haven’t already done so.

And remember, if you’d prefer someone to fix mobile usability for you, skip ahead!


GIPHY

How to make a WordPress website mobile friendly in 9 steps

ErrorIn brief
1. Font sizes are too smallVisitors can’t read the text properly, so fix this by increasing font sizes on the page and post editor
2. Tap targets are too small or poorly spacedPeople can’t tap buttons and links properly, so either edit your CSS or install a mobile theme
3. The content is too wideEdit your theme’s CSS to ensure your site has the right width
4. There’s no viewport tagAdjust meta information to ensure Google knows your site’s mobile-friendly
5. Your plugins and media are outdatedUpdate older plugins and other media using outdated technology that slows mobile browsing down
6. Your website is too slowUse Lighthouse’s speed checker and remove unnecessary files to lighten your website’s load
7. The theme is unresponsiveReplace your WordPress theme with an updated alternative in the official library
8. Pop-ups aren’t mobile-friendlyRemove older ads and use a plugin to prevent pop-ups from interfering on mobile
9. Mobile navigation is unclearEnsure your mobile visitors can easily browse by choosing a theme built for smaller screens

1. Font sizes are too small

You’re facing an issue with font sizes if you receive one of these error messages as you test your website:

  • Google Lighthouse → “Font sizes are too small”
  • Google Search Console → “Document doesn’t use legible font sizes”
  • Hubspot Website Grader → a fail score on the “Legible Font Size” test
  • Bing Mobile Friendliness Tool → “Text on page is too small”

They all essentially say the same thing – your fonts are hard to read (under 16 pixels), and you need to increase the default font size across your website!

The quickest way to do this is to edit your pages and posts through the Gutenberg/block or classic editor. Let’s use a quick example in the block editor.

Head to a page you want to edit and click any heading or paragraph block you want to size up.

Select “Styles” from the block panel to the right, or, if it appears, the “Styles” symbol as below:

Now, choose a font size under the “Typography” section. You can choose from four sizes between Small and Extra Large.

We recommend choosing the next size up. Once you’ve made these changes, click “Update” or “Publish.”

If you’re having difficulty in this section, there are a few different ways to edit and change fonts based on the editor you use. Check out WordPress’s guide for more information.

2. Tap targets are too small or poorly spaced

Your tap targets are interactive areas of your mobile website. If they’re too small or poorly spaced, you might receive these errors:

  • Google Lighthouse → “Tap targets are not sized appropriately.”
  • Google Search Console → “Tap targets are not sized appropriately.”
  • Hubspot Website Grader → a fail score on the “Tap Targets” test
  • Bing Mobile Friendliness Tool → “Links and tap targets are too close/small.”

The best way to fix this is to use a third-party website editor or edit your CSS (cascading style sheets).

Alternatively, it’s worth installing a WordPress theme designed for mobile use. Use the themes search engine and gallery from your dashboard:

Most WordPress library themes offer mobile optimization as standard:

Find a theme that suits your needs, and click “Activate.”

3. The content is too wide

Poorly-formatted content is hard to scroll on mobile, which brings up the following errors:

  • Google Lighthouse → “Content is not sized correctly for the viewport.”
  • Google Search Console → “Content wider than the screen.”
  • Bing Mobile Friendliness Tool → “Page content does not fit device width.”

Mobile devices have “viewports,” or viewing windows. Your content needs to fit that window!

The main culprit for this web design error is images. It’s frequently fixed by editing your CSS or using a mobile-friendly theme.

So, let’s add some code to your CSS. If you’re using a version of WordPress with a site editor, head to “Editor” under “Appearance” in your dashboard.

Then, click “Styles.” If there’s a “pencil” icon, click it to open the options menu. Alternatively, click the “three dots” icon next to “Styles,” and then “Additional CSS.”

You should see a text box. In here, paste the following:

@media only screen and (max-width: 600px) {

img {
Width: 100%;
}

}

 

This line of code forces images to stick within viewport boundaries. Once edited, click “Save.”

You can also access CSS in older versions of WordPress through “Appearance,” “Customize,” and “Additional CSS” on your dashboard. The following screen and text editor appears:

Then, paste in the text from above and “Save Changes.”

4. There’s no viewport tag

Even if your site loads as expected on mobile devices, you must include a line of code for viewports in your pages’ meta-tagging, or you receive the following errors:

  • Google Lighthouse → “Does not have a tag with width or initial-scale.”
  • Google Search Console → “Viewport not set.”
  • Bing Mobile Friendliness Tool → “Viewport not configured correctly.”

In your theme’s header, in the meta tag, you need to include the following:

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

 

Editing your theme and meta information is risky. But rest easy because modern WordPress themes include the meta as standard.

However, given the intricate nature of editing theme meta tags, we encourage you to contact a WordPress developer if you’re facing this issue.

5. Your plugins and media are outdated

You only really trigger this error if you’re using older web technology, such as Flash, which modern browsers no longer support (on any devices).

The error used to appear as:

  • Google Search Console → “Uses incompatible plugins and media.”

The easiest way to rule out this problem is to update all your plugins and install those that run on modern technologies such as HTML5.

Head to the “Updates” section at the top-left of your WordPress dashboard, and check the “Plugins” section for any new versions to install.

6. Your website is too slow

Mobile users want clear information and fast. If your site takes more than five seconds to load, you’re likely to lose interest. You might get the following error:

  • Google Lighthouse → “Page load is not fast enough on mobile networks.”

It’s also a good idea to check your website’s speed using sites such as GTMetrix, as mentioned earlier.

There are many ways to improve your mobile site speed, explored in detail via our complete guide to boosting WordPress website speeds.

However, here’s a quick cheat sheet with a few fixes:

  • Use lightweight, less image-heavy themes and styles
  • Keep your website updated
  • Reduce image sizes and host videos off-site
  • Remove unnecessary plugins
  • Use caching plugins to reduce server pressure

7. The theme is unresponsive

An outdated or unresponsive theme is an issue if you receive these errors:

  • Hubspot Website Grader → a fail score on the “Responsive” test
  • Bing Mobile Friendliness Tool → “Viewport not configured correctly” and “Zoom control is restricted.”

Most themes developed and available for download through WordPress are mobile responsive by default:

Switch your theme to one recently updated or uploaded within the WordPress library, accessible through “Appearance” and “Themes” in your dashboard.

8. Pop-ups aren’t mobile-friendly

It’s worth checking if you’re using a plugin that uses intrusive non-mobile pop-ups. This is easy to check by accessing your website from a mobile device and browser. It’s not commonly reported by mobile usability reports, but it’s still frustrating for mobile users.

We recommend you use a pop-up plugin built with mobile in mind, such as Popup Box, available through WordPress.

This plugin helps you create custom pop-up ads for various marketing needs across different devices.

9. Mobile navigation is unclear

The best way to test your website’s navigation is to take it for a test drive. Are menus easy to spot? Do you have to pinch and zoom or scroll horizontally?

It’s an issue if this error appears:

  • Hubspot Website Grader → a fail score on the “Responsive” test
  • Bing Mobile Friendliness Tool → “Zoom control is restricted.”

You might also find your navigation is unclear, say, if your WordPress sidebar disappears on mobile.

The good news is that responsive WordPress themes can solve many navigation issues.

On the other hand, you might have errors relating to incompatible plugins, for example, that prevent your layout from appearing properly.

Again, choose a WordPress mobile-friendly theme, update your site’s software, and check it on a mobile device.

How To Make WordPress Websites Mobile Friendly: The Easier Way

We know that many website owners don’t feel confident or are too busy to troubleshoot WordPress. Thankfully, hiring a WordPress developer to help means you can skip all the checks in this list and still rest assured that your WordPress issues are fixed promptly.

We suggest you check out our plans to get an idea of what peace of mind looks like.

If you become a StateWP partner, you can use our Proto dashboard as your one-program solution to monitor all WordPress vitals.

What’s more, if we don’t catch the error first, you can raise service requests, such as asking for help with improving mobile compatibility, through the same program.

Proto the portal screenshot showing customer submitting request

Make WordPress Mobile Friendly and Keep Your Customers On-Site

Learning how to fix mobile usability issues in WordPress means visitors don’t have to worry about awkwardly scrolling around or getting frustrated.

However, if you don’t feel like fixing mobile issues yourself, know that it’s quick and easy to receive 24/7 support through Proto.

Our team of WordPress experts is on hand to keep your website appealing and functional for people using any device. It all starts (and ends) with a quick message – so feel free to contact us to book a live demo!

Now you know how to make a WordPress website mobile-friendly, why not consider partnering with a WordPress maintenance service?

WordPress Mobile Optimization FAQs

Let’s finish with some queries about WordPress mobile optimization.

How do I fix mobile usability errors?

To start fixing mobile usability errors in WordPress:

  1. Use a theme that’s mobile-friendly and responsive
  2. Ensure your pop-ups are viewable on mobile
  3. Check your website via Google Lighthouse
  4. Check your site’s speed and reduce memory pressure
  5. Update and use plugins with the latest technology

Consult our guide above for a nine-step breakdown of how to optimize your WordPress site effectively.

Why is my WordPress website not mobile-friendly?

Your WordPress website might not be mobile-friendly if font sizes are too small, if pages are slow to load, if users have to scroll horizontally, or if it’s difficult to find menus and links through your website.

For more details, our guide runs through the most common reasons for websites flagging up mobile usability checkers.

How do I optimize WordPress for mobile?

Start optimizing your WordPress website for mobile by:

  1. Using up-to-date plugins
  2. Running a mobile-friendly theme
  3. Simplifying your website’s visuals
  4. Boosting your website’s speed
  5. Making sure your web content is the same on mobile and desktop
  6. Using page elements that are easy to navigate and tap

This is just a brief overview, so read more in our guide.

Are WordPress sites automatically mobile-friendly?

No, WordPress sites aren’t automatically optimized for mobile browsing. Therefore, double-check if you’re using a mobile-friendly theme, that your content’s the same for mobile and desktop modes, and that you boost your site’s loading speeds. Visit your website on your own mobile devices to check its performance while adjusting.

x