How To Fix Mobile Usability Issues In Wordpress

It'due south not news to say that Google is pushing heavily towards a mobile net. They've seen the writing on the wall. Over 50% of web usage takes place on mobile devices now, with the number actually closer to 60% these days. If yous don't have a mobile-accessible website, yous're in for a globe of penalties.

Of course, there's more to mobile success than just mobile compatibility. That's why Google has a Mobile Usability Report. You can run this written report on your website, and it volition give you lot a rundown of whatever errors, issues, or bugs you need to piece of work out to make your site the best information technology tin can be.

A lot of what I'll be referencing today comes from either this Google assist centre folio or the mobile usability report itself. To access the mobile usability report, yous need to have your website added to the Google Search Panel. Once that's prepare, you can view your report hither.

Two Step Process

At that place is actually something of a two-pace process involved with mobile compatibility.

At the top level you have the mobile usability report I linked to a higher place. This is a top-level browse of your entire site. It volition produce a report with up to 1,000 rows of data in a spreadsheet. Every page, upwardly to 1,000, on your website, will exist labeled as either Valid or Fault.

Errors on Usability Report

An Error folio means that your folio has some kind of mobile usability mistake on information technology. In the summary page that shows errors and the number of pages that take them, the page will exist listed likewise.

A Valid page does non mean the page is perfect! A Valid page is a page that does not take whatever of the top-level serious errors Google checks for. It may still have modest errors, though, so you can run the second step of the process as well.

Basically, the Usability test volition ignore pages that have issues, so long as those pages are at least minimally usable to certain thresholds. If the page drops depression plenty to be considered Fault, all of its errors will bear witness up.

The second stride of the process is the Google Mobile Friendly Exam Tool. You tin can detect that tool here. This tool performs a test on a specific URL, then it volition not browse an entire website or domain, but you can use information technology to verify that sample pages on your site are mobile friendly and free of errors.

Is Your Page Mobile Friendly

Basically, you desire to use the Mobile Usability test to check to brand sure your site is functional and meets basic minimum usability standards for mobile users. In one case you take diagnosed and stock-still any errors present in this examination, you can run the Mobile Friendly exam tool to spot-check dissimilar types of pages, similar landing pages, blog mail pages, category pages, then on, to make sure they are gratuitous of smaller errors.

General Tips

Google has a few full general tips, and I accept a few more than, for whatever mobile problems that come up.

First, start with a prioritization pass. Google volition sort out the errors on your site based on their occurrence rate. The more frequent an error is, the higher on the listing it will be. Tackle the virtually common bug first, to become the largest crash-land in your site validity.

Don't get overwhelmed or discouraged by large numbers! If your website has 500 pages on it and all of them have ane common error, Google will tell you your site has 500 errors on it, which tin can be disheartening. Still, fixing that ane consequence clears upwardly everything, so it'due south not that difficult.

Issues of Mobile Usability

Recollect that your data is limited. The error reports can only go up to 1,000 rows, so if you lot have a website with, say, 1,500 pages, and 1,200 of them have an error, information technology will only show one,000 errors. You will need to prepare issues and then re-run the test to brand sure you caught them all.

Don't be afraid to do further research. Each error will have a "learn more" link that will bring you to a Google help center page describing the error, the causes, and common means y'all can gear up it. While this might not be 100% accurate to your configuration, you can easily look upward more relevant information. Since nosotros're talking about WordPress today, you can bet there will be a ton of available documentation since it'south such a widely used platform.

Sometimes your report will show a sudden fasten in the number of pages considered to have Errors. Even if you didn't make a alter to your site at all, this can still happen. The reason is typically Google adding a new error to their checklist. Recall of it this way: If Google has a x-signal checklist and y'all laissez passer all 10, just they add together an 11^th that you lot don't pass, you'll see a spike in errors despite not changing anything.

Yes, Google moving the goalposts sucks, but information technology's something you lot have to go used to if you want to run a successful website. Google has been constantly irresolute and updating their standards for years, and some of them are much more major changes than a new mobile error they want webmasters to fix. Remember Panda, anyone?

Errors, Causes, and Solutions

So what kind of errors can you come across with the mobile usability exam? Here are the current errors that can crop up. Like I just said, though, Google tin add a new error at whatsoever fourth dimension. If that happens, feel free to tell me in the comments and I tin practice a little research for y'all.

Uses Incompatible Plugins. This error ways that your page uses a plugin that is deemed incompatible with mobile web usage. This generally means Adobe Wink, which is end of life as of 2020, but it can too include other multimedia plugins like Silverlight likewise. Google recommends fixing this by either removing any plugin-based content you're using, restricting it to a desktop version, or recreating it entirely within HTML5.

