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.