How Responsive Design Boosts Mobile Conversions

How Responsive Design Boosts Mobile Conversions

Google is a strong advocate for responsive design. Mashable named 2013 “The Year of Responsive Design,” but is responsive web design actually the answer to boosting mobile conversions?

2012 was a milestone year in the consumer devices market. For the first time since 2001, PC sales were lower than they were the previous year, and tablet sales are expected to top laptop PC sales for the first time in 2013. In addition, Nielsen reports that 55% of U.S. mobile subscribers own smartphones, and 2 out of 3 Americans opt for a smartphone instead of a feature phone when purchasing a new mobile.

Mobile telephone usage is increasing and translating into a growing percentage of mobile visitors. If businesses operating online want to benefit from this trend, they need to optimize the mobile experience for their website visitors.

Shopping on mobile devices can be a pain

The process of trying to buy something from a desktop design site with a smartphone can be summed up with one word – pain. On top of navigating and zooming a computer monitor-sized site on a three-inch screen to find relevant content, internet retailers assume that you are a screen-tapping ninja that understands the relevance of their lengthy forms and “Terms and Conditions”. All of these obstacles make it an unexpected challenge to reach the checkout page. It’s no wonder that 61% of mobile visitors move on to competitors’ sites after encountering a frustrating mobile browsing experience.

Meanwhile, mobile visitors are becoming more comfortable in taking action with their mobile phones, when it’s convenient. Nielsen reports that 29% of smartphone owners have used their device for online shopping. The percentage will surely increase as businesses improve the mobile browsing experience on their sites. Companies that have already acknowledged the buying potential, and have invested in improving the mobile experience, are reaping the benefits.


A good example of a company who is successfully converting mobile traffic is, a family-owned retailer of underwear, sleepwear and lounge-wear. announced 2012 mobile commerce sales of $168,000, accounting for 5.4% of total sales. For, mobile sales in 2012 increased a whopping 169.2% from 2011. The company is implementing both a responsive design and a tablet-optimized catalog to boost their mobile and tablet conversions, and clearly it’s paying dividends. Who wouldn’t want to enjoy the same success?

A business with a desktop design website that would like to enhance the mobile browsing experience and boost conversions has three options in general:

  • Build a website using responsive design.
  • Build a dedicated mobile web.
  • Build a mobile app.

Responsive web design

Is a flexible, liquid layout that adapts to fit various screen sizes, resolutions and devices. It allows websites to automatically change layouts according to the visitor’s screen resolution, whether on a desktop, tablet, or smartphone, creating a user-friendly interface when visitors browse websites.

If you’re viewing this blog post on a desktop browser, you can test responsive design in action. Try making your browser window smaller and you’ll notice the images and content column shrink to fit your screen.

A good example of responsive design, in action, is the The Boston Globe website. Notice how the same content adapts to fit the various devices.

Boston Globe Responsive Layouts
Image source

Responsive design has gained a lot of advocates due to its benefits compared to alternative solutions:

  • One website to build and manage: A strong advantage for businesses who update their content often, as it is no longer necessary to ensure content parity in various locations.This advantage also pays dividends in conversion optimization – for example in A/B testing, as there is only one body to conduct tests on. In addition, visitors encounter a cohesive brand experience regardless of whether they’re using a laptop, smartphone or tablet.
  • Search engine optimization: All links and bookmarks point to one URL. No wonder Google recommends responsive design.
  • Social Media: With responsive design, the URL’s visitors’ encounters are the same regardless of whether they’re browsing with a laptop, tablet or smartphone. That makes sharing content through social media foolproof, as it’s guaranteed that the recipients will also be able to browse the content in the most optimal view.
  • Analytics: One complete view of all the traffic.
  • Future-friendly: Whatever the new trend-setting device might be, responsive design has it covered by shrinking content to fit the resolution of the device.

The effect of responsive design on mobile conversions

Let’s take a look at some examples of how implementing responsive design has boosted mobile conversions. All of the following companies have gone from a desktop site to responsive design:

O`Neill Clothing

O´Neill Clothing Homepage Screenshot

The popular e-commerce store O´Neill Clothing racked up some impressive results after implementing responsive design. O`Neill monitored conversions, transactions and revenue for three weeks prior to going responsive. Then, after deploying the responsive conditions to the already live site, they monitored the same metrics for another three weeks. The results are staggering:

For iPhone/iPod:

  • Conversions increased by 65.71%
  • Transactions increased by 112.50%
  • Revenue increased by 101.25%

