Responsive design is a design and development approach that allows your site to respond to the user's behaviour and environment, based upon the screen size, orientation and platform.
Key features are a flexible grid, flexible images and CSS media queries that configure the design elements and content based upon screen resolutions.
All browsers currently support CSS media queries, including those on PCs, Macs, and iOS, Android, Symbian and Blackberry devices, making responsive design universal.
When you have a website that adapts to multiple screen sizes your content looks good on desktops, laptops, tablets, e-readers and smartphones.
It should be noted that "responsive" does not mean "looks the same on every platform." (That would be non-responsive.) A page that shows 4 widget columns on a desktop or horizontal tablet, may only have 3 columns on a vertical tablet or e-reader, and a single column on a smartphone. The content blocks reconfigure on the fly to provide the best experience for the visitor’s screen.
At this time there are roughly 2 billion smartphone users*, making up 83% of internet usage, and there are expected to be 5 billion smartphone users by 2017†.
Constantly zooming in and out, and scrolling from side to side, just to read or do anything, is an agonizing process for mobile users. If your bounce rates are higher than 5%, one of the factors driving your audience to the competition may be a poor mobile user experience.
“Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.”‡
According to a study released by Google, “What Users Want Most From Mobile Sites Today,” conducted by Sterling Research and SmithGeiger in July 2012,
Before responsive web design, developers had to build unique versions of a website for specific screen sizes. It was complicated, expensive and sites that accommodated several screen sizes tended to take a long time to build and test. Some developers still build multiple versions of the website: a core site for desktop computers and perhaps one or two mobile versions.
Some entry level “mobile-friendly” add-on solutions will have a desktop site and a redirect to a one-size-fits-all mobile site. The mobile site will usually be a very stripped down version of the mother site, and often these are auto-generated by a third party provider. At best, these should be considered a stopgap, while a proper website is developed and rolled out.
In a typical integrated 3-site “built for mobile” approach, with desktop, tablet and smartphone variations, you will have 3 sites that initially will be designed and built. You will also have to maintain and upgrade the three sites if any technology, web standards or security updates become necessary.
Responsive design means “one site, many devices.” With responsive web design there is only one design to consider because media queries, fluid grids and flexible images conform content to the screen. There’s only one site to design, develop and maintain.
With a responsive website you don’t require a separate mobile SEO strategy. There’s only one version of the content to optimize, so the cost of content creation and SEO should be significantly lower for the life of the site. And while there may be some minor advantages to optimizing a separate mobile version for specific keywords more likely to be searched while on the go, the added costs associated with multiple sites may be hard to justify.
Whether it’s a home, car, pair of jeans, pizza or roof repair, first searches often occur on a mobile device. The research process then transitions to the desktop.
A woman searching for luggage during a lunch break may decide to read the entire page, check reviews and testimonials, and study other associated information at home, where she will have a larger screen and the option of printing out a record of the transaction, should she decide to proceed. So she texts or emails herself the page link. She expects to pick up exactly where she left off on her smartphone.
With a “responsive” website, she will load the very same page she was on earlier, only the content will conform to the larger screen size, once again providing her with the optimal user experience.
However, if she was on a “mobile” version of the site earlier, a redirect to the desktop site may provide a different version of the content and experience, and she may be confused or disappointed enough to return to Google to begin a fresh search.
Higher rankings on Google, Yahoo! and Bing will make you more “findable,” increasing traffic to your site. They can’t buy from you if they can’t find you. With more qualified visitors to your website, you will receive more buyers.
With only one version of your website, there will be no duplicate versions of pages to compete with for rankings. While a properly built mobile site shouldn’t be punished by Google’s Panda algorithm, you would still run the risk of sending visitors to the wrong version of the site.
Another consideration is social media and inbound links. If your off-site content is excellent, you should earn shares and links. With a responsive website, all traffic will be sent to the same content URLs. There will be no confusion in designing, building and fine-tuning your conversion funnel strategy.
If you know the value of each lead or sale, how many of these conversions your site currently experiences each month, and your bounce rate, you can calculate the approximate cost of business that is abandoning your website at hello.
Not all bounces will, of course, be related to mobile user experience. Some may be leaving because the content on the key entry pages needs to be recreated with better copy and calls to action.
If your site does not offer a quality user experience for mobile users, you want to look for some correlation between mobile users and bounces. If you discover that 38% of your visitors are using mobile devices, for example, and you have a 36% bounce rate, providing a premium mobile experience could potentially reclaim most of the business you’re driving away.
Responsive web design is recommended by Google as a best practice. It allows you to offer a great user experience across many screen sizes and devices. And it makes managing your content and SEO strategy a lot easier. You could be leaving a lot of money on the table by not becoming responsive.
Do you have a before/after success story to share? I welcome your comments and questions below.
If you’re not sure if your site is responsive, or would like to discuss upgrade options, a free 20 minute coaching call could be a game changer for you.
* http://www.dazeinfo.com/2014/01/23/smartphone-users-growth-mobile-internet-2014-2017/
† http://mashable.com/2013/10/03/mobile-phones-2017/
‡ https://developers.google.com/webmasters/mobile-sites/
§ http://googlemobileads.blogspot.ca/2012/09/mobile-friendly-sites-turn-visitors.html
Hey Cole!
How are you man? I think we have been talking too much about responsive themes but still, there are people who doesn't give much thought on that.
With now the mobile friendly tag, I am sure people are going to turn heads and yup!
*PS I think websites without responsive features is REALLY annoying 🙂
Thanks for sharing and appreciate the write up man.
Hi Reginald,
I think we still have much educating to do. I still encounter business people that believe their site is mobile friendly simply because it shows up in their phone, without the layout breaking up. Zooming in and out constantly, and scrolling side to side, to do anything at all, seems like an acceptable process for viewing the website on their device. They believe that "responsive" somehow means "looks exactly the same" on every device. No, I tell them, that would be 100% non-responsive. 🙂
Cole
Hey Cole
I was using my iPhone to read a couple of blog posts the other day and it's remarkable that there are still so many non-responsive sites out there.
A couple of people's blogs who I regularly visit on my desktop were annoying and fiddly to read on my phone. I had to scroll from left to right and zoom in. I gave up in the end.
Feedly makes it easier to read things on a mobile but then not everyone has their full RSS feed on.
As you said to Reginald, there's definitely more educating to be done!
Hi Tim,
Yes, it is baffling that so many website owners who rely on their websites for business have not upgraded to a responsive design. On many sites, roughly half of the e-commerce and form conversions come from mobile devices. Evidence suggests that Google favors fully responsive websites in their rankings, so they're losing traffic. Non-responsive sites hurt business owners where it really counts, on the balance sheet; so I can only conclude they are unaware of how much it's costing them.
Cole
[…] keeps your content on the same web address regardless of how someone is viewing your site. It also makes their life easier because they only have one web address to […]