A web designer’s guide to Google’s mobile-first index | Heart Internet Blog – Focusing on all aspects of the web

You may have heard about Google’s mobile-first index. But what will it mean for you, your clients and the way you create their websites?

In this guide, we’ll explain the reasons behind Google’s move and what you need to know to ensure that the websites you build are search-engine friendly on all devices.

We’ll begin by looking at the developments that led up to this moment.

The history of Google and mobile search

The shift to a mobile-first index is the culmination of a series of changes that began on November 18th 2014 when Google introduced the “Mobile-friendly” tag in its search results. The aim was to ensure mobile searchers would be able to easily find sites that were compatible with the device being used.

An algorithm change dubbed the Mobile-Friendly Update followed on April 21st 2015. This time the change gave a rankings boost to mobile-friendly websites, increasing the chances that these sites would outrank non-mobile-friendly sites in mobile search results.

After this, Google shifted its focus to educating people about the importance of mobile-friendly sites. On March 16th 2016 it published the Webmasters Mobile Guide, which was followed by a mobile-friendly testing tool on May 17th 2016.

Ultimately, this all built up to the big change – the announcement of a mobile-first index which came on November 4th 2016.

The growing importance of mobile search

Clearly, improving mobile search has been an important issue for Google in the last three years. But why is that? Well, there are two main factors driving its decisions.

1) The growth of mobile internet usage

Mobile devices are all but ubiquitous now, and in turn that has driven huge growth in mobile internet usage.

In 2015, mobile searches surpassed desktop search for the first time – and things have stayed that way since. With most people reaching for their phone or laptop when searching, it’s not surprising Google wants to ensure they have the best possible experience. And that brings us on to the second reason.

2) Google’s focus on UX

Google’s growth as a search engine has always been based on delivering the best possible search results. And that hasn’t changed in the mobile era.

But the quality of Google’s search results is dependent on the quality of the websites those results direct people to. If someone has to deal with bad UX on a site that topped the search rankings, that reflects badly on Google.

For this reason, Google wants to make sure that people searching on mobile are directed to sites that are optimised for those devices.

If a mobile user is directed to a full desktop site, they’re going to find it hard to use and may even face longer load times. That’s exactly the kind of thing Google wants to avoid.

Getting to grips with the mobile first index

Ok, so that’s the background to things, but what about the mobile index itself? How will that change the way things work?

What does a mobile-first index mean?

Until recently, Google compiled its search index from the point of view of a desktop browser, regardless of whether it was crawling a desktop or mobile website.

Clearly, this isn’t ideal – desktop and mobile sites look different and can have different content. That means under the old way of doing things, there was a chance mobile users weren’t always directed to the site most likely to meet their needs.

The switch to a mobile-first index means that mobile sites will be crawled from a mobile browser point of view, and desktop sites from a desktop point of view.

However, Google’s aim is to “eventually primarily use the mobile version of a site’s content to rank pages from that site”.

How will this change impact clients who only have desktop sites?

Well, clients who only have desktop sites don’t have to worry about disappearing completely from mobile search results.

But they probably will have to worry about falling mobile search results. As we’ve already seen, Google is prioritising good mobile UX and if your clients aren’t offering that, then they can expect to see their mobile rankings fall in comparison to their desktop rankings.

If you haven’t already been able to convince all your clients to adopt a mobile-friendly site, this latest change gives you another chance to do so.

How should designers respond to the mobile-first index?

First the obvious – you’re going to have to convince as many clients as possible that a mobile version of their site isn’t a luxury, it’s a necessity.

Less obvious perhaps is the need to change the way you approach site design.

Historically, websites have been designed for desktop first and then adapted into a mobile version.

From now on, that approach will need to be reversed.

The limitations of smaller screens will mean that sites will have to be based around content first, with more traditional design elements taking a back seat. Remember – Google’s aim is to ensure that its users can find the content they need, so it’s up to designers to ensure that content is easily accessible on a mobile website.

This means there could even be implications for the overall approach you take to mobile design.

Responsive v adaptive v separate sites

You’ll no doubt be aware of the three options available for creating mobile-friendly sites, and all the various pros and cons for each option.

However, there is a strong argument that the shift to mobile-first design means this three way battle is now reduced to a straight contest between responsive and adaptive sites.

That’s because the concept of responsive and adaptive design fits easily with the demands of mobile first design.

The theory is that if you’re designing for mobile-first, both responsive and adaptive design allow you to start small and scale up with ease.

Although if you’re used to starting out big and scaling down for mobile, you’ll obviously need to turn the process on its head.

That change in approach means mobile-first design isn’t without its drawbacks, but arguably it’s simply a case of adapting your method of working, rather than learning anything new. The whole argument is summed up nicely here. 

How to explain things to your clients

Ok, so how do you convince new, existing and potential clients that they need to adapt to a mobile-first world?