For Android devices:

  • Conversions increased by 407.32%
  • Transactions went up by 333.33%
  • Revenue increased by a whopping 591.42%

Think Thank Photo

Think Thank Photo (TTP) is a company that produces equipment and accessories for photographers. After witnessing their mobile visitors triple in a year to 13% of their overall website traffic, TTP made the to decision to rebuild the site using responsive design.

As a result of the new responsive layout and other optimization efforts, TTP achieved a 188% increase in revenue from Black Friday through Cyber Monday compared to 2012. Transactions from users on smartphones and tablets increased more than 96% and pageviews among mobile users increased by 224%.

Skinny Ties

Skinny Ties Homepage Screenshot

A family-run company that has been designing and producing neckties since 1971, Skinny Ties decided to reinvent the brand’s identity and build a platform that would be future-friendly. Bearing in mind the increasing penetration of smartphones and tablets, the company opted for responsive design. The site launched in October 2012 and within a couple of weeks Skinny Ties experienced massive improvements in sales metrics compared to the previous three months:

  • Revenue from iPhone grew a staggering 377.6%
  • iPhone conversion rate increased 71.9%
  • Revenue from all devices went up 42.4%
  • Overall Conversion rate increased by 13.6%
  • Bounce rate dropped 23.2%


Maxatec is a company that offers POS & EPOS systems, mobile and bar code products. Similarly to the previous examples, Maxatec saw an increase in mobile visitors and decided to the improve the user experience of tablet and smartphone visitors and boost conversions in that segment.

The results: mobile visitor goal conversion rate went up by 12% and the average time to complete a task decreased by 50%.


As predicted, the described case studies unambiguously show that responsive design is far superior to desktop design in converting mobile visitors. Businesses who attract mobile visitors to a desktop design are missing out on a large chunk of potential conversions and revenue, and as smartphone penetration is increases, having a desktop design could turn out to be expensive (in terms of lost conversions and revenue).

Dedicated mobile website

A business may also opt for building a dedicated mobile site to enhance the browsing experience of mobile visitors. A dedicated site lies separately (separate URL) from the desktop site and it’s sole purpose is to host mobile visitors.

An example of dedicated mobile website: Amazon

Amazon Dedicated Mobile Website

The advantages of a dedicated mobile site:

  • Mobile Behavior: Dedicated mobile sites optimize for both mobile behavior and resolution, while responsive optimizes for only resolution.
  • Faster load times: When Beth Israel Deaconess Medical Center wanted to improve their site’s mobile experience, BlueTrain Mobile made an example of how one page of their website would have looked if they had adopted responsive design and how the page would have looked in a dedicated mobile site. In the same mobile network, it took 15 seconds for the page in responsive design to load while the dedicated mobile page loaded in just 2 seconds.
  • Optimization: Easier to optimize for mobile conversions. Dedicated mobile sites focus solely on mobile visitors, while with responsive keeps in mind laptops, tablets and smartphones.

The disadvantages of dedicated mobile sites are basically the same as the advantages for responsive design:

  • Two bodies of content to manage
  • Separate URLs: if you’re using content marketing to attract visitors, this is a huge disadvantage as link sharing in social media is problematic.

Mobile app

Building a mobile app to enhance the browsing experience of mobile visitors is a good idea if you have a unique social or interactive platform OR when your site is your product. If you’re not Facebook, Twitter, LinkedIn, YouTube – build a dedicated mobile site or use responsive design.

Just think about it. When your site is not your product, can you think of any realistic reason of why anyone should download your app from an app-store,  install it and use it just to visit your site? No? Thought so.

The additional disadvantages of apps are that they have a restricted amount of content and functionality, plus they’re operation system specific. Most probably you’ll need need to build for both Android and iOS to optimize for your mobile visitors.

Responsive vs. Dedicated Mobile: which one should you choose?

Responsive has a lot of advocates for a reason. When comparing the two alternatives, responsive design is more future-friendly, has one body of content to manage (assures content parity), provides a constant brand experience and is social media friendly.

Dedicated mobile sites have basically one advantage – faster load times. But with the improvement of mobile networks and faster downloading speeds, the loading time differences between responsive design and dedicated mobile will lessen.

From a conversion optimization standpoint, the fact is that with both alternatives you’d need to follow the same route – constant improvements, A/B testing and multivariate analysis. Therefore, it would be wise to go with the alternative that provides the most advantages – responsive web design.

