Google recommends “Responsive” web design for smartphone optimized website

October 29, 2012



I was recently asked which website configuration to use in order for a website to be smartphone optimized and thus, I was off on a quest to find the answers.  Below are my findings.  Enjoy.

A Companion

The situation:

To put things in context, there are generally three different configurations for a smartphone optimized website that Google supports:

  1. Responsive web design:  This is where the website and it’s content will adjust to the screen it is being viewed on.  For an example of responsive website design, look at this site on your smartphone or tablet, or just grab the browser window and shrink the site down.  Notice, this site also uses the same url’s on the mobile devices (i.e. smartphones) as it does on the regular browser and the different views are created using a mixture of CSS and Javascript.  Same site, different views, with each view optimized for each device.
  2. Sites that serve the same urls but provide different HTML to each device:  An example of this would be a website that is served as a flash site in the desktop browser and as a regular HTML site in the mobile browser with both versions using the same URLs.
  3. Sites that have a desktop version and a separate mobile version:   An example of this would be  www.examplewebsite.com and m.examplewebsite.com.  Two different versions of the site, with different 2 different urls.

Also, it should be noted that Google defines smartphones as “Phones with browsers that render normal desktop pages, at least to some extent. This category includes recent mobile browsers that can render HTML5, and covers a diversity of devices, such Android-based phones and iPhones.” - Google

Background:

I always went with “responsive” website design for building smartphone optimized websites just because this configuration made more sense to me.  You see with responsive design, your mobile website address is the same as your regular address, you don’t have to deal with visitor re-directions to a different domain or sub-domain and you can directly control how your content displays in the different size screens, all from the same place, using the same code.  Less mess overall and less to keep track of, both for me as a developer and for my clients as well.

The Research:

Being that my tendency to use responsive web design was just based on my opinion, I decided to dig a little deeper and lo and behold… Google agrees with me. :-)

I found on the Google WebMasterCentral blog the answers to my smartphone optimized website questions and here they are:

 ”1. 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. This is Google’s recommended configuration.

~Recommendations for building smartphone-optimized websites- Google

This is all well and good but it left me begging the question “Why?”  and as usual, the powers that be at Google had an answer for this too:

“[Google] 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.”

~Building Smartphone-Optimized Websites – Google

What does it all mean?

So what does all of this mean?  Well for starters, it seems Google wants to do as little extra work as possible to crawl, analyze, figure out and relate smartphone optimized websites and thus, the easier we make it for Google, the better.

Serving multiple URLs for the same content, as in config #3, has it’s uses but really doesn’t make Google’s task of indexing those files and relating them all back to each other any easier.  The same goes with serving one type of content on the desktop browser and a different type of content on the mobile browser, config #2.  More difficult for Google to understand right?  I think so.  Lastly, we come to responsive website design, Google’s recommended configuration, where the style of the page changes to meet the device (smartphone, tablet, etc.) but same website content is served using the same URLs, making Google’s task that much easier.

Other Advantages of Responsive Website Design:

There are other advantages to having a responsive smartphone optimized website such as:

  1. One web address for your customers to remember.
  2. Less development time and testing since the only thing changing is the display of the site.
  3. The functionality of the live site can be applied to the smartphone optimized version (to the extent the mobile browser allows).

Smartphone Optimized Websites and You.

If you don’t currently have a mobile website, consider making your regular site responsive so you can provide the growing number of mobile users with an optimized version of your site, just for them.

Shameless plug:  We can create a custom responsive website for you or convert your existing site into a responsive website optimized for smartphones.  For more information on this service, contact us right now.

If you have a response, objection, rebuttal, thought, or well, anything to say about this topic, please post a comment below and let’s discuss it.

Thank you for reading and have a wonderful day.

-Big Cloud Media

 


4 Responses to "Google recommends “Responsive” web design for smartphone optimized website"

  1. On August 11, 2013 window graphics posted...

    "Great post. I used to be checking continuously this weblog and I am inspired! Very helpful info specially the closing part :) I care for such info much. I used to be seeking this particular info for a very lengthy time. Thanks and best of luck."

  2. On August 11, 2013 Web-Design and Development posted...

    "Hi Access Control. The "Conditional Captcha" plugin is pretty awesome and I recommend it highly (http://wordpress.org/extend/plugins/wp-conditional-captcha/). There is also the "SI CAPTCHA Anti-Spam" plugin which is easy to use (http://wordpress.org/extend/plugins/si-captcha-for-wordpress/) and effective."

  3. On August 11, 2013 Access Control posted...

    "Hey there! I know this is kinda off topic but I was wondering if you knew where I could get a captcha plugin for my comment form? I'm using the same blog platform as yours and I'm having problems finding one? Thanks a lot!"

  4. On August 11, 2013 lambethsolicitor.com posted...

    "I almost never drop comments, but after browsing through a great deal of responses on Google recommends "responsive" for smartphone optimized website. I actually do have a few questions for you if it's okay. Is it just me or do a few of the remarks come across like they are written by brain dead people? :-P And, if you are writing on additional social sites, I'd like to keep up with anything new you have to post. Could you list of the complete urls of your social networking sites like your twitter feed, Facebook page or linkedin profile?"

Leave a comment and tell us your thoughts:



Google recommends “Responsive” web design for smartphone optimized website

October 29, 2012



