blog

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: http://bradfrost.github.io/this-is-responsive/patterns.html
Overall web strategy: http://www.lukew.com/presos/
Front-end prototyping framework: http://foundation.zurb.com/

Photo via di.net

Darla Sawler

---

Corra is the global digital agency that lifestyle brands trust to accelerate their growth. Working at the intersection of commerce technology and customer experience strategy, we deliver complex digital solutions to leading B2C and B2B retailers.

You may also like

blog
Yotpo Announces Native Functionality Within Magento 2

Brand marketing and beautifully produced campaign imagery are enticing – but they don’t necessarily build trust. That’s where user-generated con

blog
An Inside Look at Faherty’s Agile Project Delivery

The term Agile is so buzzy right now. It’s the popular delivery model that everyone wants to be, but few outside the project management realm truly

blog
How More B2B Retailers are Streamlining Their User Experiences

There’s a mindset shift taking place within legacy B2B retailers. As younger generations move into leadership positions and expect faster, more intu

Want More?
Get access to Corra content every month
Insights to drive conversions delivered directly to your inbox

LOOKING FOR B2B SOLUTIONS? INTRODUCING      

YOU ARE MORE READY THAN YOU THINK

From building a solid system architecture to digitizing workflows and addressing platform limitations, digital transformation can feel overwhelming. We can help.
LEARN MORE