Making Responsive Web Design Work for Ecommerce Sites

3 Min Read
Darla Sawler

It’s not often you hear specifically about ecommerce and its place in responsive web design. So when the topic came up while I was listening to the Shop Talk Show with Chris Coyier and Dave Rupert recently, my head shot up.

The main point of the podcast was that some standard practices and elements of ecommerce design aren’t necessarily “responsive friendly,” which means making an ecommerce website responsive is a much more complex process than, say, making a blog or a static text page responsive.

responsive web design podcast with Chris Coyier

In spite of this, responsive web design is probably still the best bet if you’re a forward-thinking online retailer who wants to take advantage of the growing mobile market (according to Pew, 56% of American adults now own a smartphone and tablet adoption has doubled in the last year). So let’s look at some of the challenges Coyier and Rupert mentioned in the podcast, and how you might want to handle them:

Challenge #1: There’s a lot of stuff to fit onto each page
More often than not, an e-commerce site designed for desktop has a ton more elements on it than a mobile site. And while many of those elements may end up getting repositioned to suit the smaller screen, the bottom line is something’s got to go. So, first things first: (a) decide what the primary purpose of this site is (to make sales? to give information? to engage/interact?), decide which content is absolutely essential to make that happen, and then rate all the rest of the content on a scale of crucial to not-so-much.

(b) But don’t simply add or remove elements because the device got bigger or smaller. Know your content and strategize.

(c) Need some help figuring out what the most important parts of the website are? Use analytics software to see which pages and parts users have been interacting with the most.

(d) Finally (and I can’t stress this enough!), test your design. Iterate. Test again. Testing your design is, without a doubt, the best way to figure out what your users value and need.

Challenge #2: There are many views of a single page.
A user’s shopping cart can sometimes vary with the information that is displayed based on what customer group they belong to. Having different scenarios, states and elements make designing and building an ecommerce site a bit harder than a static informational website or a blog.

To combat this, design for the most complex situation and then start removing elements as the situation becomes less and less complex.

Challenge #3: Tables sometimes show up in e-commerce design, but are hard to use in responsive.
Tables are often used in e-commerce sites for elements like shopping carts and product comparisons, but they’re pretty messy solution when a site has responsive design. No one has found a perfect way to manage them yet. But there are many techniques out there, most of whose effectiveness largely depends on the project.

Challenge #4: The website has to be comfortable to use, even at the smallest breakpoint
I’m sure we’ve all come across poorly designed mobile sites in which we’ve struggled to, say, use the navigation or access a link or input text in a form. Make sure anything that’s a link has room to breathe and that your touch target is large enough for fingers to use–no mouse necessary. Luke Wroblewski has a great article about touch across devices

As for input forms, using placeholder text is a great way to save space instead of going with a traditional label. Just make sure that if someone abandons the input field, the placeholder text reappears (otherwise, it’s possible the user will forget what the input field was asking for).

Some additional Responsive Design Resources to check out:

Design Patterns:
Overall web strategy:
Front-end prototyping framework:

Photo via

Darla Sawler


Corra is the global digital agency that leading brands and B2B organizations trust to accelerate their growth. Working at the intersection of commerce technology and customer experience strategy, we deliver comprehensive digital solutions that convert and retain customers in the long term.

You may also like

Envisioning Your Brand With a Headless Architecture

Everyone in ecommerce is talking about the enormous benefits of migrating to a headless architecture—one where front-end digital experiences are freed

Watch Commerce Talks: CX Workshop on Demand

Corra and Adobe recently teamed up to host a live customer experience workshop to help merchants prepare for the upcoming holiday season. Although ben

Video: Progressive Web Apps: Let’s Get Technical

The following video is a webinar with Corra’s CTO, and CTO and founder of Webscale.  ﹏ LET’S GET TECHNICAL Watch on demand: chief technolo

want more?
Get exclusive access to Corra content and events
We'll let you know when we publish anything new