Making Responsive Web Design Work for Ecommerce Sites

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.

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