Google recommends “Responsive” web design for smartphone optimized website

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.

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