5 things to keep in mind when optimizing responsive design for mobile conversions

1. Focus on the important

When optimizing for mobile visitors, it’s important to remember that the most annoying thing for mobile visitors is going through a sea of plain text. If mobile visitors can’t find what they’re looking for quickly, they’re gone.

Critically review your content and keep everything that helps mobile visitors to find what they’re looking for quickly. Get rid of anything that may lead to visitors clicking away.

Make sure that the first thing your mobile visitors see is your value proposition (VP). A value proposition is a clear statement that explains how your product solves customers problems, delivers specific benefits and why the customer should buy from you and not from the competition. For more information about building a viable value proposition, read this blog post.

Fork, an open-source CMS, is a good example of a responsive web that has a highly visible value proposition for mobile visitors. When browsing the site, a mobile visitor will immediately know what Fork is and its benefits. The questionable part of the VP “will rock your world”, which really communicates nothing. Replacing it with a statement that says who Fork is aimed at (eg “small businesses”) would be much more informative.

Fork Responsive Design Example

Although a dedicated mobile site, Kumon is a very good example of a business that is correctly communicating its value proposition. At a glance of the site, you have a clear understanding of what the service is and who it is designed for.

Kumon dedicated mobile example

In addition to making your value proposition visible, statements developed for boosting conversions, for example free shipping and money-back guarantees, should also stand out from the rest of the content.

2. Make your CTA-s stand out and in accordance with mobile behavior

Make your call-to-action buttons so large that they take up the entire width of the mobile screen. This ensures that mobile visitors don’t need to zoom to focus in on the CTA button.

Also, put your CTAs in accordance with mobile behavior. A 15-page white paper may be a conversion hit on a desktop site, but it’s highly unlikely that a mobile visitor will be interested in going through the trouble of downloading the paper and then reading it on a tiny mobile screen. “Sign up for Our Newsletter” or “Like Us on Facebook” are better call-to-actions for a mobile visitor who are on-the-go.

A clever idea is to implement mobile specific call-to-actions under contact information, such as “Call Now” or “Get Directions”. The mentioned CTAs will start a phone call or open a map application, resulting in a more targeted mobile browsing experience.

Audi has a highly visible CTA on their mobile landing page. Though not responsive design, it’s a great example of a well placed CTA, leaving mobile visitors with no confusion on what to do next.

Audi Mobile Landing Page
Image source

3. Make use of photographs and videos

Reading plain text on a mobile phone is tiresome and difficult, especially when you consider that most of mobile browsing happens on the fly with texting and apps interfering. Photographs and videos on the other hand are great for capturing the attention of mobile visitors and communicating your marketing messages.

A great example of a responsive design site that uses photographs to capture mobile-visitor attention is Food Sense, a food recipe blog. When on the hunt for recipes for delicious meals, it’s highly likely that you’ll stop on a site which uses remarkable pictures to develop a craving for food.

Food Sense Webpage

Another company that is effectively using images to capture mobile-visitor attention and communicate its brand values is Starbucks:


With creatives, keep in mind that more photographs and videos translate into a longer page load time. A study found that 67% of people expect a mobile site to load in under 4 seconds. Also, never use flash as it’s not supported on some mobile devices, for example iOS.

4. Cut down your forms

Long forms are conversion killers on desktop sites. They’re even worse for mobile visitors. Filling out forms with a smartphone is time consuming and uncomfortable. To boost mobile conversions, keep your forms short.

Review forms with the view of “Is this field absolutely necessary?” If the answer is no, delete it. You can ask for additional information after the actual conversion with a follow up e-mail or call.

5-6 fields are the maximum recommended amount of fields in a form when optimizing for mobile visitors. In addition use vertical-align labels (top) instead of left-aligned labels.

A good example of a business who has made filling out forms as easy as possible is Hertz, a car rental company. You can get a quote on a rental car by filling out four information fields. No name, address or contact information needed – they’re irrelevant when requesting a quote and can be gathered later, when the customer has made the actual purchase decision. Well done Hertz!

Hertz Responsive Site Example

5. Use expandable content or tabs to avoid mobile scrolling

When running an e-commerce business, try implementing expendable content or tabs on your product pages. The point of tabs is to structure information based on categories so that mobile users can find what they’re looking for quicker.

For example, instead of scrolling through waves of content to find product reviews, a mobile visitors just clicks on the “Review” tab of the product page and ‘voila’ – he has the needed social proof to make the transaction.

