Everything you need to know about Google’s mobile usability guidelines What are the official Google guidelines on mobile usability? How can you stick to them? Should you even bother? Will they affect your site's SEO?

Let’s say you’re already keenly aware that user testing is an amazing way to ensure your visitors are getting the best possible experience from your mobile site.

Cool, I’m glad you agree. Hey, we’d probably get on quite well!

Let’s also assume you’re vaguely aware of the fact that Google has some practical guidelines for ensuring mobile usability, and that it takes UX into account when indexing your webpages in its search listings.

Brilliant, you’ve heard of SEO! You know I used to edit the third or forth most popular search engine marketing related website in (some parts of) EMEA. Hey, we’d probably get on better than ‘quite well’!

But all this vague-to-keen awareness raises a very important question…

What bearing do Google’s guidelines have on your own mobile site’s UX and its SEO value?

Surely by ensuring that the UX of your site is tried, tested and optimised based on real human behaviour is enough for Google to look at your site and say, “yes you are good at SEO, sit atop this results page and enjoy untold traffic” (now re-read that sentence aloud in your best ‘god-like’ voice’)?

Or do you have to get really down and dirty with actual technical SEO stuff, in order to placate the big G shaped overlord and its guidelines?

Come with me, new found companion, and we’ll explore these questions together.

I’ll make an early prediction that the conclusion will be something like this: “probably, it’s hard to say, but just keep making your mobile visitors happy and you’ll be fine.”

¯\_(ツ)_/¯

Google’s preferred method of mobile optimisation…

We are long past the tipping point where we even need to suggest that you should have a mobile website in order to provide a) usability across every screen size and b) lovely SEO points.

If I call my grandmother right now and ask her what’s the most important thing a website needs in order to be accessible to the maximum amount of people, she’ll reply, “that it can be seen on a mobile phone and who cares, life’s short, maybe you should get out more?”

Fair enough. But what you and my grandmother may not be aware of is the extent of which a website should be mobile optimised. And that I get out almost twice a week, thank you very much.

Mobile-friendliness has been a ranking factor since April 2015, and there are various ways you can be ‘mobile friendly’. Let’s list them here:

(Some of these definitions are fleshed out by the good people at Search Engine Land. I’ll leave you to decide which ones.)

  • Responsive design: with responsive web design, a website shrinks or grows according to desktop, tablet and mobile device, while maintaining the same HTML and URL structure.
  • Adaptive design: also known as dynamic serving, this method serves different devices using the same URL structure, but it does so by detecting the device and generating a different version of the site’s HTML appropriate for that device. This means the same website has multiple versions that are served through common URLs.
  • Separate mobile site: this basically means you have two different versions of the same website. One built for desktop, one for mobile. Or to be slightly more technical, this configuration delivers different HTML on separate URLs depending on the device detected. Usually the desktop site is located on a www subdomain and the mobile-friendly site’s pages are located on the “m.” subdomain. This one seems like the most amount of work.
  • Pizza and flowers: have you tried being nice and just listening to your mobile for a change? Maybe you could offer to help out the next time it needs to move house. Or just drop by its place of work with their favourite treats if they’ve had a bad day. Maybe not that last one, you can be ‘overly’ mobile friendly. Perhaps just stop being a selfish jerk all the time and work up from there.

And which of the above options is Google’s favourite method of delivering a mobile friendly experience to visitors? Responsive design.

Yep. In a rare moment, Google are transparent about something. Here it is, right here in their own webmaster’s guide:

advice on responsive design from Google

They even popped it in bold for added emphasis. Just like how I did. We’re not so different, Google and I. They just have more money and can look at your browsing history whenever they like. I still have to borrow money off my parents and stare at your phone surreptitiously while you sit checking Facebook on the bus.

Reasons for Google preferring responsive design:

According to their own guidelines, Google loves responsive design because:

  • If there’s a single URL, it makes it easier for users to share and link to your content
  • It helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages
  • Requires less engineering time to maintain multiple pages for the same content
  • Reduces the possibility of the common mistakes that affect mobile sites
  • Requires no redirection for users to have a device-optimised view, which reduces load time
  • Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot only needs to crawl your page once, rather than crawling multiple times with different Googlebots to retrieve all versions of the content

