{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

In early June 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 - http://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 http://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.

Mike Essex

Published 28 June, 2012 by Mike Essex

Mike Essex is Online Marketing Manager at Koozai Ltd and a contributor to Econsultancy. Follow him on Twitter

7 more posts from this author

Comments (24)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Katie Saxon

Excellent post Mike - completely agree with all your frustrations about mobile/desktop versions of sites.

Am I right in thinking that if your site is responsive instead of serving two versions that you won't lose functionality on a mobile? Size issues I can handle, but realising I have to pull my laptop out to do something basic (Pinterest, I'm looking at you) puts me right off.

about 4 years ago

Avatar-blank-50x50

Paul

You should try opening that Guardian site on the standard Android browser on Android Ice Cream Sandwich or Gingerbread. They either interpret it as a download or just should the HTML code - you don't get to see the content. Seems to work fine on iPad though.

about 4 years ago

Avatar-blank-50x50

Adam Foster from Oval Business Solutions

If you are after a video showing responsive websites being resized or are after more information or a responsive website please check out out webpage as we have just won a competition to create a IBM Lotus Notes XPages based responsive website with full content and comments managment.

about 4 years ago

Mike Essex

Mike Essex, Marketing & Comms Manager at Petrofac

Thanks for the comments everyone.

@Katie it tends to depend on the website. In some cases websites are designed to "hide" aspects as they resize down. For the Koozai site we wanted to keep everything there, but some sites remove items so you can quickly read everything on a mobile.

@Paul Wow! It frustrates me that big websites can make such critical errors. Especially when they probably have no shortage of people reporting these errors to them.

@Adam nice video. Every time I find a responsive site I waste far too much time shrinking the browser window to try it out. Always impressive, :)

about 4 years ago

Avatar-blank-50x50

Jason Stearns @ Amprewave

Websites with responsive designs are also much easier to manage and administer. There's less of a chance for errors and inconsistencies to creep in as well.

about 4 years ago

Avatar-blank-50x50

Eric

When you talk about Google "loving" a website, you are generally talking about SEO. In this article, I saw almost no examples as to how responsive design helps your SEO any more that any other single domain design philosophy. All of the comments in this article talked about why responsive is cool, helpful and great for mobile. All those things are completely true. My point was that the headline was not only misleading, it was mostly incorrect.

about 4 years ago

Mike Essex

Mike Essex, Marketing & Comms Manager at Petrofac

@ Jason yep one site and one set of code is a lot easier. As long as you always test on a computer, tablet and mobile setup you'll be sorted.

@ Eric thanks for the feedback. You are correct that responsive design isn't a "silver bullet" that will lead to instant results overnight, or a ranking boost from Google based purely on the fact you use it.

However for many sites it's the best way for them to achieve the single domain design philosophy that you state, especially if they serve multiple sites on different devices. It's a very effective SEO solution making it just as worthy in an SEO arsenal as any other method of streamlining site architecture.

The other point I wanted to stress is that bad mobile experiences mean people are less likely to socially share a site or link to it, meaning less future ranking signals for Google. In addition if users bounce back to Google quickly after landing on a site that's a negative signal showing they didn't enjoy the site.

Ultimately Google wants uses to have a good web experience that's why they love responsive design and the core focus on the article.

about 4 years ago

Avatar-blank-50x50

Colin Towns

Hi

Good article if a little difficult to read on my iPhone - are econsultancy being ironic with their own page design?

How does the use of Iphone Reader play into this as it seems the best way to read web site text at the moment?

about 4 years ago

Avatar-blank-50x50

Jon

Great article and confirms what we've been thinking.. really helpful

about 4 years ago

dan barker

dan barker, E-Business Consultant at Dan Barker

That's a very nicely written post.

In answer to the '"responsive sites (usually) look better" bit - I pointed out before, but the Koozai site only really has 2 or 3 different 'responsive' states.

I think it's often better to design for those 2 or 3 main states, and stick with fixed width at those states, than it is to go fully scaling 'responsive'. With a scaling site, you end up with less control over what users see.

For example, the Koozai site has obviously been really well thought out & carefully put together, but even with that amount of thought & care, you still get ugly 'dead zones' in the scaling. Here are 2 examples, with the screen scaled up/down by a small amount.

You can see that the user coming across one of these gets a much better 'experience' than someone coming across the other:

Good display: http://i.imgur.com/AvCmN.gif
Ugly display: http://i.imgur.com/NAAfG.gif

