How Responsive Design Can Boost Mobile Conversions

By Arun Sivashankaran

conversion, cro, mobile

Do you have a mobile problem?

Maybe you’re getting plenty of mobile traffic, but a look at your analytics shows low time-on-page and high bounce/exit rates from mobile users.

Or maybe your mobile traffic sticks around, but conversion rate is abysmally low–and you’re not sure why.

With the mobile market growing at an astounding rate, what might look like a small problem at first can quickly snowball into something much worse. On the flipside, if you can address a mobile problem while it’s still small, the payoff can grow exponentially too.

SSF BART exit signs

Take this example from WebUndies.com: between a website built specifically for mobile devices and a tablet-optimized catalog, the retailer saw mobile commerce sales of $168,000 in 2012, which was 5.4% of their total sales of $3.1 million. While 5.4% might seem like a tiny slice of the pie to optimize for, that was up 169.2% from the year before, when their mobile commerce sales were only 3.0% of total sales of $2.1 million. As mobile grows, so will the retailer’s additional revenue.

And mobile will grow. According to CNN Money, wireless data traffic will keep expanding by 66% per year for the next 5 years, and that’s not even including mobile users taking advantage of WiFi sources, which could provide up to 4 times more data than cellular networks.

Clearly, everyone should be taking advantage of their mobile traffic. Not only does fixing a mobile problem put more money in your pocket as more and more people access your website from their tablets and smartphones, but it also boosts usability and customer experience, important considerations for word-of-mouth, repeat purchases, and great testimonials.

So how do you solve mobile problems?

In my view, responsive web design may be the best solution. Here’s why:

Responsive design is likely to become a web design best practice in the next few years, because it helps businesses cater to their customers through a variety of channels and devices, and because it makes the mobile user experience so much cleaner and easier. Responsively designed websites respond to the device accessing the site to align the content with the parameters of the device. That means no content is lost or hard to see.

With no cumbersome side-scrolling, tricky pinching and panning, tiny text, or impossible-to-select buttons, responsive design provides the best possible user experience no matter what device customers use.

And because mobile is poised for staggering growth, responsive design will be more cost-effective over the long-term than maintaining separate websites for desktop and every mobile screen size that comes along.

How does responsive design work?

Responsive web design uses a flexible core code to make the layout of the site fit different screen sizes, resolutions, and devices. The content on the website adjusts to make the most sense for each particular device.

As an example, we use responsive design at FunnelEnvy.com. Desktop users can adjust browser width and the site adjusts to fit the new size without losing content or forcing users to scroll sideways. Mobile users see a vertically stacked version of the site with large font sizes and a single-tap menu link. The fluid design optimizes usability based on device, creating a smoother and more aesthetically pleasing experience for our visitors.

Responsive design - Commons Android app

How Responsive Design Can Increase Conversions

The trick with responsive design is knowing what to keep across all layouts and what to trim, since you can’t fit everything on smaller screens.

Having a site that fits the device it’s being viewed on will boost conversions by creating a better user experience. Keeping the right elements for smaller layouts boosts conversions even more by eliminating the unnecessaries and focusing on the important stuff (just like good landing pages).

So which elements should you keep, and which should you trim?

In his in-depth article on optimizing responsive design for conversions, Neil Patel offers some rules of thumb. He recommends keeping anything that:

  • helps your customers find what they’re looking for, such as maps and directions, and tap-to-call functionality
  • gives them flexibility, such as different ways to buy or donate
  • takes advantage of mobile options, such as podcasts or videos

What you trim away to optimize for smaller mobile layouts is trickier. Generally speaking, it’s a good idea to get rid of anything that might slow loading times, such as images. But in industries like food and fashion, images make a world of difference. So it really depends on what works for your customers.

Examples of Responsive Design Boosting Mobile Conversions

Need proof that responsive web design actually works and is more than just a fad? Consider these 14 examples collected by Econsultancy, where brands saw anywhere from 13% to 100% lifts in conversion rate and revenue growth.

In early 2013, beauty brand Nars increased smartphone check-out conversions by 54% and tablet check-out conversions by 24% with a new responsive website.

SkinnyTies.com is another great example. They launched a responsive design in 2012, and saw great results. Not only did their new design “fix” common mobile problems like bounce rate, time-on-page, and mobile conversions, but it also boosted conversion rate and revenue growth across all devices–not just mobile. Here are their results:

  • bounce rate decreased by 23.2%
  • visit duration increased by 44.6%
  • overall conversion rate increased by 13.6%
  • iPhone conversion rate increased by 71.9%
  • revenue growth for all devices increased by 42.2%
  • iPhone revenue growth increased by 377.6%

O’Neill Clothing saw even more impressive mobile results with responsive design and some basic mobile optimization, with Android conversions up by over 400% and Android revenue growth up by nearly 600%!

Bonus Benefit of Responsive Design – Emails

In addition to boosting click-throughs and conversion rates for websites, responsive design works great for emails too.

Using flexible design to optimize your website and emails to all customers on all their devices lets you target much bigger groups, making the investment that much more cost-effective and giving you even bigger payoffs.

Your Turn

Responsive design could be an important step toward boosting your conversions and revenue for all devices. The only way to find out is with analysis, testing, and conversion optimization.

What do you think of responsive web design? What results are you getting with it? Let us know in the comments!

Improve your Conversion Rates with FunnelEnvy

From research & analysis to test and campaign development our optimization engineers will get your conversions headed in the right direction.

Learn About Our Services