What the above points are labouring is, “look, it’s just less work for us okay? If we have less work to do, we can take the afternoon off, go to the beach and then we’ll be much happier, and then maybe our next algorithm won’t flush your site down the toilet.”

Good for your users?

Responsive design may be Google’s preference, but does this necessarily correlate with your users’ preferences?

Users are unlikely to care whether you’re dynamically serving pages or housing everything on a ropey-old subdomain, as long as they can access your content as smoothly and quickly as possible.

Also, just because you have a responsive website it doesn’t automatically mean your mobile experience is just as good as your desktop site. What if you’re an ecommerce store that forgets to make sure your product images are available to pinch and zoom when you scale down to mobile? That’s hardly ‘mobile optimised’.

Just remember that your own users’ experience comes first, before any Google recommendation.

*Google automatically demotes this article*

More advice from Google about mobile usability and SEO

What else do you need to know about mobile UX and keeping sweet with the search rankings?

Remember to ‘signal’ to Google when a page is formatted for mobile

Whether it’s responsive, adaptive or housed on an .m site, you must tell Google that there’s a mobile friendly version of your content, so Google can accurately serve the right content on the right screen size.

ralph wiggum waving

With a responsive site, add the following viewport meta tag to the head of the document:

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

If you don’t include this meta tag, your content will default to the width of a desktop screen. And this normally means that your mobile browser will artificially try to make the page look better by increasing font sizes, scaling the content to fit the screen or showing only the part of the page.

According to Google, this means that:

“Font sizes may have an inconsistent appearance, and users may have to double-tap or pinch-to-zoom in order to be able to see and interact with the content. For Google, we might not judge a page as mobile-friendly because it requires this kind (or type) of interaction on a mobile device.”

For advice on how to signal your mobile content to Google for non-responsive websites, check out dynamic serving and separate URLs.

Keep your pages crawlable

Google sends out ‘spiders’ (also known as Googlebots in an attempt to make them sound less creepy) to crawl (they failed with this term) any new and updated webpages. The information from these billions of pages is then added to Google’s index, ready to be accessed by real-life searchers. If you want these searchers to find you, then make it as easy as possible for these spiders to crawl all over your site.

homer simpson covered in spiders

This means you should avoid the use of robots.txt to block search engines from accessing any files on your site that help render the page. This also includes ads. According to Google:

“If a Googlebot doesn’t have access to a page’s resources, such as CSS, JavaScript and images, we may not detect that it’s built to display and work well on a mobile browser. In other words, we may not detect that the page is mobile-friendly, and therefore not properly serve it to mobile searchers.”

You can check whether Google renders your webpage and its various elements, by using the Fetch as Google tool in search console.

Avoid unplayable content

This is a common problem, especially if you have a large site with lots of multimedia elements per page. Just because a video is working okay when you hit publish, it doesn’t mean it will still be okay a year later.

In my own experience, another site that I edit has ran afoul of Google when a few YouTube video embeds we included in a round-up, were removed from the platform and therefore rendered our article useless. We had no idea until an email from the AdSense team warned us.

youtube unplayable content

It pays to remain vigilant, and continue optimising your most popular content.

You should also avoid any content that requires players, which aren’t supported by mobile. Like Flash.

Google recommends using either HTML5, video embeds that you’re certain play on all devices, not using Flash and including a text transcript of the video, so at least if everything goes wrong (HTML5 is superseded, YouTube is sold off, Flash gets its cold-blooded revenge) you can still just read the thing.

Careful with your redirects and 404 pages

If you’ve set up a redirect from a mobile page, make sure it goes to another mobile page. Not a desktop version.

faulty redirects from mobile to desktop

Courtesy of Google

Also, if you notice that a user is visiting a desktop page from their mobile, yet you actually do have a relevant mobile page on a different URL, redirect them to that URL. This is much better than serving a 404 or soft 404 page.

Avoid placing buttons, links and other touch elements too close to each other

Homer's fingers are too fat to dial the telephone

“The fingers you have used to dial are too fat. To obtain a special dialling wand, please mash the keypad with your palm now.”

And there’s some actual practical advice for sizing tap elements here.

Ad interstitials be gone!

Google quite rightly came down hard on the use of ad interstitials earlier this year by introducing a penalty to anyone foolish enough to ruin a visitor’s experience by serving them a giant full-screen advert immediately after visiting from search.

