Call us today for more information: 877-840-2640

Mobile Usability Errors in Google Webmaster Tools

By Peter Ehat on April 27th, 2015

Have you started seeing any of the following errors appear in Google Webmaster Tools under the Mobile Usability report?

  • Flash usage
  • Viewport not configured
  • Fixed-width viewport
  • Content not sized to viewport
  • Small font size
  • Touch elements too close

Mobile usability errors google webmaster tools

There are a number of things that could be causing these errors on your site. I’ll address each of these problems one at a time, and suggest simple ways to fix each.

Don’t want to do it yourself?

We know fixing code on your website can be a pain. We’d love to talk to you about ways we can help. Click the link below to reach out to us—we would love to hear from you!

Contact us now!

1. Flash Usage

Although Adobe has done much to improve the way Flash now exports mobile friendly content, old flash output files (most commonly with the swf extension) are no longer considered mobile-friendly and should be replaced.  Flash content was very popular as web developers opted for animation and eye-catching movement to static images. Adobe’s Flash Player was hugely popular and had a ubiquity close to 98 or 99 percent at its height.  Animation and movement is still possible, but should be accomplished through CSS or Javascript to ensure compatibility with mobile devices.  Flash went the way of the dodo in large part because Steve Jobs didn’t like Flash Player, and took a public stance that shaped Flash’s destiny (or demise).

Quick Fix

To learn more about how to implement animation using CSS or Javascript, check out this article from Google, and this other one from CSS-Tricks.

2. Viewport Not Configured

Viewport is the term used to describe the visible part of a webpage. Think of your device’s screen as a window to the web.  Whatever size (vertical and horizontal pixels) you can see at any given time is your viewport size.  A web developer can publish data about how any browser should display the page by including a meta tag in the head of the page with a viewport value.  The great thing about this declaration is that it can be responsive to any screen size or resolution.

Quick Fix

I typically like to use the following:

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

The code above tells a browser that the viewport should be the width of the device that is displaying the page and that the scale (zoom) should be 1 (or no zoom). Take a look at this  great article on why viewport matters and how to set it properly.

3. Fixed-width Viewport

One mistake that is very common among web developers making their first foray into mobile is the attempt to target specific devices.  Targeting specific devices quickly becomes unwieldy and extremely difficult because of the always changing devices sizes and screen resolutions (viewports) and the unreliable user-agent strings provided by browsers.

Quick Fix

As described in the previous topic, Viewport Not Configured, you are going to be (almost always) better off using a fluid viewport size rather than a fixed size (see suggested quick fix above). Feel free to comment below if you have a question about viewport size and I’ll be happy to provide my best insight.

4. Content Not Sized to Viewport

Who would have guessed a little viewport could cause so many problems! This error is related to the entry above, but is solved differently. You’ll see this error in Webmaster Tools if you have things like images, tables, or other block-level elements (and even some inline elements) that end up being too large to display within the allowed width of your viewport.

This problem can often be fixed very simply with CSS. For example, if I have an image that is natively 1000 pixels wide it will extend beyond the borders of most mobile phone viewports in portrait mode. Your visitors will often miss out on the best part of your site if the images in your content do not adjust to fit the viewport.

viewport-lamb

Quick Fix

The solution is to ensure your CSS is telling the browser that images and other block-level items should never be wider than what you have to work with. Implementations will vary, but here’s an example of CSS telling a browser not to render an images larger than the screen:

img {max-width:100%;height:auto;}

In the above code, we’re saying, “make sure images are never larger than 100% of the screen and make the height adjust to whatever width it ends up at (while maintaining the original aspect ratio).

Tip: Portrait vs. Landscape

While this is not an error that will appear in Google Webmaster Tools, you’ll want to be sure that your content always adjusts to a devices viewport whether its displaying in portrait or landscape mode.  Media queries in your CSS will help you define the proper values to keep things looking great no matter the device or the device’s orientation. Pete LePage at Google has an awesome article on the topic of media queries that you’ll want to read.

5. Small Font Size

I recently went back and watched the keynote speech given by Steve Jobs to introduce the first iPhone. He went to nytimes.com to show off Safari’s mobile browser. He double tapped an area of text to zoom in to read. That sort of user activity, since the time of his keynote, has been decided to be unfriendly on a mobile device. The preferred user experience is one where a user gets a great experience on your site without having to pinch or zoom—one where the site is displayed in a custom way depending on your device’s screen size and capability. Luckily, the fix to this is simple and again involves CSS media queries.

Quick Fix

In the case of our site, acceleratormarketing.com, we use the following media query and CSS declarations to set the font size for mobile devices matching the query:


@media (max-width: 767px) {
.inner_right p { font-size: 15px; }
}

Whatever you end up doing to set font sizes, make sure you follow some of the great recommendations offered here.

6. Touch Elements Too Close

There may be some debate about what constitutes “too close” but the proximity of elements on your mobile site can cause problems for users if not properly considered. Fat fingers may tap a user to an unintended linked page if the link is designed to be too small or too close to another element.

A Smashing Magazine article points out the following:

“Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.”

Quick Fix

The best way to address element display and presentation for mobile devices is through customization of CSS declarations using media queries. You may also consider using a boilerplate CSS library like Mobile Boilerplate, Skeleton, or even the very popular Twitter Bootstrap.

Join The Discussion