Google Recommends Responsive Design for Smartphone-Optimized Sites

Responsivedesign

Google finally this week broke its long silence when it comes to suggesting best practices for mobile SEO. The company’s Webmaster Trends Analyst announced a series of new guidelines and recommendations that suggest responsive design is the best rout traveled when 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.
  • For Google to crawl more of the website.

The three primary configurations for smartphone-optimized websites.

1. Sites that use responsive web design – Google is recommending 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 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.

It affects:

  •  Layout (including menus).
  • Image/video size.
  • The amount of text that can be viewed on a page as the browser size is reduced.

The result are sites that aim to keep the most important elements on screen and prioritized regardless of the browser size and orientation. This is why it is so important for use on smartphones.

For using device-specific HTML.

It won’t always be possible to deploy a responsive web design. In that 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.
Because of 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 changse 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 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.

What do you think? Let us know if responsive design is the best answer when it comes to optimizing for mobile SEO. If you have any questions, please comment below or find me on Twitter @tngray99

Subscribe to
Our Newsletter

Comments

  1. Yes, because many people are now searching through their mobile phones for the products they want to buy. So, we need to have a responsible design for mobile phones or smart phones..

  2. Pingback: Vertiopia DDS Ltd | Mobile Website vs. Native App vs. Mobile Web App

  3. Pingback: Can I make my website mobile-friendly or do I need a separate website? | Hello World Uganda

Leave a Comment on this post

*
*