Years ago, when smartphones first entered our lives, responsive eCommerce design was nothing more than a garnish… a small flourish that was only the icing on the cake. Today, it’s practically mandatory.

Your site needs responsive eCommerce design to create a smooth and seamless process across smartphones, tablets, and desktops. Without it, the transition will be jarring and confusing to the point where you may lose the sale.

Still not convinced? Take a look at these humbling statistics below, care of Think with Google and Rackspace:

  • 67% of people use multiple devices when shopping online.
  • 90% of multiple device owners switch between devices to complete the same task.
  • 52% of consumers are less likely to engage with a business after a bad mobile experience.
  • 40% go to your competitor after a bad experience with your mobile site.
  • 3 out of 4 mobile searches trigger a follow-up action. Of those secondary actions, 17% are complete purchases.

There’s no denying the power of responsive eCommerce design, nor can you put off incorporating it into your mobile sites any longer. But doing so may be a bit confusing, and sometimes it helps to see it in action.

This article is a companion piece to our Complete Guide to Responsive Navigation for eCommerce Sites. There we explained the 11 most important best practices for eCommerce responsive design. We don’t want to repeat ourselves, but we still thought it would be helpful to show you some examples.

And so, for your web design inspiration, here are 3 sites that exemplify responsive eCommerce design.

1. Potato Postal Service

Let’s start with a creative site that embodies business ingenuity, and shares the modernity inherent in eCommerce responsive design. The Potato Postal Service is a funny update of postcards and telegrams, that allow customers to send each other simple, succinct messages… written on potatoes.

 Potato Postal Service-Home Page-mobile

Source: Potato Postal Service

Whether you like the business idea or not, you have to admire their site design and how well it translates from desktop to mobile.  The format, layout, and sizes may vary on different versions, but the core visuals remain the same, regardless of the device. The images, order, colors, and wording are identical, just formatted differently to suit different screen sizes.

 Potato Postal Service-How It Works-mobile

Source: Potato Postal Service

The desktop site takes advantage of more screen room, with a sticky navigation menu at the top and generous negative space. The mobile version, on the other hand, compacts the navigation into a hamburger menu and relies mainly on scrolling.

In the case of the “How it Works” section, mobile version smartly opts for a vertical stack over a horizontal row. The single-page layout dependent on vertical scrolling works for both versions.

Potato Postal Service-product-desktop Potato Postal Service-product-mobile

Source: Potato Postal Service

It’s important to note that, on the mobile version, each product option is given its own screen. This gives the product photo, and its corresponding call to action, the space and emphasis they deserve. The desktop version, with ample space, can afford a side-by-side layout more attuned to browsing.

With only a few product variations and just a single main page for navigation, Potato Postal Service is a good site to emulate if you’re a small eCommerce site.

2. Bonds

Unlike Potato Postal Service, Bonds chooses a different approach to its responsive design. This Australian clothing retailer uses a blocky and crowded layout for their desktop version, but reduce the visual noise for the mobile. For the most part, the two versions look and feel the same, but a few key alterations here and there make all the difference.

Bonds Home Page Desktop
Bonds Home Page Mobile

Source: Bonds

The obvious change is the simplified top navigation menu for the mobile version, which is common. We want to focus on the more unique design choices, however, that set Bonds apart.

The mobile version adds the 2 x 6 blocks of navigation options under the main home page image. This is an ingenious choice: these options, while helpful, won’t fit in the mobile’s header navigation outside of a hamburger menu, but their placement here keeps them on the opening screen without taking attention away from the main image. That image, in addition to advertising their Trunks promotion, also acts to break up the predominantly black imagery of the header and secondary navigation options. While this is unnecessary in the desktop version, for mobile, it creates a much more pleasing aesthetic.

Related posts:  eCommerce Checkout Optimization: How To Get Higher Conversions On Your Payment Form

Also worth noting is the difference in the “Shop Now” call-to-action button for the Trunks promotion. The mobile version is bigger — one of our eCommerce responsive design best practices to help finger-click gestures — and a different color.

Bonds Home Page 2 Desktop

Bonds Home Page 2 Mobile

Source: Bonds

For browsing, Bonds takes advantage of the cards layout. The desktop version can afford to lay them out in a row, whereas the mobile version opts for one per screen. Notice how the small text description for the cards on the desktop are removed on mobile to conserve space.

Bonds Product Page Desktop
Bonds Product Page Mobile

Source: Bonds

No where else is the content removal more noticeable than the product page. The desktop enjoys the screen space with an array of shopping options, information, and even a bread crumb trail at the top to aid navigation. These are all scrapped for mobile, leaving only the most important product page element, the product picture, front and center. The secondary elements are all present on the mobile site, but you have to scroll down to reach them.

3. Northern Lighting

The Norwegian retailer Northern Lighting is an excellent example of both desktop and mobile versions remaining faithful to one another. The site designers only change what’s absolutely necessary between mobile and desktop to keep each functionally optimally, and their efforts shed light on the subtle necessities of eCommerce responsive design.

Northern Lighting - Home Page - Desktop
Northern Lighting - Home Page - Mobile

Source: Northern Lighting

Minimalism also lends itself to eCommerce responsive design. It’s simple, really: less elements in general mean less elements to rearrange. With only three photos on their home page landing screen, Northern Lighting needs only to readjust the size and the typography to between versions.

Notice, though, how the mobile version adds a black background to the header navigation, even though the hamburger menu and Search function are in the same places. This is to ensure that mobile browsers find their way around — the black instantly draws attention, orienting the shopper from the moment they enter the site. These navigation patterns are almost second nature for desktop sites, which is why the extra emphasis is unnecessary there.

Northern Lighting - Dropdown Menu - Desktop

Northern Lighting - Dropdown Menu - Mobile

Source: Northern Lighting

Once the dropdown menu is activated on the desktop version, however, the background is black, returning some uniformity. Aside from the pages being listed vertically or horizontally, the only other difference is that the mobile version keeps its Menu and Search functions within the black background, in keeping with how the header originates.

Northern Lighting - Content - Desktop

Northern Lighting - Content - Mobile

Source: Northern Lighting

In fact, one of the advantages of minimalism is not having to decide what to cut, but simply how to rearrange everything. This isn’t always as simple or reorganizing a grid of cards… Take a look at the newsletter call to action. Because they switch from horizontal to vertical layout, they don’t have to shrink the actual email input, and they can still keep all the information, even the incentive explanation copy.

Northern Lighting - Product Browsing - Desktop

Northern Lighting - Product Browsing - Mobile

Source: Northern Lighting

Again, you can see how the biggest issue for Northern Lighting in responsive design is just reorganizing elements. Here, they resize the text to suit the screen size and corresponding images. The card layout does the rest. Still, it’s worth noting they removed the “see all or our selected products” sub-header on the mobile version. This bit of text is extraneous to being with, and wouldn’t be missed from the desktop version either.

Takeaway

Once you’ve mastered the fundamental techniques of responsive eCommerce design, it’s not so difficult to apply. Considering the advantages in catering to mobile shoppers, there’s really no reason to avoid implementing it.

Have any questions or examples sites of your own? Share your thoughts in the comments section now.