Well, clearly there’s no need to go into detail about the reasoning behind Google’s decision, and the pros and cons of designing for mobile first.

Instead, focus on the bottom line – failing to embrace a mobile-first world will likely mean fewer website visitors, fewer sales and lower revenues.

If you have access to your client’s Google Analytics, you can use the relevant data to show just how many visits and sales are driven by mobile users, and demonstrate what impact even a moderate drop in mobile visits would have on their business.

Even if you don’t have access to GA data, you can still encourage clients to perform this analysis themselves.

For new clients, you may want to use your mobile-first approach to design as something that sets you apart from other agencies they may be considering – again, don’t blind them with technical talk, but instead focus on the bottom line. If you can provide stats showing that mobile sites you’ve built in the past have helped businesses grow their profits, then that’s even better.

Of course, to ensure that your mobile sites are capable of attracting organic search traffic, you’ll need to ensure Google can crawl them with ease. Let’s look at the SEO issues raised by a mobile-first world.

SEO considerations

No matter which option you pick for designing mobile sites, there are SEO considerations you need to take into account to ensure Google can crawl you clients’ sites correctly.

Here’s an overview of what you’ll need to include for each mobile design option – and remember these steps are in addition to general SEO best practice for design.

Responsive web design

For responsive sites you need to use the meta name=”viewport” tag. This tag tells browsers how to adjust the dimensions and scaling of a page to fit a device.

Without it, a site won’t render correctly on mobile devices and this may lead to Google deciding the site is not mobile-friendly.

You can read more about this here. 

Dynamic serving

With dynamic serving, it’s vital you use the Vary HTTP header. Doing so will ensure that mobile users aren’t mistakenly served a cache of the desktop HTML page (or vice versa) and it will also help Googlebot discover a site’s mobile-optimised content more quickly.

You also need to ensure the user-agents list is kept up to date, and that Google’s agents are always treated in the same was as users.

If you need a refresher, go here. 

Separate mobile URLs

If you’re serving separate desktop and mobile URLs, you need to ensure that Google can understand the relationship between the two versions of the site.

Do this by using the rel=”alternate” tag on desktop pages and point it to the relevant page on the mobile site. On mobile pages, use the rel=”canonical” tag and point it to the relevant page on the desktop site.

You also need to ensure that Googlebots are treated as normal users and are redirected to the correct version of the site based on the user-agent.

In terms of interlinking between to the two versions of the site – you should offer a link to the desktop version of a page from the mobile version and vice versa. If there isn’t a mobile version of a page, ensure the desktop version is served instead.

Finally, if you have access to Search Console for the site, verify the mobile site in the same way you would the desktop version. If you don’t have access, encourage the client to do this.

All types of mobile websites

There are also some general SEO tips you need to follow, regardless of what kind of mobile site you’re creating.

The first of these is pretty obvious – make sure that the mobile version of the site never displays incompatible content drawn from the desktop version.

Video is a big issue here – not all of them are playable on the smaller screen. Flash, of course, is not broadly supported on mobile. For that reason, Google encourages people to use HTML5. This is another area where your clients may need some education.

The second issue is speed – the faster the better. Here are some good resources if you’re looking for tips on creating a lightning fast mobile experience.

• Make your mobile pages render in under one second
• Make the mobile web faster
• Optimize for mobile

You should also avoid blocking resources (JS, CSS, images) on your desktop or mobile sites, and use markup to help Google understand what elements are featured on a page. Just make sure markup is consistent across the different versions of a site.

Finally, a word about hidden content. In the past, Google hasn’t given any ranking weight to content that is hidden in tabs or expanding sections. The reasoning for this is that Google wants users to see the content they’re looking for as soon as they click through to a site.

But in a mobile-first world, it looks like that will change. Obviously hiding text in tabs and drop downs is best practice for mobile design, and as shown in the tweets below Google’s Gary Illyes has indicated that content that’s hidden for UX reasons will contribute to rankings in mobile search.

Tools for SEO

Here are a few tools that will help you ensure your sites are mobile-friendly. You may want to use the data generated by them to help convince clients that they need to embrace mobile design.

Is your page mobile friendly? – A simple Google tool that does exactly what it says.

Free site report – Another Google tool, this time for testing whole sites.

Varvy – Use it to check for mobile SEO issues.

Page Speed Insights – Test loading speed and get suggestions for fixes.

Structured Data Testing Tool – Use it to test any structured data is working as it should.

Summing up

Although everyone building websites professionally is well aware of the need to create mobile as well as desktop sites, it’s clear the shift to a mobile-first world will present challenges.
Not least among these is the apparent need to change approach and start scaling up designs from the mobile version, rather than scaling down desktop sites.

Then there’s the ongoing battle to convince clients that mobile sites are a necessity.

How will you be coping with the mobile-first world? Will you change your approach to design? And how will you educate clients about the changes?


Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

Drop us a line 0330 660 0255 or email sales@heartinternet.uk