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

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.

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.

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.

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 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?

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]”

How to Check if Your Site is Mobile-Friendly

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

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:

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.