How to Optimize Responsive Design for Conversions

In mobile marketing and optimization circles, “responsive design” is more than just a buzzword. It’s a standard that’s taking everything you know about web design and turning it on its side…literally.

As it turns out, 9 out of 10 smartphone users conduct some form of financial activity on their devices, according to a Prosper Mobile Insights Survey. That includes over half who use their phones to shop online. Although conversion rates on desktop computers are still higher, tablets aren’t too far behind.

What’s interesting is that even though conversion rates for smartphones are still below 2%, the smaller the screen, the more money users spent on average.

shoppers cart

One point to keep in mind is that most sites are still not optimized to handle mobile traffic. As responsive design becomes more and more intertwined with best web design practices, shoppers will become more comfortable shopping on a variety of devices, and companies will get used to catering to customers through a variety of channels dedicated to those devices.

A good example of this is WebUndies.com. This family-owned retailer of underwear, sleepwear and loungewear reported that its mobile commerce sales alone topped $168,000, or 5.4%, of its 3.1 million in sales. If that barely seems like a slice of traffic worth optimizing for, consider that this is an increase of over 169% for the retailer. WebUndies uses both a responsive design and a tablet-optimized catalog. Given the amount of attention WebUndies extends towards their mobile shoppers, it’s no surprise that their mobile traffic has doubled year after year.

What is responsive design?

Responsive design is a flexible, liquid layout that adapts to fit a variety of screen sizes, resolutions and devices. Rather than having separate individual design elements that are built for a mobile site, responsive design focuses on a core code that aligns and situates itself to flow within the parameters of the device itself.

Consider this example showcasing cabins for rent:

cabins

As you can see, the layout adjusts itself to present information in a way that makes sense for the device it’s being viewed on.

But the real question from a conversion standpoint is: what do I keep, and what do I trim away?

Conversion elements worth keeping

Keep anything that makes it easier for mobile customers to find what they’re looking for quickly. That means maps and directions, business hours, and tap-to-call functionality that puts them in touch with a representative.

The Red Cross’ mobile site is a great example of integrating mobile features in a way that makes perfect sense. In one example, you could tap to make donations via SMS, over the phone or by a credit card. Having this kind of flexibility lets users take control of how they take action.

A conversion-focused responsive design also makes use of features beyond the touch screen. Since you’re dealing with a much smaller screen space, you want to take full advantage of sight, sound and media options available to you. Reading plain text on a mobile phone is tiresome and difficult, but watching a video or playing a podcast is intuitive and easy.

redcross

Elements worth trimming away

Optimizing a mobile-responsive design for conversion optimization is a lot like building a landing page. You have to trim away the fat, which means discarding anything that could lead the visitor to click away or be distracted from taking the action you want them to take.

As you saw from the cabin example above, the ad to rent the cabin on Flathead Lake was completely removed in favor of room for more photos and text. Since white text on a black background is more difficult to read, better usability standards were implemented for the smartphone version, which presents a more readable black text on a white background.

But optimizing for mobile responsive design isn’t just about removing ads and adjusting layouts. You also have to take a serious look at what to remove for a better user experience. Here’s how beauty company Tria was able to optimize their mobile site to sell laser hair removal products:

There are several things we can learn from a design like this:

rosetta

  • Less is more – notice how the mobile-optimized page presents images in a scrollable slideshow format rather than one large view and several thumbnails, for easier touch-based navigation.
  • Expandable content – rather than forcing mobile users to scroll through waves of content, one tap opens a page full of benefits, which are ordinarily exposed to desktop viewers on the left. Tabs that appear in blue on the Desktop version are opened via plus signs on the mobile site.
  • Reviews are more prominent – notice how ratings and reviews are front-and-center on the mobile site, where more high-end purchase items are further reinforced with social proof.
  • Price and payment options are larger – the price and the option to pay in installments are considerably larger so there’s no need to search for “how much does it cost?” or “how can I pay for it?”
  • Free shipping is more noticeable –mobile shoppers see the free shipping notification immediately along with a large, prominent icon to view their shopping cart.
  • Large call-to-action button – Tria makes full use of a large call-to-action button that takes up the entire width of the screen, so there’s no pinching, squeezing and zooming to see the add to cart button.

