Google now marks pages that pass four checks in phone results: no Flash, readable text, no sideways scrolling and links far enough apart. Test your pages, then rebuild the layout for phones rather than patching it.

A grey label in phone results

Over the next few weeks, some results in Google searches on phones will start with a short grey label reading Mobile-friendly. Google began adding it yesterday; results on computers do not show it.

It goes on pages that pass checks Google runs when it fetches a page as a phone would, so a competitor's page may carry it while yours does not.

For an older small business site, the label, or the lack of it, is a plain public verdict on the phone layout.

The four checks behind it

Google has published what it looks for. A page earns the label when it passes all four:

The checks apply page by page. A responsive home page with a fixed-width order form behind it can earn the label on one and miss it on the other.

Testing a page today

Google released a Mobile-Friendly Test alongside the label. Paste in an address, and it fetches the page as Googlebot on a phone, says whether it passes and shows what it saw.

For the whole site, Webmaster Tools gained a Mobile Usability report in late October. It groups pages by problem: text too small, links too close, content wider than the screen.

Then open the pages on a real phone, away from the office network. A test says whether a page passes; a phone shows whether it is pleasant to use.

What fails on an older site

Small business sites built before responsive design was common fail in predictable ways. Most use a fixed width, often around 960 pixels, designed for a computer screen.

A phone shrinks that page to fit, so the text is tiny and the menu links sit a few pixels apart: two failed checks before anyone reads a word.

Flash is the other common failure. Intros, galleries and music players built in it show as an empty box on iPhones and most current Android phones.

Wide price tables and images set wider than a phone push content off the side of the screen, even on pages that are otherwise fine.

Why one line of code is not the fix

A single line in a page's head, the viewport setting, tells phones how wide to lay the page out. Without it, phones assume a desktop page and shrink everything.

Adding that line to a fixed-width design makes matters worse: the phone shows the page at full size, and visitors scroll sideways to read each line.

What the checks are after is a layout that rearranges itself for a narrow screen: one column, larger text, buttons a thumb can hit.

Files Google needs to see the layout

Google judges the layout from the page's style sheets and scripts. If robots.txt blocks the folders holding them, Google sees a bare page and may fail it even when phones display it well.

Google's guidelines, updated in late October, ask sites to let Googlebot fetch those files. Fetch and Render in Webmaster Tools lists any that Googlebot was refused, and the fix is usually a few lines.

A worked example

A mobile DJ service based in Penticton plays weddings, graduations and company parties, with three DJs and two sets of equipment.

Its site, built six years ago, ran on Flash: an animated intro, a player for sample mixes and a photo gallery. Couples planning weddings often found it on phones and saw an empty box.

The test failed the home page on all four checks, and the packages page, a wide price table, on two.

The rebuilt site has a responsive layout. Sample mixes are ordinary audio files that play on any phone, and each package is a short block of text.

The phone number dials when tapped, and the enquiry form asks only for the date, the venue and the guest count, in fields a thumb can fill.

A couple can now hear a sample, read the prices and ask about their date without zooming. The label follows from that, rather than being the goal.

Fix it for people, not for the label

It is tempting to adjust a page until the test passes: a larger font here, the Flash removed there.

A page can pass and still be awkward, with fiddly forms or photographs too heavy for a phone connection. The four checks are a floor, not a measure of a good phone page.

Google has gone no further than saying it is experimenting with these criteria as a signal in its results. A layout built for people is the better reason to act.

Separate phone sites

Some older sites send phones to a separate mobile version at its own address. Google tests that version, and it often lags behind the main site.

A common fault sends every phone visitor to the mobile home page, whatever they asked for. Someone who tapped a result for the price list should land on the price list.

The counter-case

Some businesses get nearly all their visits from office computers, such as a supplier whose buyers order from their desks. For them, the label will rarely be seen.

Their phone layout can reasonably wait for a planned rebuild rather than a rush job, and Google Analytics shows how many visits come from phones and tablets.

But phone visits are growing for most sites, and an old layout only ages. When the rebuild comes, a layout that adapts to the screen belongs in it from the start.

A phone layout worth the label

  1. Run your main pages through the Mobile-Friendly Test.
  2. Read the Mobile Usability report for the whole site.
  3. Check robots.txt for blocked style sheets and scripts.
  4. Replace Flash with images, text and audio phones can play.
  5. Rebuild the layout so it fits a narrow screen.
  6. Make links, buttons and the phone number easy to tap.
  7. Try each main page on a real phone, away from the office.

Step five is what the label really measures. The other steps treat symptoms; a layout that rearranges itself for a phone treats the cause, and keeps working as screens change.

While an older site's page templates are open for that work, another leftover worth clearing out of them turns up in the keywords tag still filled in on every page.

Frequently asked questions

What is the Mobile-friendly label?

A short grey label Google has begun adding to some results on phones. It marks pages that passed Google's checks for working on a phone screen.

What does a page need to pass?

No Flash, text readable without zooming, content that fits the screen without sideways scrolling, and links far enough apart to tap the right one.

How do I test my pages?

Run single pages through Google's Mobile-Friendly Test, see problems across the site under Mobile Usability in Webmaster Tools, then try the pages on a real phone.

Will adding a viewport line fix an old site?

No. Added to a fixed-width design, it makes phones show the page at full size, so visitors scroll sideways. The layout itself has to adapt.

Why would a page that looks fine on phones fail?

Often because robots.txt blocks the style sheets and scripts, so Google sees a bare page. Fetch and Render in Webmaster Tools lists the blocked files, and the fix is usually small.

Does the label affect where a page appears?

Google said only that it is experimenting with these criteria as a signal. Treat the label as a verdict on the phone layout, and fix the layout for visitors.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Old site failing the phone test?

Send us a link to your main page, and we will list the checks it fails and what a proper phone layout involves.

Start a Conversation