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.

webundies

A good example of a company who is successfully converting mobile traffic is Webundies.com, a family-owned retailer of underwear, sleepwear and lounge-wear. Webundies.com announced 2012 mobile commerce sales of $168,000, accounting for 5.4% of total sales. For Webundies.com, 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

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%.

Conclusion

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:

startbucks_Example

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

Conclusions

  • 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