Google And Responsive Design
Website management is being driven by the demand of smartphone sales and growth. According to Gartner, Worldwide mobile phone sales to end users totaled 455.6 million units in the third quarter of 2013, an increase of 5.7 percent from the same period last year, according to Gartner, Inc. Sales of smartphones accounted for 55 percent of overall mobile phone sales in the third quarter of 2013, and reached their highest share to date.
Google supports three different configurations for creating smartphone-optimized websites:
Responsive design: serves the same HTML for one URL and uses CSS media queries to determine how the content is rendered on the client side. This removes the possible glitches of user-agent detection and frees users from redirects. This is Google's recommended configuration.
Dynamic serving: serves different HTML for one URL depending on the user-agent. Use the Vary HTTP header to indicate you're doing this.
Separate mobile site: redirects users to a different URL depending on the user-agent. Use bidirectional link annotations to indicate the relationship between the two URLs for search engines.
Responsive web design is a framework where the server can communicate HTML code to any mobile device and CSS to alter device page media queries. Google algorithms are aimed to automatically detect setup.
A CSS media query recommended by Google to use for smartphones is:
@media only screen and (max-width: 640px) {...}
The max-width value of 640px shown above is an example, not a requirement. The Google algorithms look for max-width values that can be reasonably expected to refer to smartphone screen resolutions. Google then monitors what typical mobile websites use and may update our algorithms accordingly in the future.
Google’s blog states that it supports all the different ways the standards allow for using media queries in the developers code. Each implementation technique has pros and cons. As a general rule, if the site works in a recent browser such as Google Chrome or Apple Mobile Safari, it would work with Google’s algorithms.
Why responsive design
We recommend using responsive web design because it has many good aspects:
Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content, and a single URL for the content helps Google's algorithms assign the indexing properties for the content.
No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user agent-based redirection is error-prone and can degrade your site's user experience (see "Pitfalls when detecting user agents" section for details).
It saves resources for both your site and Google's crawlers. For responsive web design pages, any Googlebot user agents needs to crawl your pages once, as opposed to crawling multiple times with different user agents, to retrieve your content. This improvement in crawling efficiency can indirectly help Google index more of the site's contents and keep it appropriately fresh.
Visit Google’s Blog for more about responsive web design at their blog post on Webmaster Central.