Like these:

ad interstitials that Google will penalise you for using

Courtesy of Google

According to Google, here are the types of ads you shouldn’t be serving to visitors and may result in a penalty:

  • Pop-ups that cover the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page.
  • Displaying a standalone interstitial that the user has to dismiss before accessing the main content.
  • Using a layout where the above-the-fold portion of the page appears similar to a standalone interstitial, but the original content has been inlined underneath the fold.

Types of ads that have been decreed as safe if used responsibly include:

  • Legal obligations such as for cookie usage or age verification.
  • Login dialogs on sites where content is not publicly indexable or behind a paywall.
  • Banners that use a reasonable amount of screen space and are easily dismissible.

Page speed

Google will be launching a separate mobile-first index (supposedly by 2018), which will be kept more up-to-date than its desktop index and page loading speed WILL be a ranking factor. However right now, page speed is not currently a ranking factor for mobile sites, in the same way it is for desktop.

According to The SEM Post, your site could take 30 seconds to load, and yet not be downranked by Google.

This seems utterly bizarre, and again is a testament to how you should put the usability of your site before sticking rigidly to the boundaries set by Google. Even on Google’s own site speed testing tool, it boldly claims that most sites lose half their visitors while loading.

It’s clear that page speed will be a ranking factor in the near future, and that you should be doing everything you possibly can to get up to speed right now.

Do take advantage of the Google mobile speed testing tool as it’s a really useful (and free) way to get some practical advice on speeding up your site, as well as providing industry benchmarks for comparison.

However…

Some caveats about Google’s mobile and page-speed test tools

My favourite mobile expert Andy Favell wrote a comprehensive guide to mobile usability last year in which he elaborated on some common misconceptions about Google’s mobile-friendly test and PageSpeed Insights.

  • Google’s Mobile-friendly test and PageSpeed Insights tool will not test your whole site, it will only test the webpage that you enter in the search bar. There is no guarantee that because your homepage scores passes either test, all other pages will pass – and vice versa.
  • A score of 100% mobile-friendliness in Google’s eyes doesn’t guarantee that your site has ‘good’ mobile usability for the actual human beings visiting your site. The mobile-friendly test considers:
    • The content fits the screen (viewport)
    • The text is correctly sized
    • Buttons and links are correctly sized, spaced and easy to tap
    • There’s no Flash content
    • There are no interstitial ads

However it won’t test for visual problems, unintuitive design, unintelligible navigation and broken links.

No automated tool is an alternative to proper user testing.

Accelerated mobile pages

Finally, a little about Google’s AMP project.

Basically accelerated mobile pages provide stripped down versions of mobile content that are specifically designed to offer super-fast, super-lightweight pages that load instantly for people visiting from search.

You will have seen the little lightning bolt symbol if you’ve searched for anything on Google mobile in the last six months.

amp mobile search results

While the user experience of AMP is, as stated above, super-fast and super-lightweight, and the implementation of them is straightforward and needs little ongoing management – AMP currently offers no SEO value. At least not in a straightforward manner.

Gary Illyes, Webmaster Trends Analyst at Google, stated in 2016 that, “Currently, AMP is not a mobile ranking factor.” John Mueller also reiterated this earlier in 2017.

But of course, these questions asked of Google’s head honchos come from the old school ethos that SEO is all about technical fixes, when the reality is that Google is becoming increasingly more sophisticated at putting the user central to its considerations. Sure, AMP may not be a strict ranking factor, but if these pages offer the best experience, and if people are going out of their way to find them and click through, then how can that be ignored as a signal?

Conclusion

Should you pay steadfast attention to Google’s mobile usability guidelines?

Probably, it’s hard to say, but just keep making your mobile visitors happy and you’ll be fine.

YES! I won my own bet!

Get a newsletter that isn't all about us...

Subscribe for weekly, hand-picked articles about UX, design, and more every Friday—from the Be Good to Your Users blog and the rest of the whole darn web.

...get a little taste right here. 👅 🍭

Christopher Ratcliff
Christopher is the Content Marketing Manager of WhatUsersDo. He's also the editor of wayward pop culture site Methods Unsound. He used to be the deputy editor of Econsultancy and editor Search Engine Watch.

Leave a Reply