Google's change for phone searches starts rolling out today, page by page. Most failing pages fail for a few reasons: no viewport setting, small text, links packed too tightly, content that overflows the screen, or Flash.

The rollout starts today

Today Google begins rolling out the change it announced in February. In searches made on phones, pages that pass its Mobile-Friendly Test can now rank above pages that fail.

It works page by page, not site by site, and Google has said the rollout will take a week or more to reach everything.

Most small business pages that fail do not fail for deep reasons. They fail for a handful of small, specific ones, each with a known fix.

What the test reports

The Mobile-Friendly Test takes one page address and gives a verdict, with the reasons for a fail. The Mobile Usability report in Webmaster Tools lists the same problems across the whole site.

The first causes many of the others. Without it, a phone lays the page out as if on a desktop screen and shrinks the result, so text turns tiny and links bunch together.

The viewport setting

The viewport setting is one line in the head of each page, telling the browser to use the width of the device's own screen.

Many sites built before about 2011 lack it, and so do older themes. On WordPress the theme supplies it, so the fix belongs in the theme rather than on each page.

On its own, though, the line can make things worse. A layout fixed at nine hundred pixels, told to fit a phone, simply spills off the side. The line works together with a layout that adapts to narrower screens.

Text too small to read

Older designs often set body text at eleven or twelve pixels, which was normal on desktop screens of the time.

On a phone, text should be readable without pinching. Around sixteen pixels for body text is the usual starting point, with line spacing generous enough that lines do not run together.

Check captions, footer text and small print in forms as well. The test flags the page if enough of its text is too small, not only the paragraphs.

Links too close together

A fingertip is far less precise than a mouse pointer. Footer links in a single row, small social icons side by side and menu items stacked tightly all fail for the same reason.

Each tappable item needs to be roughly the size of a fingertip, with space around it.

The fix is usually styling rather than redesign: more padding on links, menu items on their own lines, and icons a little larger and further apart.

Content wider than the screen

One wide element is enough to make the whole page scroll sideways.

The usual suspects are a table of prices or hours set to a fixed width, an image inserted at a fixed size, an embedded map or video with its width written in, or a long web address that cannot wrap.

Images can be set to shrink to fit their column. Tables can be rebuilt as stacked blocks, and maps and videos can be embedded so they scale to the screen.

A worked example

A wedding officiant who performs ceremonies from beach elopements to large garden weddings gets most of her enquiries from couples searching on their phones in the evening.

Her site, built in 2010, failed the Mobile-Friendly Test on every page. Its theme had no viewport setting, so phones showed a shrunken desktop layout.

Ceremony packages sat in a three-column table nine hundred pixels wide, the footer was a row of small links, and the home page opened with a Flash slideshow.

Her designer added the viewport line to the theme and made the layout adapt to the screen, turned the packages table into three stacked blocks, enlarged and spaced the footer links, and replaced the slideshow with one photograph.

Every page now passes the test. The words on them did not change.

Flash and other plugins

Flash has never run on iPhones and no longer runs on Android phones, so the test treats it as content a phone cannot show.

Old home pages often open with a Flash slideshow or intro, and some galleries and menus were built entirely in it.

A slideshow can become a single strong photograph or a slideshow built in HTML5. A Flash video player can be replaced with a current embed.

Blocked files

Some pages fail even though they look fine on a phone.

The usual cause is a robots.txt file that blocks Google from the site's stylesheets or scripts. Google then sees the page without its styling and judges that version.

The Mobile-Friendly Test lists resources it could not load. Allowing Google to fetch the stylesheets and scripts usually turns the fail into a pass.

Page by page

Because the change applies to individual pages, start with the ones that matter: the home page, each service page, the contact page and any page your ads send people to.

Google reassesses pages as it crawls them again. Fetch as Google in Webmaster Tools can ask for a fixed page to be looked at sooner.

Keep a list of the pages tested, the reasons each failed and the date each passed. The Mobile Usability report should shrink as the fixes go in.

The counter-case

A page that fails on one minor point, on a site most customers visit from office computers, is not an emergency. Desktop rankings are not part of this change.

And relevance still counts. Google has said a useful page that fails the test can still rank well when it is the best answer to a search.

Still, most failures here are small and cheap to fix. Find each failing page, fix its specific reasons, starting with the viewport, and test it again.

During the rollout

  1. Run the Mobile-Friendly Test on your home page.
  2. Open the Mobile Usability report in Webmaster Tools.
  3. Check the viewport setting in every template.
  4. Set body text to a readable size.
  5. Space out links in menus and footers.
  6. Find anything wider than the screen.
  7. Replace Flash with images or HTML5.

Step three is where most fixes begin. Several of the reasons on the test's list follow from the missing viewport line, and a single change in the theme can clear them across every page.

What the change covers, and why it applies page by page, is set out in Google sets April 21 for mobile-friendly rankings.

Frequently asked questions

What does Google's change starting today do?

In searches on phones, pages that pass the Mobile-Friendly Test can rank above pages that fail. It applies page by page and rolls out over a week or more.

What is the viewport setting?

A line in the head of each page telling phones to use the screen's own width. Without it, phones shrink the desktop layout, making text tiny and links crowded.

Is adding the viewport line enough?

Not on its own. On a fixed-width site it can make content spill off the screen, so the layout also has to adapt to narrower screens.

Why would a page fail if it looks fine?

Often because robots.txt blocks Google from the stylesheets, so Google judges an unstyled page. The test lists blocked files, and allowing Google to fetch them usually fixes it.

Where can I see every failing page?

In the Mobile Usability report in Webmaster Tools, which groups problems by type across the whole site. The Mobile-Friendly Test checks one page at a time.

Do desktop rankings change as well?

No. This change affects searches made on phones only. A page that fails still needs fixing for the people using phones, who meet the same problems the test reports.

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.

Pages failing the Mobile-Friendly Test today?

Send us the addresses. We will tell you which small fixes would get each page passing.

Start a Conversation