Google Weighs in on Responsive Website Design

Recently we’ve noticed that Google has switched to a partial responsive web design for their maps on Google Search Engine Results Pages (SERPs). They’re also now recommending that mobile sites be built using responsive design.

What is Responsive Web Design?

Responsive web design has been gaining traction in recent months within the web design community. It’s a relatively new way of designing sites to detect a visitor’s browser size and customize the page display to match. You’ll know you’re on a responsive design site when the images change size and the page layout shifts as you resize your browser.

Smashing Magazine’s Responsive Design

Smashing Magazine provides an excellent example of responsive design. Take a look at how their page layout shifts with decreasing browser size.

At 1640 pixels wide:

At 1440 pixel width:


1185 pixels:

1000 pixels:

720 pixels:

400 pixels:

Google’s Partially-Responsive SERP

Google hasn’t gone into a fully responsive design for their search results pages, but they’re moving in that direction.

Take a look at the following screenshots of the Google SERP taken with different browser widths. Notice how the map in the right column changes in size at different browser sizes.

Here’s the SERP at 1180 pixel browser width:

 

Here’s a 1090 pixel browser view (notice the narrower map):

 

And here’s the smallest map for any browser below 1000 pixels wide:

 

Different map sizes are pulled in depending on the size of the browser. This isn’t just a re-scaled version of the same map. It refreshes with a different size as the browser size changes. That’s at least a partial move toward responsive web design for the SERP.

Google Prefers Responsive Web Design

Recently Google also went on record promoting responsive web design as their preferred method for mobile sites.

Google isn’t using a fully responsive site design for their SERPs yet, but I anticipate this is where they’ll head if they take their own medicine.

As WiderFunnel goes into our own cycle of refreshing our site for mobile, we’ll take Google’s opinion into account, and you probably should too.

12 Comments

  1. essay January 2, 2013 at 3:44 am - Reply

    I agree! This can make our google search more easier and fast.

  2. Vergleich WP February 3, 2013 at 6:55 am - Reply

    I agree that Responsive Web Design becomes more important. I'm not sure that it is more expensive. You for example also use WordPress – and there are more and more free responsive themes available with not extra cost. But of course you should test the end result on serveral browsers and screen sizes.
    Thanks for taking the screenshots from Smashing Magazine, impressive example of RWD.

  3. Academic Essay February 26, 2013 at 3:57 am - Reply

    Truly agree! By these, we make an easier search on google search engine.

  4. Matthew March 18, 2013 at 8:59 am - Reply

    Thanks for this. We, web designers need this kind of information.

  5. Milla Emmett March 21, 2013 at 8:20 pm - Reply

    Smashing Magazine’s website is amazing because its easy to use plus the responsive design adds a cooler effect on it. I agree that Google is heading to that direction as well. I am excited to see the changes that they will be making.

  6. Dwayne Bailey March 26, 2013 at 1:36 am - Reply

    If you really want to pursue a career as a website developer, it is a must that you know the latest trend like this one in terms of Google's preferred website design.

  7. Emily lomba April 13, 2013 at 12:40 am - Reply

    On the top of shared some of the screenshots of the Google SERP obtained with dissimilar browser widths. After reading this expose about browser size info, I have to get lots of idea and this is truly enlightening. Please discuss broadly as soon as possible.

    • Andy April 13, 2013 at 10:59 am - Reply

      100% Right! I agree

  8. Bram Groenendaal August 13, 2013 at 8:49 am - Reply

    Nice article, mobile usage is growing very fast so i have a question to you guys.
    Is someone familiair with the costs of a responsive website?
    and is a responsive website always valuable?

    Thanks for the article and keep up the good blogs :)

    • @chrisgoward August 13, 2013 at 9:14 am - Reply

      Most websites would benefit from being responsive, especially as varying screen sizes continue to proliferate.

      It is more complex than building a single web page dimension, which means higher cost. But there are ways to reduce the cost: minimize the number of break points to 2 or 3, start with a pre-built RWD template and optimize from there, hire experts who are familiar with RWD.

  9. Bram Groenendaal August 14, 2013 at 5:50 am - Reply

    Thanks Chris for your fast response!
    I am going to discuss RWD with my partners.

    a different question, how many hours are you spending at your blog?

    • @chrisgoward August 14, 2013 at 9:05 am - Reply

      The blog is a constant companion, Bram :-)

      I'll often make audio notes as walk to meetings and jot some lines on the iPad while on the train. I spend a few hours/week writing, whether it's for this blog or others. I wish I had more time for writing, actually. It's a fun part of the job!

Leave A Comment

WP Socializer Aakash Web