Tria offers a good learning example with their desktop product site and the same page as a mobile landing page. Notice how all the content on the bottom half of the desktop site is placed as expandable content on the mobile landing page.

In addition, Tria gets credit for the CTA, which is highly visible and well-placed. Also notice how “Free Shipping” has been made more visible compared to the desktop site. “Reviews” have been altered in the same manner to provide social proof to mobile visitors.

Tria desktop and mobile experience comparison
Image source


  • An increasing amount of website visits are performed on smartphones and tablets, meaning that businesses who want to benefit from this trend must enhance the browsing experience for these devices.
  • Responsive web design allows websites to automatically change layouts according to the visitor’s screen resolution whether on a desktop, tablet or smartphone; thus creating a user-friendly interface when visitors browse websites.
  • Companies that have invested in improving the browsing experience of mobile visitors, and have gone from a desktop design to responsive design, have seen increases in mobile conversions.
  • When optimizing responsive design for mobile conversions, make sure your VP and other conversion boosting elements are highly visible. Use images and videos instead of plain text, and make your forms as short as possible.

Featured image credit

Related Posts

Join 95,000+ analysts, optimizers, digital marketers, and UX practitioners on our list

Emails once or twice a week on growth and optimization.

  • This field is for validation purposes and should be left unchanged.

Join the Conversation Add Your Comment

  1. Great article! Nothing is worst then a frustrating mobile site. A good tool to help reduce data usage and make images clear on any zoom level is

  2. This is so true, we’re also thinking of shifting to responsive website soon. We do have a mobile site right now, however it is no where close to our desktop site as far as look is concerned. The most important benefit of a responsive webdesign is you sites looks same on all devices and that makes it very easy for visitors.
    Thanks for sharing this,

  3. This is getting more and more important as more people access the web on their mobile devices — yet so many websites are still neglecting their mobile viewers! A responsive design is more work up front, but really pays off in the long run.

  4. This is ‘gold standard’ information, thank you for giving it away for free Peep.

  5. The Amazon dedicated mobile site converts more business in an hour than that O’Neill Clothing site or Skinny Ties does in a year, so not sure I get your point. The top converting ‘mobile’ sites are all dedicated experiences. You’re misinformed on cons of a dedicated site. The single URL approach for better SEO was debunked months ago. YouTube, Walmart, Target, eBay, etc all have unique URLS. Switchboard tags can accomplish the same thing as a single URL. Also, you can have the same content store and back-end and full functionality with a dedicated mobile site. Responsive design is good for ‘responding’ to different screen sizes, but mobile is much more than that. To convert well you must take the user, context and mobile device capabilities into consideration. Focus on creating an excellent user experience regardless of which approach you take.

    1. Peep Laja

      The article is not about mobile vs responsive. It’s responsive vs desktop versions.

      Amazon is Amazon, and nothing they do compares to anyone else. They have a huge brand and this greatly affects their conversions and what not. However if you just copy Amazon, you will suffer.

      What most people miss about responsive design: the number of devices you can use to get online is going to be 37 in the next years – and this is HUGE for user experience and conversions.

  6. There are pros and cons of having it responsive or to have a mobile website. Will in all depends on the what you are or or what type of industry you are in. For us, responsive design is very appropriate. We’ll gonna launch our responsive website soon. Quite too late but still we’re very positive that it will yield great results.

  7. Using the word ‘mobile’ is where it all starts to go wrong. My mobile laptop has a higher screen resolution than my Dad’s old desktop. My iPad is only mobile while I’ve got a WiFi signal. My needs as a Galaxy user are exactly the same as when I’m sat in front of the PC.

    A responsive site should never be a cut down version of the full monty. The same functionality needs to be available to all users. You mention for example cutting down mobile forms. If you can cut it down for a small screen the surely you can use the same form on a large screen.

    If you look at the ebay app on an iPad it’s very slick. But in doing so much of the functionality available in the browser version has been lost. A classic case of the ‘mobile’ UI not meeting the needs of the user.

    Good article though.

  8. It’s an amazing post in support of all the online visitors; they will get advantage from it I am sure.

  9. O’Neill shows some boasts some really impressive figures (. What I am asking myself: Did they have a mobile website before?
    I’d like to know that, because IF that’s the case, the figures would be REALLY impressive. If not, they would be kind of obvious.

  10. Besides being user friendly, search engine friendly, and mobile friendly; responsive design is also Google’s stated preference. Care to argue with Google?

Comments are closed.

Current article:

How Responsive Design Boosts Mobile Conversions