3 Great Examples of Responsive Ecommerce Designs


I recently teamed up with Monetate on the short ebook, The Truth About Responsive Design (which you can grab for free).  It covers the history of mobile web design, the pros and cons of responsive design and examples of responsive sites we like (both ecommerce and non-ecommerce).


Today’s post zooms in on 3 of the best practices to use when going responsive.

1. Cut Content in Context

The Boston Globe has a call-to-action to subscribe placed in the footer, which changes depending on the size of the screen being used to view the content.  An icon also stays anchored to the bottom of the screen as you scroll up and down each page.


Compare the desktop version  (shown above expanded to display additional content) to the mobile CTA, which skips the detailed content and gets straight to the point — get access now.


This is the perfect example of removing content depending on user context.  If you’re going to convert a mobile user, the more words you throw on the tiny screen, the more friction you create.

The Globe also simplifies its subscription page with laser-like focus on the value proposition and a strong CTA button.


Don’t be afraid to strip your responsive mobile designs to MVC — minimum viable content.

2. Mind Your Menu Manners

I’ve recommended against using the triple-line menu icon on mobile designs until the convention becomes entrenched with users.

Sony labels its menu button as such, clearly indicating it’s an expand/collapse menu (avoiding drop-downs for longer lists).


3. Scale Thumbnail Images With Usability in Mind

Image resizing is a major part of responsive design, both for screen size and orientation.  But keep in mind that users need to connect product names and pricing with thumbnail images on category pages.  Bigger images are not necessarily better if they’re so large that the user has to scroll up and down to connect text links and pricing with the products.

Indochino does a good job sizing thumbnails, even in landscape view.  The user can easily connect the product with its price and link, all in one screen.



Reprinted by permission.

About the author: Linda Bustos

As Director of Ecommerce Research at Elastic Path, Linda Bustos works with some of the world’s largest companies to help improve conversion rates and profitability on the Web. In addition to writing the Get Elastic blog since 2007, Linda’s articles have appeared in Mobile Marketer, CMO Magazine, E-Marketing + Commerce, and Search Marketing Standard. She is a frequent speaker at industry events, including XCommerce, Conversion Conference, and Affiliate Management Days.

In 2010, Linda earned a spot on the DMNews Top 30 Direct Marketers Under 30 list. She has served as faculty for the Banff New Media Institute’s Career Accelerator Program and Marketing Profs University, and has appeared as one of the Top 100 Influential Marketers of the year in 2008 and 2009. Prior to joining Elastic Path, Linda worked agency-side, specializing in usability and SEO.

You are seconds away from signing up for the hottest list in New York Tech!

Join the millions and keep up with the stories shaping entrepreneurship. Sign up today.