What Does Google Think a Mobile-Friendly Website Looks Like?

Facebook Twitter Google + LinkedIn

Google’s mobile-friendly algorithm launches on 21 April, and will have a bigger impact than Panda or Penguin. But what does Google mean by ‘mobile-friendly’? Here are the facts, plus instructions on how to check whether your site meets Google’s mobile usability guidelines.

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

How Google Defines a Mobile-Friendly Site

A mobile-friendly website should offer a smooth, pain-free experience for all users, whether they’re accessing the website through their desktop, smartphone, games console or wearable device.

A selection of mobile devices. Source: HLundgaard at Wikimedia Commons.

There are five areas of mobile usability that Google looks at when determining whether to reward a webpage with a mobile-friendly label in mobile search results. Pages with this label will benefit from a ranking boost when the new algorithm launches.

From Google’s Webmaster Tools Help:

  • A defined viewing area (or viewport) that adjusts to the device’s screen size.
  • Content that flows in the viewport, so that users don’t have to scroll horizontally or pinch the screen in order to see the entire page.
  • Fonts that scale for easier reading on small screens.
  • Easy-to-touch elements (e.g. buttons) that are well-spaced from other touch elements.
  • Visual design and motion driven by mobile-friendly technology.

Responsive Design and Mobile Sites: Which Does Google Prefer?

There are two common ways to deliver website content to mobile users – responsive design and mobile sites. (There’s also a third option, dynamic sites – but this tends to be less popular than the other two.)

Responsive Design

A responsive website serves content to users from the same URLs, regardless of the device they’re using.

However, the site is coded in such a way that elements of the page change according to the size of the screen it’s been viewed on.

The layout, image sizes, or even written content may vary depending on the size of the user’s screen. However, fundamentally, they’re seeing the same page, no matter which device they’re using.

Gtech's responsive website displayed on several devices. The same responsive webpage (gtech.co.uk) viewed on several devices.

Mobile Sites

A mobile website serves content to users from different URLs, depending on whether they access the site from a mobile or desktop device.

There is, effectively, a ‘copy’ of the desktop website delivered to – and optimised for – mobile users.

Content can be completely different from, or largely similar to, the desktop site.

YouTube's dedicated mobile site. YouTube has a dedicated mobile site that delivers separate content to its desktop site.

Google’s Preference

Google’s guidelines heavily favour responsive design. Much of the language used in its definition of a mobile-friendly site refers to responsive design – such as ‘content that flows in the viewport’ and ‘a defined viewing area that adjusts to the device’s screen size’ .

This said, a mobile site is better than providing no mobile-optimised content at all.

Unsure Whether You Have a Responsive Website or Mobile Website?

If you’re not sure which type of mobile site you have, you can use our Responsive Site Checker tool.

This tool is (to our knowledge) the only free tool of its kind that automatically detects mobile sites. If it finds a mobile site on your domain, it will display the message: “Showing the dedicated mobile site at: [URL]”

Try it out here: http://www.clickthrough-marketing.com/sitechecker/

How to Check if Your Site is Mobile-Friendly

The quickest way to check if Google considers a page to be mobile-friendly is to use Google’s Mobile-Friendly Test tool.

This displays a preview of the page as seen on a mobile device, along with a brief explanation of any errors found.

The Mobile Friendly Test tool, auditing ClickThrough's site.

If you get this message:

Awesome! This page is mobile-friendly.

Then you can be sure the page will appear in Google’s mobile search results with a mobile-friendly label, and receive a ranking boost.

The Mobile-Friendly Test tool is great for quick checks. But for an in-depth, whole-site review, you’ll need to have Google Webmaster Tools set up.

Within Webmaster Tools, you’ll find the mobile usability report. This scans your website for usability errors, and then presents all the problems found, along with the number of pages affected, like this:

Google's mobile usability report.

You can click on the usability error to see a list of URLs that need action taken.

The mobile usability report can be found under ‘Search Traffic’ on the left sidebar in your site’s Webmaster Tools dashboard.

We recommend running a mobile usability report on your website as your first course of action. You will then be able to reference any errors you see against Google’s recommendations.

More on Google’s Mobile-Friendly Algorithm

You may also enjoy: Google’s Mobile-Friendly Algorithm: Everything We Know (So Far)

Get 32 pages of expert advice to make your website mobile friendly. Download your free eBook: The Ultimate Guide to Google’s Mobile-Friendly Algorithm.

Subscribe to our blog and get the latest industry-updates direct to your inbox