Responsive Web Design allows a website to respond to the particular device that accesses it to give the user an optimized and easy experience.
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
About Lynn Terry
I couldn't agree with you more on this topic. Responsive web design also forces us to simplify the age layout too which is a good thing. I've been using responsive designs on Genesis since Studiopress decided to go that route. Never looked back.
Good post Evan,
This is a good reason to get a premium design theme that supports multiple device resolutions.
If you have the budget then I would invest there if you don't then I would get a MOBILE ONLY theme.
Mobile themes tend to look good on laptops and tablets but they look great on smart phones as they automatically adjust to the smaller resolution. No scrolling side ways.
The truth is more and more people are using the internet from mobile if you are not taking advantage you are missing out big time.
What every you do don't spend a bunch of money on design, responsive or not. It would be much better spent on advertising or training. Knowing what to do is invaluable.
Well great tips & thanks... But do you think it is better to avoid flash content? I mean, does it really affect the google ranking? On the other hand, ipad & iphne still have difficulty in reading some versions of flash...
Great post. Had not thought about mobiles from this angle (but I think I better start).
Always something new to learn 🙂
Hi Evan, There seems to mad rush to make everything iPhone or iPad friendly. I own neither of these devices. But I have had a look at my site using my own Nokia mobile phone. And it looks OK apart from the fact that I have to play with the controls on my phone a little bit to view my blog.
That is a great post Evan, and thanks for the website examples.
I don't believe responsive web design is ahead of it's time or a fad. More and more people are viewing websites, and shopping online using their tablets or mobiles - it only makes sense to cater to these people and make their surfing experience more enjoyable.
This is a very good topic for web marketers to become aware of. All those different screen sizes translate to a constant headache for a web designer, but a sharp marketer can turn the tables to her/his favor. One thing that's always been painfully obvious to me is that simplicity is almost always better than complexity in web page structure. The fewer bells and whistles you have the better.
I tried several WordPress mobile plugins and found most faulty or lacking, but I manage pretty well with one called WPtouch. It's just a plugin that's invisible to the desktop user, but is detected by mobile devices, then brings up a completely separate page theme-- single column with mobile-style buttons. You can download it at WordPress.org.
In my opinion, next year is going to be the year of responsive design. Also, we are going to see the shift from the dominance of text content to audio visual content this year. You had showed some important points. Great!
Web design, no doubt, is the most important aspect of a website's success, I have experienced it myself!
The biggest advantage to web designers is the fact that you only need one web structure. The challenge is to have the design be flexible enough to adapt to the various devices and not sacrifice the advantages of bigger screens, all the while retaining the look and feel that is desired.
With WordPress, there are plugins which can handle this somewhat (although the design is lost) and themes. Having a theme that can detect and respond to different devices is the most powerful way to approach it.
Responsive web design I think is the new baseline for a professional website. When your visitor may be visiting your site from a device with anything from a 3" low resolution screen to a massive 30" desktop monitor and everything in between how can it not? I had thought it would settle out to phone/tablet/monitor but that line has been blown away with the Nexus line (4, 7 and 10), iPad mini and have you seen the Samsung Note II? A phone with a 5.5" screen and a stylus?!
For more specialized sites a separate mobile theme might make sense or even an app.
I recently started using responsive themes and design elements on my site and have seen a great result. The biggest benefit I've seen was that my site fits perfectly on all browsers and adapts easier to change. Thanks!
Hi Lynn,
Responsive website design is really a boon for the designer. It makes the website flexible enough so that it can easily change its orientation depending upon the device.
If flash is a good way forward for mobilization, perhaps it will be more acceptable by Google in the search rankings now?
Flash is not good for SEO for the same reason that video and audio aren't. Google cannot tell what it is about. With text, you can have a computer algorithm scan the words and determine (to some degree) what the content is about. There is nothing yet that can do this with audio, video, etc.
Creating a new site is a much better idea than converting an existing site a little bit at a time which tends to be confusing and can cause broken links and other headaches.
I'm a little late on this post, but I found it via SEOmoz and I just had to comment since I'm "still" a fan of Lynn Terry hehe!
In late 2011 I started using a WordPress theme for Local Businesses that had automatic mobile response and touch built into it... it just made sense to me. However, since I've taken nearly a year off from online business.... I just recently noticed that StudioPress is rolling out responsive themes, Awesome! I bought the developers package of StudioPress in '08 or '09 and I'm now building sites again for local businesses. Perfect timing!
Thanks Lynn!