Newsroom

Blog

A A

Responsive Web Design: The Next Wave in eCommerce

March 25, 2013

If your 2013 online strategy does not include RWD, ask yourself why…

Forrester Research estimates that the United States online retail industry will be worth $370 billion in 2017.  According to the IDC (International Data Corporation) in 2015, more U.S. users will access the Internet through mobile devices than through PCs or other desktops.

As this focus moves towards mobile, we must look deeper and determine what we mean by mobile, and what the experience will be for these customers as they come to websites from their mobile platform. Traditionally, we have built mobile versions of websites, which were basically scaled down versions of the desktop site.  But as the demographic changes, will this be enough?

Forbes reports that there are 47.5 million tablets in the USA, and 30 million of them are iPads. These numbers are all growing.

 
The future success of eCommerce sites depends on mastering this multi-platform sales arena. What does this mean to the web retailer?
 

To create good experiences for the user, many companies decide to create a website and a separate mobile site, or even further, mobile apps. This leads to duplicate effort when they update content. It also only works if the user agrees to take the time to download and use the app.

How does a business strategically maintain a viable user experience on all of these platforms?  Enter Responsive Web Design…

What is Responsive Web Design?

Responsive Web Design is a technique that allows you to create a single website that will adapt to any device on which it’s being viewed, whether it’s a laptop, smartphone or tablet, and still provide an optimal, unified viewing experience.   With Responsive, the same web page is viewed on multiple platforms, from a 3.5” mobile screen, to a 9.7” tablet screen, all the way up to a 20” desktop monitor and larger without distorting or losing the experience.

This approach entails more design and development effort up front:

  • Designers must determine how the layout will appear at each size, interval, and orientation; and
  • Developers will require additional time to address the challenge this creates to implement the design.

But once launched, updates are streamlined.  With only one site, there is only one update, one product catalog, and one unified experience.

What is a “unified experience”?

  • More conversions:  A better experience means more conversions.
  • More engagement and brand loyalty:  A consistent experience across devices means more engagement, and a positive feeling about your brand and product.


Responsive Web Design & Magento Enterprise

Guidance recently launched a Responsive eCommerce site for Scosche using Magento Enterprise.  Scosche, the award-winning innovator of consumer technology and car audio components, knew their customer base was growing via mobile browsing and shopping, so they initially required both traditional web and mobile sites.

Through the discovery process, Guidance determined that Scosche had a great number of customers coming to its site not only from mobile but also from tablets.   And because of its vast user demographic and product catalog, it was no longer optimal to offer two separate web and mobile solutions. It made sense to create this site as one Responsive solution. 

While Scosche sells two very distinct product lines, it has crossover between these products and was looking for an integrated solution. Like many eCommerce sites, its previous site suffered from unnecessary bloat of content. The Responsive solution trimmed the fat.

Guidance created a streamlined information architecture and checkout process and guided Scosche in creating visual and written content that would flow across multiple platforms. Employing a Responsive Magento theme, the Guidance design team created four layouts for the content establishing cutoff sizes.

Scosche was able to keep content necessary for SEO purposes, but the page layouts kept the flow clean and concise. Users are only shown the most necessary information, such as product image, short description, price and purchase button up front, and if they are looking deeper for specifications, reviews or more detailed descriptions, they can drill down to find more information.

What comes first?  The mobile site or website?

Now that you’re clear on Responsive Web Design and understand how it can be implemented on Magento, you’re ready to move forward with your first Responsive eCommerce site. But as you design for multiple platforms, where do you start?

This decision should really be made on a project-by-project basis, but the first step is to outline all of functionality and content required, then determine the minimum but essential components that a user needs to see at each level. 

Next, look at both extremes.  Design for mobile and for desktop.  Determine how much information is crucial for the mobile experience. Then ask, “Would this bare minimum design fit the desktop? What elements need to be added for a rich experience?”

Also, determine the user flow in each scenario. What is different between a person shopping via mobile or a tablet or on a desktop? What are the reasons he/she comes to your site? Is it to read information and get educated? Is it strictly to buy something quickly? Understanding your users will help you determine which elements are necessary and how to design for each platform.

These are only some of the factors you should consider before you move forward.  It is more work up front to design and build a Responsive site, but the payoff is big for both you and your customers:

  • a shopping experience that is not compromised as a result of the device being used; and,
  • content maintenance efforts for multiple platforms are reduced to one entry

Responsive Web Design is not the only solution. But it is increasingly becoming the optimal solution for successful small- to mid-sized eCommerce sites. More broadly, it is becoming a central theme in the continued growth of the “unplugged” eCommerce experience.