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:
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.
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.
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.
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.
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.