What is Responsive Design?
Techie definition: Responsive design is a web development methodology using the same HTML, CSS and JavaScript to serve various platforms that have unique resolutions.
Non-technie version: All it really means is that your website will automatically adjust its size in response to the device being used to visit your site. So whether a user accesses your site from a desktop PC, tablet or smartphone they are shown the same content but optimised for viewing according to the devices resolution.
This is a step away from the pre-2011 tendency to create specific mobile or "mobi" sites - a la m.samesitedifferentplace.com - which used separate code to the equivalent desktop version, creating duplicate maintenance processes and procedures, often at the expense of the mobile version's functionality.
In 2011 responsive design was rolled out by Ethan Marcotte who created the code to help developers maintain one codebase across all screen sizes or resolutions. The key technology used is media queries, which enables a webpage to automatically respond and render the content in a format most compatible to the resolution of the device being used to access the page. Pretty nifty, really!
What is Google's View on Responsive Design?
In 2012, Google announced responsive design as its recommended configuration and promoted it as the standard of web design.
"Sites that use responsive web design, i.e. 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."
Google's recommendation is three-fold:
Eliminates Duplicate Content
Duplicate content - that is the same or very similar content shown on different URLs - is a big no-no from Googles perspective and can harm search engine rankings. In the case of separate desktop and mobile sites you risk being penalised for duplicate content. In the case of responsive design, a single URL is used, which not only makes it easier for users to interact, share and link to your content, but for Google to index and rank the content too.
Increases Speed
With a separate mobile site, redirection is required for users to view the device-optimised site which increases loading time of the site. Loading time is another variable in Google's algorithm for determining rankings, thus you'd want to get this down to the minimum time needed. Responsive design does not redirect traffic, it adjusts the site to the screen size of the device, therefore reducing load times.
Crawling Efficiency
Google has different user agents (crawlers or spiders, if you like) for desktop and mobile sites so in the case of disparate sites, Google needs to use additional resources to retrieve all your content. With a gazillion (perhaps a slight exaggeration there) web pages to index on a daily basis, Google obviously prefers it when it can save its resources and maximise crawling efficiency.
Google then went on to endorse responsive design as best practice for mobile search engine optimisation too.
Why Should We Care About Responsive Design?
It comes down to a key tenet of inbound marketing and that is reach!
We rely on Google (and other search engines) to deliver traffic to our site so that we can wow visitors with valuable, informative, interesting content that converts them to leads and ultimately delighted customers. If mobile sites are not correctly set up from a technical perspective (and it happens more often than you'd imagine) that can negatively impact search engine rankings and therefore traffic too. Probably not wise to bite the hand that feeds you. If Google makes a recommendation on a particular aspect that is going to help them help you expand your reach, well then it's generally polite to take their advice, isn't it?
Then there are the numbers around mobile:
- In 2011 smartphones outsold PCs 101 million to 92 million. (Source: IDC)
- In 2012 tablet shipments hit the 100 million mark. (Source: ABI Research)
- In 2013 one third of all page views in the UK are from mobile devices. (Source: comScore)
These provide rather solid evidence that mobile is growing at a rate of knots and the masses use a myriad of devices to access the internet. If your site is not equipped to deliver the best user experience to each visitor, irrespective of their device of preference, you're going to lose them to competitors that do. And that's just crummy!
Check out our guide to Growth Driven Design for ways to optimise your site for lead conversion.
