We take an in-depth look at some of Google’s mobile usability errors to help you get ready for the new mobile-friendly algorithm (which is going to have more impact than Panda or Penguin!).

Is your site ready for Google’s upcoming mobile-friendly algorithm?

When the new ranking factor launches on April 21, it’s imperative that your critical pages are as mobile-friendly as possible. This is the only way to benefit from Google’s mobile search ranking boost, and stand a chance against mobile-savvy competitors.

We’ve already seen what makes a site mobile-friendly in Google’s eyes, and explained how to check if your site has mobile usability errors. Now we’ll look at the first three errors in detail, as identified in Google’s Webmaster Tools mobile usability reports.

[This post is adapted from our free eBook, The Ultimate Guide to Google’s Mobile-Friendly Algorithm.

Download your copy today and get 32 pages of expert tips to make your site mobile-friendly by April 21.]

Flash Usage

Google says:

“Most 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.”

The problem

Neither Google nor Apple support Adobe Flash in their tablet and phone browsers. When you consider that Google’s Android and Apple’s iOS are the most widely-used mobile operating systems globally, the problem becomes clear.

Adobe Flash Logo

Given the rise in Internet connectivity from handheld devices, this lack of support has meant site owners with websites featuring flash content have not been able to fully and effectively communicate their message to a mobile audience.

Coincidentally, since cross-browser HTML5 support came into its own in 2012, the new web standard has provided a mechanism for developers and designers to create flash-like interactive web experiences.

The traditional full-flash site from the early 2000s tended to be a creative-led, experiential-driven online entity. It has taken several years for HTML5 to bed down, but now the same impetus to create interesting online experiences is being developed with HTML5 websites and web apps.

For those who merely want to add a little interactive user experience to their site, modern technologies like HTML5, CSS3, and jQuery are now the best ports of call.

Don’t get us wrong, Flash still has its uses – but not typically for a business website. If your website still uses Flash, you need to think very strongly about replacing these Flash-based elements with modern equivalents. Content providers like YouTube already detect devices and serve content accordingly. This is why you can view YouTube on your mobile device – its traditional Flash-based video player is now accompanied by a HTML5 equivalent.

The solution

There are a number of approaches you can take to deal with Google’s ‘Flash usage’ error. However, if you don’t have access to web development expertise, you may find these fixes difficult to implement.

The first approach is to deliver flash content only to supported browsers. Using server-side or client-side code, you can detect what device is looking at your website and deliver content using an appropriate platform. However, this approach may cause difficulties if your site makes heavy use of Flash elements.

The second approach is to replace basic flash animations with CSS or JavaScript animations. CSS3 now has many native user interface transformations and can do basic animation. JavaScript libraries like JQuery can work with CSS3 to push towards interactivity previously possible through Flash.

The third approach is, simply, to re-build your site without flash elements. This may be your only choice if your site is heavily reliant on Flash to deliver content.

Viewport Not Configured

Google says:

“Because visitors to your site use a variety of devices with varying screen sizes—from large desktop monitors, to tablets and small 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.”

The problem

The ‘viewport’ meta tag is an important part of responsive design. It defines how a website should display on a mobile device, and how users can change the way it is displayed.

For example, you might set the viewport to show a ‘zoomed in’ version of your desktop website on a mobile device, where content is resized and the text flows to fit the screen for comfortable viewing.

The solution

If you see this error in your mobile usability report, it means you haven’t set a viewport meta tag, or your viewport isn’t working correctly.

And on the subject of viewports…

Fixed-Width Viewport

Google says:

“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.”

The problem

One way to set a viewport is to set its width attribute to a fixed number of reference pixels. This makes the page render as if it’s the same width on a desktop and mobile device, even though the mobile device you’re using will likely have a significantly smaller screen.

Google advises against this approach as it doesn’t result in a ‘true’ responsive design – where content will ‘flow’ to fit the whole screen, no matter how wide or narrow its screen.

The solution

Google recommends using the width=device-width attribute in your viewport meta tag to ensure the website responds to the size of the user’s screen.

In addition, you should use the initial-scale=1 attribute to establish a 1:1 relationship between hardware pixels and CSS pixels. A CSS pixel is a fixed unit of measurement that appears to be the same size when viewed on different devices, even if the devices have different hardware pixel densities.

This ensures that the content of the page will ‘flow’ to fit the screen, whether it’s viewed in a portrait or landscape orientation.

ClickThrough Marketing's site as seen on different mobile devices.

ClickThrough’s site has a viewport that responds to the orientation and size of a user’s device.

Google’s recommended viewport meta tag looks like this:

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

Google recommends, for accessibility reasons, not disabling user scaling (in other words, allowing them to ‘pinch and zoom’ when necessary).

This means the following attributes should be avoided:

user-scalable=no

(This disables user scalability entirely.)

Initial-scale=1,Maximum-scale=1

[Setting the maximum scale to match the initial scale also results in user scaling being disabled.]

Need More Advice to Make Your Website Mobile-Friendly?

Download your free eBook: The Ultimate Guide to Google’s Mobile Friendly Algorithm.

Did you find this page useful?

Comments

About the author:

ClickThrough is a digital marketing agency, providing search engine optimisation, pay per click management, conversion optimisation, web development and content marketing services.