In this example, Tria has simplified, streamlined and focused on what was important for the best possible user experience, accessibility and ease of use.

What would you trim?

Here’s another example of a mobile responsive design, this time promoting the World Wildlife Foundation’s Earth Hour:

earth hour

The tablet version simply shifts around elements of the site, but the smartphone version stacks them and eliminates bandwidth-sucking extras like the dim light bulb and the countdown clock. The latest news is also removed from the main focus area, which helps keep the call-to-action brief and straightforward.

But not every site cuts out the eye candy. Take a look at Food Sense. On a device where the very look of a meal could be the make or break moment of clicking through to learn more, Food Sense opted to keep their stunning images and trim down the text:

food

On the tablet, the sidebar navigation is moved to the top so that browsers can enjoy the full view of the fruit salad. Smartphone users have the icons removed completely with simple text-based navigation and greater emphasis on individual photos.

By looking at these examples, it should be clear that creating a mobile responsive design is more than just a juggling act of design elements.

The 400% increase in conversion rates

Design firm Electric Pulp recently redesigned clothing retailer O’neill’s website to be more mobile-responsive. They made all the right decisions in incorporating best practices for mobile design: a fluid layout, collapsible menu that could be opened with a single tap, increased font size, larger tap areas and improved photos.

They then conducted several tests. They didn’t do your typical A/B split tests. Instead, they looked at pure order volume and revenue in addition to conversions of non-mobile traffic. This is what their results were:

oneill stats

Sometimes, mobile responsive design happens as a matter of practicality. As Shiseido Americas discovered when they launched a mobile site for their high-end beauty brand Nars in January, they simply couldn’t maintain three separate versions of their existing site (for desktop, tablet and smartphone). Switching to a more fluid design allowed them to keep pace with new device releases they weren’t prepared for, such as iPad Mini.

In this case, Shiseido created graphics and other assets that would fit Nars’ mobile design exclusively, rather than simply rearranging elements on the existing site. The results so far have paid off in more ways than one.

They were able to increase smartphone checkout conversions by 54% and tablet conversions by 24%. In addition to that, the new approach also boosted the team’s workflow and productivity while ensuring that all device approaches use the right assets to compel the customer to take action.

Best practices for mobile forms in responsive design

Back in the ancient days of WAP, form fields were unthinkable because they were a headache to try to fill out. Fortunately, standards have changed, and user interface designers have provided a well-rounded set of instructions for maximum button touch effectiveness.

UX Booth has a fantastic article on the best practices for designing and optimizing mobile forms, which includes the following:

  • Using vertical-align labels (top) versus traditional left-aligned labels.
  • Removing any information that isn’t absolutely necessary. Many users can have their connections dropped and data lost, making long forms difficult to complete.
  • Combining form fields (such as country/state/province selection) where appropriate or making the most popular choices appear first on the list and incorporating default selections when it makes sense to do so. This, in turn, makes it easy for users to scan quickly and take action without wasting a lot of time or bandwidth.

A good example of an easy to use mobile form is Hertz.

hertz

How to create your own responsive design

By this point you may be wondering, “showcasing examples and results is all well and good, but how do you create your own mobile responsive design?” Fortunately, there are several tools you can use to help streamline and simplify the process:

  • Simple Grid – this system uses a series of “slots” that can be rearranged and combined according to a grid-based design.
  • Skeleton – skeleton is a boilerplate development kit that is based on the popular 960 grid style. It also has a number of extensions for popular content management and sharing platforms including WordPress, Drupal and Github.
  • Gridpak – this is a “responsive design generator” that creates a grid with a slider that you can adjust to fit your needs. You can also adjust features such as the column padding for greater control and flexibility.
  • The 1140 CSS Grid – this grid is available as both CSS and a Photoshop template.