I was recently asked which website configuration to use in order for a website to be smartphone optimized and thus, I was off on a quest to find the answers.  Below are my findings.  Enjoy.

A Companion

The situation:

To put things in context, there are generally three different configurations for a smartphone optimized website that Google supports:

  1. Responsive web design:  This is where the website and it’s content will adjust to the screen it is being viewed on.  For an example of responsive website design, look at this site on your smartphone or tablet, or just grab the browser window and shrink the site down.  Notice, this site also uses the same url’s on the mobile devices (i.e. smartphones) as it does on the regular browser and the different views are created using a mixture of CSS and Javascript.  Same site, different views, with each view optimized for each device.
  2. Sites that serve the same urls but provide different HTML to each device:  An example of this would be a website that is served as a flash site in the desktop browser and as a regular HTML site in the mobile browser with both versions using the same URLs.
  3. Sites that have a desktop version and a separate mobile version:   An example of this would be  www.examplewebsite.com and m.examplewebsite.com.  Two different versions of the site, with different 2 different urls.

Also, it should be noted that Google defines smartphones as “Phones with browsers that render normal desktop pages, at least to some extent. This category includes recent mobile browsers that can render HTML5, and covers a diversity of devices, such Android-based phones and iPhones.” - Google

Background:

I always went with “responsive” website design for building smartphone optimized websites just because this configuration made more sense to me.  You see with responsive design, your mobile website address is the same as your regular address, you don’t have to deal with visitor re-directions to a different domain or sub-domain and you can directly control how your content displays in the different size screens, all from the same place, using the same code.  Less mess overall and less to keep track of, both for me as a developer and for my clients as well.

The Research:

Being that my tendency to use responsive web design was just based on my opinion, I decided to dig a little deeper and lo and behold… Google agrees with me. :-)

I found on the Google WebMasterCentral blog the answers to my smartphone optimized website questions and here they are:

 ”1. 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. This is Google’s recommended configuration.

~Recommendations for building smartphone-optimized websites- Google

This is all well and good but it left me begging the question “Why?”  and as usual, the powers that be at Google had an answer for this too:

“[Google] 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.”

~Building Smartphone-Optimized Websites – Google

What does it all mean?

So what does all of this mean?  Well for starters, it seems Google wants to do as little extra work as possible to crawl, analyze, figure out and relate smartphone optimized websites and thus, the easier we make it for Google, the better.

Serving multiple URLs for the same content, as in config #3, has it’s uses but really doesn’t make Google’s task of indexing those files and relating them all back to each other any easier.  The same goes with serving one type of content on the desktop browser and a different type of content on the mobile browser, config #2.  More difficult for Google to understand right?  I think so.  Lastly, we come to responsive website design, Google’s recommended configuration, where the style of the page changes to meet the device (smartphone, tablet, etc.) but same website content is served using the same URLs, making Google’s task that much easier.

Other Advantages of Responsive Website Design:

There are other advantages to having a responsive smartphone optimized website such as:

  1. One web address for your customers to remember.
  2. Less development time and testing since the only thing changing is the display of the site.
  3. The functionality of the live site can be applied to the smartphone optimized version (to the extent the mobile browser allows).

Smartphone Optimized Websites and You.

If you don’t currently have a mobile website, consider making your regular site responsive so you can provide the growing number of mobile users with an optimized version of your site, just for them.

Shameless plug:  We can create a custom responsive website for you or convert your existing site into a responsive website optimized for smartphones.  For more information on this service, contact us right now.

If you have a response, objection, rebuttal, thought, or well, anything to say about this topic, please post a comment below and let’s discuss it.

Thank you for reading and have a wonderful day.

-Big Cloud Media

 

Tags: , , ,

Category: Helpful Info, The Buzz


4 Responses to "Google recommends “Responsive” web design for smartphone optimized website"

  1. On August 11, 2013 window graphics posted...

    "Great post. I used to be checking continuously this weblog and I am inspired! Very helpful info specially the closing part :) I care for such info much. I used to be seeking this particular info for a very lengthy time. Thanks and best of luck."

  2. On August 11, 2013 Web-Design and Development posted...

    "Hi Access Control. The "Conditional Captcha" plugin is pretty awesome and I recommend it highly (http://wordpress.org/extend/plugins/wp-conditional-captcha/). There is also the "SI CAPTCHA Anti-Spam" plugin which is easy to use (http://wordpress.org/extend/plugins/si-captcha-for-wordpress/) and effective."

  3. On August 11, 2013 Access Control posted...

    "Hey there! I know this is kinda off topic but I was wondering if you knew where I could get a captcha plugin for my comment form? I'm using the same blog platform as yours and I'm having problems finding one? Thanks a lot!"

  4. On August 11, 2013 lambethsolicitor.com posted...

    "I almost never drop comments, but after browsing through a great deal of responses on Google recommends "responsive" for smartphone optimized website. I actually do have a few questions for you if it's okay. Is it just me or do a few of the remarks come across like they are written by brain dead people? :-P And, if you are writing on additional social sites, I'd like to keep up with anything new you have to post. Could you list of the complete urls of your social networking sites like your twitter feed, Facebook page or linkedin profile?"

Leave a comment and tell us your thoughts:






Copyright 2012 Big Cloud Media | Designed and Developed by Big Cloud Media |