Plugin Not Tested

It'due south worth noting hither that even if yous brand your Flash content desktop-just, yous're going to have issues with it. Every modern spider web browser puts up a warning earlier loading Flash content, so the majority if your viewers will neglect to activate information technology.

Viewport Not Fix. This is an error with sizing for your mobile version of your website. The Viewport aspect tells the web browser how to scale the content within the folio.

Setting the Viewport is a core tenet of responsive web design. In the past, y'all could become away with very basic mobile websites on an thou. subdomain, or employ adaptive pattern with a few stock-still size designs, but these are no longer good options. In that location are then many different devices out in that location with so many different available screen sizes that it's impossible to create variations for every option.

Viewport Meta Tag

Setting the viewport is done in the meta tags. Y'all demand a width ready to the device width, and a scale setting to make up one's mind how to scale content within the site. Note that this isn't something you tin just slap into your code and expect it to work flawlessly; yous may need to talk to a programmer to get a responsive version of your pattern going. You lot can read more most the Viewport and its settings here.

An additional Viewport error is Viewport Not Fix To Device-Width, which only means yous have something other than the device width dynamic setting for your viewport. Over again, this might happen in stock-still or adaptive designs and is no longer feasible for modernistic web usage.

Content Wider Than Screen. This is an error that indicates whatsoever mobile device is browsing your site has to roll horizontally to see all of your content. This is, of course, bad design, because phones are very much not designed for piece of cake horizontal scrolling and information technology makes reading very tedious. You lot have to scroll back and along repeatedly for every line y'all want to read, and content that stretches wider than the screen – similar images – can't be taken in equally a whole.

By and large, this mistake occurs when you're setting fixed widths for content or fixed pixel positions for items via your CSS. For instance, if you take an paradigm you desire to display and y'all take information technology fix to start 500 px to the right of the left-hand side, that might await fine on your monitor in the part, but on a telephone it simply shoves that content off to the side.

The fix for this is all in the conversion to a responsive design, but it basically just ways to remove whatsoever absolute positioning lawmaking and replace it with dynamic or referential positioning. Of grade, responsive design is more than complex than that, so I highly recommend hiring a developer or looking into information technology yourself.

Text Too Small

Text Too Small To Read. This error is pretty cocky-explanatory. If you've browed the web on a mobile device, you've probably encountered an one-time-school site running with some good old-fashioned 12 point Times New Roman text, and on a mobile device, that means you need to zoom in to encounter it and read it. Being forced to zoom in also forces y'all to accept to coil side to side, bringing up the same problem as the previous error.

Manifestly, the solution to this is not just "make your font bigger." Instead, it'due south going to exist adding dynamic code to scale the font size for the device you're using.

Google's standards for what constitutes an appropriate font size are well-nigh seventy-80 characters per line, which works out to be around 8-10 words of English. Google doesn't expect you to go through and add a line interruption every 80 characters, that'southward only the sort of goal y'all want for the scale of the text. Google, of course, has farther reading on this here.

Clickable Elements Too Close Together. This is the final error in the Usability Written report and, every bit you can see with the previous selection, is another attribute of having a site that needs zooming and scrolling to navigate.

Basically, users hate when there are two links or buttons too close to each other so you tin can "fatty-finger" the wrong one. Only virtually anybody has experienced this in some form or another. At the aforementioned time, it was used aggressively past shady scammers, who would put an chemical element they want y'all to click next to an element you want to click, relying on accidental clicks to do things like tag people with Amazon affiliate cookies and so on.

This is plain bad for mobile usability. Information technology makes users unhappy, it makes people use the mobile web less, and so Google is essentially penalizing it with this error. Just brand sure anything that is clickable or tappable is appropriately distinct and non too close to anything else.

WordPress Errors

All of the above can exist bug with WordPress, but WordPress can come up with a few other specific errors that cause those related bug. For example, if Google is indexing your wp-content/uploads folder, it will see content that triggers these errors, fifty-fifty though information technology's not content y'all really care about. This back up thread goes over this outcome, though the solution is "this folder isn't necessary for your users to see so deindex information technology." This post tells yous which folders you should cake in your robots.txt file to prevent Google from indexing them.

Everything else is just a matter of making certain none of your plugins are causing major issues, keeping your site upward to engagement, and addressing errors as you detect them. Once you have a responsive design, well-nigh of those problems should be gone.

Drew Hendricks is the CMO of Blogpros and a contributing writer to Inc., Entrepreneur and Success.