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, a Publicis Sapient company, is the global commerce leader and SI helping brands and organizations grow by evaluating, building, and optimizing their digital commerce ecosystems. Our vast experience with composable and headless implementations speeds time-to-value and provides technical freedom to our clients. Our TotalCare managed services program provides gold-standard support, enhancements and ongoing commerce strategy. We are strategic thinkers, accomplished engineers, and award-winning experience designers. We believe outstanding customer experiences can’t exist without flawless technology, and that flawless technology is pointless without beautiful, human-centered design. Our clients are an integral part of our team. Together, we remove the obstacles that are limiting growth and discover new opportunities. We don’t rest until our clients achieve their full potential. Our clients’ KPIs are our KPIs. We have 20 years of experience in commerce technology, but we also know that customer expectations are constantly evolving. For this reason, we’ve built future-proof solutions and refined an agile execution process that helps our clients achieve more with less. As a Publicis Sapient company, Corra joins a global network spanning 20,000 people with 53 offices around the world enabling us to accelerate our clients’ businesses through designing and building the experiences and services their customers demand.

You may also like

Corra Wins Best Places to Work Award in Multiple Major Markets!

Everybody has to work—it’s a fact of life. Working doesn’t have to be “work” though. According to the Best Places to Work Program, Corra has always be

Nine Things You Need to Know About GA4

Most ecommerce businesses rely on Google Analytics for tracking their most critical business metrics.  Google, however, is depreciating the version of

7 Live Examples of Headless Commerce on Shopify

What is Headless Commerce? Most ecommerce websites are built using a monolithic architecture. This means that both the front and the backend of the we

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