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 a global agency that builds the world’s fastest and most flexible digital storefronts for growing brands. We’re leaders in headless and composable commerce development, backed by gold-standard post-launch support. Through technical expertise, creative vision, and collaborative strategy, we help clients digitally transform to meet the evolving needs of their customers, adding value from day one. With headquarters in New York and hubs in 12 cities across three continents, Corra is uniquely positioned to support clients around the world and around the clock.

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

10 Incredible Headless Commerce Implementations

If you’re going to invest revenue and resources on a website build, you’ll want it to be future proof. You’ll want your front and back end to be decou

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