It allows the website owner to have one site at one URL which utilizes media queries to load a specific version of the website without changing the specific page that the user is on.
The term Responsive Web Design picked up a lot of steam in 2012 and you can expect it to be a trending topic throughout 2013 as well. In this article I will highlight the benefits of responsive web design, then I will show you three live responsive web design examples in use...
Top Three Benefits of Responsive Web Design
1) Internet Usage is Soaring Across a Wide Variety of Screen Resolutions
It is a great day to be a consumer as devices continue to sprout up to feed the needs of the everyday internet user. In the old days people accessed the web through a desktop computer. Then we had laptops, then netbooks, then smartphones, then ebook Readers, then tablets, and so forth. At the same time, as these new devices entered the market and enjoyed growing consumer demand, new companies entered the market offering their unique devices.
We live in an "On The Go” world - and with constant connectivity comes a wide variety of needs. Several major technology companies are clearly motivated to penetrate these new markets.
As a website owner, on the one hand, this is all good news, because constant connectivity will result in more opportunities to get your website in front of potential customers. Remember, in the old days, when someone was on the move, they couldn't access your website, but now they can. This can result in a huge traffic boost for website owners that are successful in serving a need for the "On The Go" internet user.
However, on the other hand, constant connectivity creates headaches because all of these new devices come in a wide variety of screen resolutions. And with each new screen resolution will come a new experience that website owners may be receiving potential customers on.
Traditionally, we had the desktop which usually had a screen resolution of at least a 1280 width and 768 height. Many screen resolutions were higher but you could design for the least common denominator and still offer a solid experience for screen resolutions that were higher.
Then, came the smartphone, which had a screen resolution of roughly 320 x 480. These new mobile phones were the second major experience that website owners had to think about. Then, with the iPad tablet coming in at 1024 x 768, there was a third experience for webmasters to be concerned with.
And now, there are a host of other devices with unique resolutions such as the Amazon Kindle Fire and the Barnes & Noble Nook, which are both 1024×600. Samsung came out with several devices many of which fall into the 480 x 800 resolution category. Usage is clearly growing not just across one new resolution, but instead, across a wide variety of screen resolutions.
This is the issue website owners, web designers, and web developers must consider - how can user experience be great with the wide variety of resolutions that websites are accessed from. And a great solution to this problem is Responsive Web Design.
2) User Experience is factored into Search Engine Rankings
Google Panda first rolled out in February of 2011 and the world of search engine optimization would never be the same again. The goal of Panda was to improve the ranking of high-quality websites in Google while diminishing the rankings of low-quality sites.
Google has released several updates to Panda since its initial rollout and it is clear that Panda is here to stay. Google wants to return great results for its users, and by focusing on boosting the rankings of easy to use websites, Google has improved its search engine results.
One clear takeaway from Panda has been that sites with good user experience metrics, such as low bounce rate, solid time on site, high returning visits, consistent branded search traffic, and low exit rate percentage - have generally performed well in Panda.
But with the huge diversification in devices, high-quality user experience becomes all the more difficult. This is why a Responsive Web Design can be a great solution for website owners, because its goal is to improve user experience which clearly is a goal of Google's algorithm.
To date, Google's results seem to be fairly consistent across different devices. But in the future, as Google becomes more savvy with how it ranks websites based on the device a user is on, a Responsive Web Design could become a great search engine optimization weapon.
Remember, Google Panda wants Google's results to be the most beneficial to its users. Google can satisfy its users by improving the ranking of websites that perform well on a specific device for Google users that are on that specific device.
So, search engine optimization is a benefit to a Responsive site which website owners may not see right away, but over the long haul - it could prove to become extremely beneficial.
3) Google Endorsed It!
Any time Google makes a suggestion regarding a widely debated topic, it is wise for website owners to listen up. For years, the debate raged on about how to handle mobile traffic. At the get go, many websites redirected users to a mobile optimized website on a sub-domain of their website. This remained popular even as new ideas such as Responsive Web Design began to take shape.
But on June 6th, 2012 - the answer to this widely debated question came via a ringing endorsement for Responsive Web Design by Google.
Among other things, when talking about Responsive Web Design, Google said “This is Google’s recommended configuration.”
As a website owner, this is what you want to hear, to have the leading search engine tell you the way to handle mobile traffic. Frankly, it is a stress reliever, because once you know Google's best practices, you can follow them and feel good about your chances for doing well in Google.
One of the major reasons Google prefers Responsive Websites is that Google won't have to index multiple versions of a given website. It costs Google money to keep its index up to date and if Google had to double its index to also include a mobile site for each website that it indexes - it would tax Google greatly.
This of course is also a great benefit of Responsive sites for webmasters, because managing just one site is much easier to do. When you manage two sites, problems arise and challenges take shape that you may not even realize are happening.
Another major reason why Google prefers responsive is that it helps with link sharing. The sharing of links by users is an important ranking factor for websites when trying to rank well in Google, and the process of sharing is much cleaner with a responsive website.
The reason for this is that you don't have to worry about a user sharing a link to a mobile version of a website but then having the link clicked on by another user who is on a desktop - and vice versa.
With a responsive design, there is one URL structure for everyone to enjoy and it makes link sharing, formatting, tracking, and indexing much simpler.
Now that I've detailed the benefits of Responsive Web Design, I'll give you three great Responsive Web Design examples...
1) The Boston Globe http://bostonglobe.com
One of the leading online news publications on the web has made it extremely simple to access its stories and breaking news on any device. The experience is scaled down on smartphones as you can click on sections to see all of the sections or click on search to use the search function - but when visiting the desktop version from a larger screen resolution, you can see all the sections or search directly on the homepage.
From a smartphone, you won't find any links that say view the full version of this site because there is only one version of the site as it is responding based on the device.
Other great attributes to The Boston Globe's responsive web design are that sub pages such as the subscribe page are responsive making it easy for the user to sign up regardless of the device that they are accessing the site from.
Overall, it is pretty fantastic that the Boston Globe can get its important content on the smartphone at the same URL as the desktop pages without the user having to utilize horizontal scrolling on any device. The news experience doesn't skip a beat regardless of the device users access it from.
2) Famous Birthdays http://www.famousbirthdays.com
Our site, Famous Birthdays, is an entertainment and educational website about famous people. Recently it was bolstered by a responsive design. The homepage on a mobile device focuses on the critical content while eliminating the navigational menu in replace of a simple search box.
On smartphones, the profile pages of the famous people are condensed so that the critical information that the users want is offered while some of the related links are removed to help suit a mobile experience.
The responsive design ensures that the content that users are coming to the site for is well optimized and extremely user friendly regardless of the device that is being used.
The ads are optimized as users on a desktop see a 728 x 90 leader board ad while the smart phones display a 320 x 50 mobile ad unit.
The Responsive Design helps the website to load much quicker on smartphones because it is a condensed version of the desktop pages. The need to zoom in or out on both desktop and mobile is eliminated which of course is a key winning principle of successful responsive web design.
3) BarackObama.com http://www.barackobama.com
A clean and simple responsive website did its part in helping to get The President re-elected for a second term. Today, when visiting the site on a desktop, you'll find a large picture of the President with the email sign up form to the right of the picture. On the mobile device, the website responds in a unique way so that the sign up form appears on top of President Obama's picture.
On the desktop, the blog is highlighted down the middle with the title, a picture from each blog post, and the beginning of each story. On the mobile device, the blog is highlighted with only the title of each post.
This is very smart Responsive design, as the desktop design features information and a picture about the respective story, whereas the mobile design gives you just the information that you need to get to the story.
It is an elegant and seamless responsive design as both mobile and desktop pages function flawlessly despite some tricky images and content being displayed on each version of the website.
The Presidents' web team clearly understood the importance of mobile users and they were able to create a fantastic user experience across all devices at one unique destination.
Some people have said that Responsive Web Design was ahead of its time. Others have said it's just a passing fad. I don't agree with those thoughts, and I believe that if you can transition your website into a Responsive Design today, you'll be ahead of the curve and well positioned for the future.
And remember, you can always look at your traffic stats to see which screen resolutions are the most popular for your audience, and you can optimize for the screens which are handling a vast majority of your users.
Once you do that, be sure to keep an eye on the device specific and screen resolution traffic reports because as time passes, those reports may begin to show new screen resolutions which are gaining eyeballs on your website.
- Guest Post by Evan Britton