(ps. I'd left this as a Google+ comment, but thought it might be useful here)

Thanks again for another great post, Mike.

dan

about 4 years ago

Avatar-blank-50x50

Pritesh Patel

Has anyone ever observed the reaction of a non-techy person when they see a responsive design on their phone?

My wife, who is the least techy person you will event meet, recently encountered a website with a responsive design whilst she was surfing the net on her mobile (iphone).....and she hated it. She wanted the original desktop version because she knew where all the links and menu items were located which meant her experience would be much faster than having to scroll down and to find that the link she required wasn't there.

Ok, this is only one persons view and reaction but in my opinion, sometimes and only sometimes familiarity wins.

about 4 years ago

dan barker

dan barker, E-Business Consultant at Dan Barker

That's a great point, Pritesh.

Similarly, I have seen A/B tests of "mobile vs desktop" versions of sites (both tested on mobile) where the desktop version has performed much better.

about 4 years ago

Mike Essex

Mike Essex, Marketing & Comms Manager at Petrofac

@ Colin could you please clarify what you mean by the “iPhone reader”?

@Dan thanks for the feedback and for also posting it here. You’re right that most responsive design tends to fall in to three states. Resizing from desktop to tablet isn’t too much of an issue as there’s not a massive difference but tablet to mobile is the difficult one as you show with the images. The natural solution is to just have everything shrink down on a sliding scale but that caused more issues. Sticking to three also made it easier to test, whilst allowing us to offer a responsive site the resizes on the go. I won’t deny that it’s a big challenge and neigh on impossible to deliver a 100% perfect experience on every device but having 3 size types is a step in the right direction.

@Pritesh For any large site it would definitely be worth doing user testing to determine just how well your responsive site design is received. I’d also recommend adding a “classic site” option on the page that is easy to find. eBay for example offer this in their footer so you can switch to a desktop style experience really easily. Although sadly they don’t remember your choice for next time.

about 4 years ago

Avatar-blank-50x50

Neil Ferree

We're getting ready to roll out a major revision to an OK WP site that we've migrated to RWD site. The thing is, I want the client's phone# and/or his primary CTA to auto render at the bottom of each page, so the mobile visitor can either 1)click his phone to talk now or 2)click his CTA which will probably be a link to contact us page so as to feed the sales funnel w/ qualified interested prospects. Is there a way to globally make this happen?

about 4 years ago

Mike Essex

Mike Essex, Marketing & Comms Manager at Petrofac

@Neil I believe that is something that can be achieved with http://www.infinity-tracking.com but it's worth checking with them first.

about 4 years ago

Avatar-blank-50x50

Sahil Anand

Well, i just read almost everything about RWD, all thanks to Mike.

It's certain that Google and RWD both aim at enhancing our experience, so they are bound to go hand-in-hand, with the latter opening a pool of opportunities for website designers. And i think, we all need to spread the word as yet again we have found something that can change the way people see and perceive the World Wide Web, especially on mobiles and tablets.

Thanks again for a wonderful post!

about 4 years ago

Mike Essex

Mike Essex, Marketing & Comms Manager at Petrofac

@Escobar you are welcome. I'm hoping my next post will also help make spambots think too.

@Sahil it would be amazing if the entire web was mobile friendly. Although with Apple expected to have a bigger screen on their next iPhone, and the new Samsung Galaxy expected to have a 5.5 inch screen that will also help make viewing traditional sites easier in the meantime.

about 4 years ago

Avatar-blank-50x50

Sahil Anand

Indeed, phablets like Galaxy Note have even erased that thin rope between phones and tablets, making browsing all the more beautiful and convenient. But with the rapid development in the mobile world, responsive web design must also take over all sites at a bull's speed. Or else, it would be like pigeons are taking care of our messaging needs yet again, not emails.

about 4 years ago

Avatar-blank-50x50

Myrick

This info is priceless. Where can I find out more?

about 4 years ago

Avatar-blank-50x50

perfect miles

nice post Mike

Thanks again for a wonderful post!

almost 4 years ago

Avatar-blank-50x50

Michele Roper

Great information Mike! There is no other solution that works as well as responsive. Do you mind if I include a link to your article on my website post about upgrading your website to a responsive design? I think you offer an excellent explanation that all can understand.

almost 4 years ago

Mike Essex

Mike Essex, Marketing & Comms Manager at Petrofac

Hi Michele. I'd be happy to be included. Thanks for the kind words.

almost 4 years ago

Avatar-blank-50x50

Oisin Connolly

I'm all for responsive design, and think it really is the best solution...however there's one thing that I've wondered.
What if the mobile user wishes to view the "Desktop" version of the site?
Through media queries you might be reducing content for small devices, but is there a way to disable media queries on the go should they wish to view the site as they would on a full width screen?

almost 4 years ago

Avatar-blank-50x50

Dan Mulhern

If google love responsive design so much, then why do they not support responsive emails in the Gmail app on iPhone? It's a bit disappointing that it does not support media queries

over 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.