Demac Media Demac Media Brand Demac Media Brand



5 Things We’ve Learned about Responsive Design in eCommerce

Timer Icon 6 Mins

Design & User Experience, From Our CEO

This really is the year of responsive design!  I don’t think we’ve started a new project in the last 6 months that wasn’t responsive. As a result of this rush to responsive we have been learning quite a bit, not just about responsive design but more importantly the challenges of responsive design within eCommerce.

At the time of writing this post, there were only a handful of the Top 500 Internet Retailers using responsive design. This isn’t all that surprising given the immense risk of site-wide redesign projects for eCommerce companies.  This lack of adoption at the top of the eCommerce market is definitely presenting some challenges given that so much of our industry looks to the mid-to-large size guys for testing and best practices.

As a result, much of responsive design and its application within eCommerce is a big experiment.

If we had to pick one major differentiator between responsive design within an eCommerce site and responsive design for content sites, it has to be the added complexity of the purchase path.

The vast majority of websites are not commerce powered.  There is no shopping.  Heck, so many sites are just content sites without any significant call to action that would make or what that site considers “success”.

So I’ve come up with 5 key things we’ve learned in the last little while about responsive design and eCommerce. See below:

Learning #1: Cross Device Experience & Feature Parity

What do your customers want & expect from their mobile shopping experience?

The knee-jerk reaction is to set out to create all your desktop/web experiences for every device size. We can’t stress how important it is to not go down this path without a lot of research and data to back it up.

eCommerce sites are generally quite complex. Lots of features, functionality and third party software apps powering a sites various components. It’s wrong to assume that mobile users are going to want to use all of the same features and functionality.  The behaviour of someone on a phone is usually very different from that of a desktop user.

From our own portfolio of sites we’ve actually noticed that most of our mobile traffic is coming from email marketing campaigns and is largely driven to category/search listing pages and also individual product detail pages. We also see significant traffic to store-locators for our national retailers and then finally we do see people going from product to purchase.

Most of the other stuff gets used very infrequently.  So why invest the time and money into making those features responsive?

Learning #2: Purchase Path is Where You Should Focus

Designing a site so that content responds to the various device sizes is only part of the battle in eCommerce projects. The larger and far more complicated issue is how the purchase path gets affected. When we approach a responsive project we focus a lot of our attention on the following pages/templates:

– Product Detail Template(s)
– Category Listing Template(s)
– Shopping Cart
– Checkout Flow

We pay particular attention to these templates and how they look on multiple devices because these are generally the most important pages for an eCommerce site. It doesn’t really matter if the content on these pages responds and looks nice, if the user experience is not optimal on each device on these pages, you are going to have conversion issues.

Learning #3: Responsive Does Not Mean Higher Conversion Rates

Start small and measure.

I think it’s really important to point out that simply implementing a responsive design will not on its own solve conversation rate problems.  There is a lot of research freely (and paid) available that shows you consumers have far larger purchase-blocking challenges on your site than how it looks (i.e. – shipping costs).  Responsive design is largely about satisfying a business need to provide your customers with a consistent experience across any device.

That said, we have found responsive design usually does improve conversion rates on mobile and tablet devices as the experience is optimized for those devices.  The only caveat with this statement is that the improvement in conversion rate on the sites we have done responsive for wouldn’t have happened if the sites didn’t check all the other “low-hanging fruit” boxes (i.e. – merchandising, speed, security, return/shipping policies etc…).

If you believe that responsive design will help your conversion rates, I strongly suggest you start by implementing responsive on the key purchase path pages like category, product detail, cart and checkout.  You can then drive traffic, probably through email marketing, to these pages and compare the performance for mobile/tablet visitors.  If you have the ability to A/B test something like this, even better.

Learning #4: Responsive is more costly up front and less costly long term

This one is big (for most).  We have found that the #1 reason sites are not going responsive at the moment is because they just completed a redesign project and don’t have the budget to redesign or convert to responsive. Responsive definitely involves a lot more work than building a site for one device size.  For those in the business this makes a lot of sense, but for retailers / merchants this is a bit of a tough pill to swallow.

The silver lining is that once your site is fully responsive, the long term maintenance costs are lower than many of the alternatives since you are only maintaining one “theme” for all device sizes instead of multiple sites and/or apps. When you add a new feature to the site, you add it once and adjust it for responsive instead of adding it to each site and/or app.

Learning #5: Not all screen sizes are equal

Different devices/sizes have different behaviours.

As I wrote this lesson down it seemed really obvious, but it is still worth pointing out that the same person may have different behaviours on their phone vs. their tablet vs. their laptop.  Looking at my own device behaviour I notice this even more. I rarely buy things on my phone, but shopping on my desktop and iPad happens without much thought.

If you dig into your analytics and segment it down to mobile phones (smaller screen sizes) only I think you’ll notice that what these users are doing on your site looks quite a bit different than your iPad or desktop users.  One could argue that the behaviour is different on a site that isn’t mobile ready vs. mobile friendly, but in our experience the behaviour is just naturally different and the mobile-friendliness of the site doesn’t significantly change this.

Subscribe to the Blog

Stay updated with 20,000+ eCommerce leaders in our community

Sign Up

Let’s talk about your 10X return

Icon/Social/Phone Contact us for pricing information