Google Recommends Responsive Design for Smartphone-Optimized Sites

This week, Google (News - Alert) finally broke its long silence when it comes to suggesting best practices for mobile SEO, where the company’s Webmaster Trends Analyst revealed a series of new guidelines and recommendations suggesting responsive design to be the best option for building out Websites for smartphones.

However, Pierre Far, Google’s Webmaster Trends Analyst, says the use of device-specific HTML is still effective, as long as designers follow steps to communicate when using device-specific HTML.

Why Responsive Design?

Because a design that serves all devices on the same set of URLs (Responsive) makes it easier for users to interact with the website, for Google’s link algorithms to function, and for Google to crawl more of the Website.

The Three Primary Configurations for Smartphone-Optimized Websites Include:

1. Sites that use responsive Web design – Google recommends this approach because these sites serve all devices on the same set of URLs (each URL serving the same HTML to all devices) and only requires CSS (News - Alert) to change how the page is rendered on the device.

2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether its a desktop or a mobile device.

3. Sites that have a separate mobile and desktop sites.

A Bit About Responsive Web Design

Essentially, responsive Web design is a technique to build Web pages that alter how they look using CSS3 media queries. For Web designers, the concept should be pretty straight forward; it is the method of developing a Website that allows the layout to change along with a user’s computer screen resolution.

This affects:

·          Layout (including menus)

·         Image/video size

·         The amount of text that can be viewed on a page, as the browser size is reduced

This results in prioritized sites that aim to keep the most important elements on screen regardless of browser size and orientation; hence, its importance when it comes to smartphone use.

Using Device-Specific HTML

It won’t always be possible to deploy a responsive Web design. In this case, Google suggests having websites serve equivalent content using different, device-specific HTML that can be served on the same URL (aka dynamic serving) or different URLs.

Way back in 2011 (this is Web design we are talking about), Google introduced a new mobile user agent for Googlebot-Mobile Smartphones designed to detect mobile content.Due to this, if your website uses a dynamic serving configuration, you should use Vary HTTP header to communicate to caching servers and Google algorithms that the content changes for different user agents that are requesting the page.

If your website is Employing a Separate Mobile Site Configuration:

·         Google recommends annotations to communicate to Google algorithms that will signal your desktop and mobile web pages are serving the same intent.

·         These annotations signal the algorithm that they should be treated as a single entity with each alternative targeting a specific class of device.

This is ultimately going to allow Google to more efficiently crawl your Website and, in turn, increase your mobile SEO.

“These annotations will help us discover your smartphone-optimized content and help our algorithms understand the structure of your content, giving it the best chance of performing well in our search results,” wrote Far on the company’s blog.