Why Google loves responsive design (and you should too)

willspring55, October 25, 2013

By M Essex

In early June 2012 the official Google blog came out with a definitive stance on recommendations for smartphone optimized websites.

This blog post explains how you can abide by these recommendations to keep Google and your visitors happy.

Most important of all, Google identified one type of website as the preferred solution:

Sites that serve all devices on the same set of URLs, with each URL
serving the same HTML to all devices and using just CSS to change how
the page is rendered on the device. This is Google’s recommended configuration.

This means that to ensure your website is optimised in the best way for mobiles and for search engine spiders, responsive design is the best way to go.

The above also provides a very good description of what a responsive
site is, but it doesn’t go in to the reasons as to why it makes Google
so happy.

Below I’ve detailed not only the reasons Google loves responsive
design, but also reasons why the visitors to your website will enjoy it.
After all, a new website design that pleases search engines but which
turns people away from your site is of no use.

Responsive sites attract more links to key pages

If your website only has one URL for each page then the links
attracted to those pages will be higher than if the same page was at
multiple URLs. Likewise if your mobile website sits at a different
subdomain then the power of those links would be weakened.

For example on IGN I could link to:

Mobile – m.uk.ign.com/articles/2012/06/07/e3-2012-ghost-recon-still-coming-to-wii-u

Desktop -http://uk.ign.com/articles/2012/06/07/e3-2012-ghost-recon-still-coming-to-wii-u

IGN sidesteps this by using a canonical tag that links the mobile
version to the desktop version, but it’s by no means as neat as a
responsive design (and looks awful if people view the wrong one).

Responsive sites can be shared more easily

Every time I click a link on Twitter to be taken to a mobile version
of a website it’s incredibly frustrating. The page will either resize to
fill my browser (but with none of the graphics or design of the live
site) or remain fixed in a thin column. Neither of these experiences
make me want to explore the site, or to read more.

If I tweet a link to The Guardian it would appear something like this m.guardian.co.uk/, which looks awful on a PC. It doesn’t detect my device or resize.

Guardian Mobile

So when I view a site on my mobile, that has a specific mobile URL,
I’m less likely to share it as I’m aware that people who see it may not
see a device friendly version.

On the flip side if I read a site on my mobile and it doesn’t resize
to fit the screen I’ll enjoy reading the article less, and also be less
likely to share it.

Responsive sites can be indexed

An alternate to building a mobile website is to build an app that
offers the same information. The problem in this case is that Google
can’t index apps and therefore won’t find the content or be able to
explore it.

In addition, any user generated content that people add exclusively
to the app won’t be indexed or offer any benefit to the main website.

A responsive website still shrinks down nicely to a mobile screen
like an app, and all of the content you see is also available to search
engines. I’m not suggesting an app is never a good idea – Amazon, for
example, has a mobile site and an app which share the same data and that
works well.

Amazon mobile vs app

In addition to easier indexing, a responsive website has to be
crawled less as a set of URLs need only be accessed once for the
content. It’s the same as if you have duplicate content or canonical
issues on a normal website.

These issues distract the Googlebot from your core content, and
that’s not ideal. As responsive sites share code Googlebot has got a lot
less work to do to find your content.

As Google states:

We wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.

If Google is happy, then your rankings will be.

Responsive sites keep readers happy

Similar to my point about being frustrated when social shares return
the wrong URL for your device, I also find mobile browsing frustrating
when viewing a website that is poorly optimised for mobiles.

This is likely to impact the time I spend on the website, and raise
my bounce rate – two factors which Google can track based on when I
return to the search engine.

I read Digital Spy on my mobile instead of Radio Times
as it looks great. In addition the BBC News Homepage for example is
borderline unreadable on an iPhone without significant zooming in.

BBC

Therefore if I return to Google quickly after landing on a page, they
can see that, as a user, I didn’t enjoy the page, and as a ranking
signal that’s not good for that particular website.

Plus I’m less likely to visit that site again in the results; another
negative ranking signal. However if I find a mobile site that is
optimised well, I’m far more likely to explore the site and give a
signal to Google that my search query was answered.

Responsive sites work on multiple devices

A lot of sites that claim to be mobile friendly are simply set to
resize based on a number of pre-set devices. So if Apple make their
iPhone 5 a larger size, then the developer has to go in and create a new
variation. It’s messy and not a future proof strategy.

Truly responsive design will scale based on the size of the window.

So with the Koozai website we made it so you can drag the web window
down and it scales step by step. Alongside that we also resize images,
video content and more accordingly to fit the window.

Any developer could release a new device tomorrow and the site would
scale. It gives a great deal of freedom and makes a site far more future
proof than set rules.

Responsive sites (usually) look better

In the last year it seems like a lot of websites have made their core
images and selection option larger, so they are easier to select on a
tablet. For example Game and Play used to be nicely designed sites.

Now they are so obsessed with large ‘shouty’ buttons and blocks of
text that the original clean design has been lost. A responsive design
does away with these issues, by allowing you to set different designs
that best suit the screen size people are using. You can build a site
that looks amazing on each browser rather than one that looks great on
only one device.

Try the Fork CMS website to see this in action (drag the window size to see how the top nav changes from text on a PC to icons on a tablet).

How do I get started?

I hope this helps make the point that responsive design is a vital part of the future of the web. This Smashing Magazine article does a great job of explaining the basics of responsive design so you can get started and .net have a solid roundup of the tools you’ll need to develop these concepts.

Leave a Reply

Your email address will not be published. Required fields are marked *