Conclusion

By starting with a fluid layout, you’ll minimize the time, cost and work of trying to fit your site to different devices. Instead, you will be able to concentrate on solid code that can easily be applied across devices today and well into the future.

The most important thing you can do to increase conversions through a mobile responsive design is to discover which features are most important to your visitors. You can do this by using an overlaid heatmap to determine where their areas of focus tend to fall. A good mobile responsive design that’s also conversion-focused will eliminate useless navigation and design elements, while focusing on crisp, simple design that loads fast and demands action.

Do you have a mobile responsive design? How has it affected your conversion rate?

If you want to break through to real profits online, you need some serious firepower. For a limited time I’m sharing some select tips and tricks Amazon, Microsoft, NBC & Hewlett Packard paid thousands of dollars per hour for, FREE.
  • The step by step guide to monster traffic generation
  • The how-to guide for increasing conversions on your website
  • 7 Cashflow killers your analytics tools are hiding from you
     
 
100% privacy, I will never spam you!

Trackbacks

Comments

  1. I work with local businesses so I can’t say how my experience is with large e-commerce retailers, but a responsive design has definitely helped increase conversions for restaurants.

    People searching for places to eat on their phone are “buyers” so having a quick loading page and making it super simple to call/email for a reservation is #1 priority, and having a good design for phone/tablet is key.

    -Amir

  2. Great post Neil.

    It’s ironic, I remember when I first started building websites, having to design to fit monitors as small as 600px wide (may be dating myself a bit there), then everything got bigger, and then it got smaller again.

    I totally agree though, responsive design is a much better solution both practically and in terms of usability, than having a separate mobile site.

    I think most users are annoyed by mobile sites and apps that leave out important functionality. I guess the challenge of responsive design is to make sure that that functionality isn’t lost, even on the smallest screens.

  3. Another awesome post Neil. It appears that a responsive framework (Like Genesis) with a few tweaks to mobile/tables styles to eliminate unnecessary elements is a better strategy than using “of the shelf” mobile themes like wp-touch, etc.

    Looking forward to testing this! Thanks for the time you spent writing this.

    Cheers,

    Aaron

  4. Neil,

    Simply tell your readers to use responsive WP themes (like many of Genesis Framework Child Themes) to design their own websites.

    We did that too.

    Nader
    @coldadco

  5. Neil, This is a great post. I just published my infographic on why you need to look at mobile design for your site (responsive or mobile websites). Looking at the analytics for over 20 sites I found an average of 22% of the visitors were on mobile with local businesses having the highest rates. I’m going to link to this as this is the “how to” part that matches up well with that “why” infographic. Thanks for the consistent awesome posts!

  6. Hey Neil!
    Awesome webinar today Neil.
    I should really start tracking more, anyhow thanks for inspiring us!

    Michael

  7. Hey what upper neil… maybe I missed it…but what are you using? I know WordPress, but what other plugins?

    Thank,

    Kenney

  8. Hi Neil,

    Again an awesome post! But I think when we are talking about responsive designs & smartphones speed is one of the crucial factor. Guess people need the site load much faster on mobiles.

    Responsive design is great but on other thought what do you think about mobile apps? Ebay, Etsy, Amazon all are using providing apps for better mobile experience. Don’t you think Android or iPhone apps provide better mobile commerce experience than mobile sites or responsive designs?

    Not only mobile commerce even for the engaging users/readers online magazines like Mashable, TechCrunch, Huffington Post provides apps for better mobile friendly environment.

    So between responsive design, mobile sites & android app which one will you choose and why?

  9. Great Article Neil, Mobile is the future and its important to design your website for mobile. Lucky there are money themes and plugins that will help convert your wordpress site into mobile.

  10. Great post – definitely a hot topic article!

    Another good tool to help with responsive design is Mobify.com.

    One other simple thing – it’s also critical to make buttons and form fields much bigger on responsive mobile sites so that visitors can click on and interact with them much easier (hard with no mouse or real keyboard!)

    And in terms of an explanation for higher conversion rates and orders on tablets, don’t forget that tablet users have higher disposable income demographics – meaning price is a less of a conversion barrier to them.

  11. Responsive design should be the only way forward, with the amount of screen sizes currently available it’s silly to focus on just one. I also think working on a responsive design site increases the overall simplicity of my sites, which is good for loading time and that kind of things.

  12. That’s interesting that people spend more the smaller the screen is. My guess as to why that is would be that the content space is more confined and restricting, which restricts the mind; therefore – less places to look around, get distracted or NOT buy. Less chance for the user to look elsewhere or be lost in space.

  13. Chandrakshi :

    Sorry forgot to mention Go Mo also provides a variety of tools and resources to design a mobile friendly site depending on the nature of your business and lets you edit the template and layout as per your needs. Some of the interesting and handy features I found are – it allows you to add buttons such a click to call / click to text which lets the users call you / send you an sms with just a push of a button, then they have this mobile map which makes your business easy to find, restaurant menu, lets you integrate pay pal and adsense, social share buttons and a plenty of other features all of which cannot be mention through a comment and all of this is free for the first year. You might just check it out yourself!

    I don’t know if I managed to add some value to the topic with my comments but also because my comment happens to fall amongst the first batch of comments made to the post, am hoping I might get luck enough to get answers to all my queries.Thank you

  14. Good design always attract the readers and it is also the first impression, a Goog design on any device and change the future of your website. Your article is wonderful and will help me a lot to decide for a responsive design.

  15. thank you neil for sharing this information with us with smart phones are taking over the you can do everything on you phone this days. we just have to choose the right themes for are we mobile sites.

  16. The number of people transacting on mobiles is true for US only.

  17. I m going to write you a killer web design proposal after reading this and your previous post,neil!
    I appreciate the efforts from studiopress guys,, but there are still some bad experiences your website has.. Keep an eye on your inbox!

  18. Neil that was some research you did there! I am not that good with numbers, but all the facts that you stated are absolutely correct as per my knowledge! Keep up the good work! I am surely going to subscribe to your posts. Thanks! :)

  19. Mobile-first is the new priority and responsive design is a boon for the same purpose. Neil this is a fantastic share. I was not vey well versed with this concept but now I know and also understand. Thank you so much for keeping us updated.

  20. That is a really good tip particularly to those fresh to the blogosphere.

    Short but very accurate information… Appreciate your sharing this one.

    A must read post!

  21. Mobile-first is the new priority and responsive design is a boon for the same purpose

  22. Thanks Neil for some great information! The the Mobile Revolution is Changing Business …Responsive design is the way to go…

  23. I really like the typography for the Aria example.

  24. While responsive websites are nice. I think we need to start evaluating when a dedicated mobile site vs responsive works best because of the data package restrictions the vzw, att, and others are starting to roll out. Large images that can scale down nicely are great but you still are downloading the whole image. Food for thought.

  25. Responsive sites are the new way to deliver fast purchases via tablet or mobile device. I don’t see it replacing standard viewing of sites via computer.

  26. It’s great to see even the large companies are jumping on board and are adopting responsive design practice.

  27. Neil,

    I can never stress enough to clients how important responsive design has become. The mobile usage statistics we see in Google Analytics on our client’s websites is substantial and consistently growing.

    The info you shared here on completely optimizing your responsive design is invaluable.

    Thank you for sharing,
    -Keller

  28. This is great work Neil. I really appreciate this. I’ve been bugging my head lately on how I can redesign my site to be highly responsive. Will try things out and see how it goes. Thanks for the guide and great work once again. Cheers!

Speak Your Mind

*