Think eCommerce transactions are mostly done on desktop? A Think with Google study revealed this game-changing statistic:

67% of people use multiple devices when shopping online.

This means that a sizeable majority of your shoppers will visit your mobile site at some point during the sales process. And if your mobile site doesn’t impress them, according to a Rackspace report, then you’ll likely lose out on a sale:

  • “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.”
  • “67% of mobile users are more likely to buy from a mobile-friendly site.”

The writing is on the wall: mobile sites are crucial to eCommerce success.

67% of people use multiple devices when shopping online. Click To Tweet

To keep your shoppers on track for a purchase your site will need a consistent navigation system across multiple devices and channels. But how do you accomplish that with such a diverse range of screen sizes? First between desktop, tablet, and mobile, and then between the varying brands and styles for each.

In this article, we’ll explain everything you need to know about responsive navigation, specifically for eCommerce sites, so that you can give your users a familiar experience, no matter what device they use.

The Golden Rule of Responsive Navigation

If you remember one “golden rule” about cross-channel navigation, it’s this:

Provide a consistent experience across devices.

And we’re not the only ones who think so. The Nielsen Norman Group cites “consistency” as one of their four requirements for cross-channel experiences:

“As users move from channel to channel to complete a specific task or many different tasks over time, they are exposed to the visual design, functionality, interactions and overall tone of voice of the company or organization. Creating consistency across these disciplines, regardless of channel, helps users build expectations for future interactions with the organization. Users crave consistency and companies that can provide consistent experiences across channels will quickly earn users’ trust.”

The “golden rule” about cross-channel navigation: Provide a consistent experience across devices. Click To Tweet

Consistency directly relates to navigation, but also extends to all design choices: color schemes, visual hierarchy, tone, typography, etc.

Now naturally you can’t use the same navigation on each device — the changes in screen size mean there’s either too much or too little space. What you can do, as Jeremy Girard from The Next Web suggests, is be “as consistent as possible.”

For example, a desktop’s pull-down menu might become a full-screen side drawer on a smartphone. However, the order of the items, imagery of the menu, colors, and typography should match.

Your multi-channel navigation system may not be the same on every device, but it should feel familiar. You’ll still want to take advantage of each device’s unique properties, but at the same time give the shopper the familiarity that allows them to browse with confidence, even if they’ve never used the channel before.

That’s why we suggest responsive navigation. “Responsive” means the navigation system retains the same core functionality across all devices, yet it “responds” to different channels with the proper modifications, such as resizing or implementing gesture controls.

ecommerce responsive design

Source: Wikimedia Commons

Consider this scenario:

Your typical shopper is watching TV when they become interested in buying a type of product you sell. For the sake of convenience, they pull out their smartphone and so they don’t have to leave the couch. They begin researching the product and land on your site’s mobile product page — even more likely if you use content marketing to guide shoppers through the sales funnel.

Good news, the shopper likes what they see and decides to buy! However, again for the sake of convenience, they want to complete the purchase on their laptop since they’ll be typing in their address and credit card data.

This is where responsive navigation is crucial. Your shopper either has to re-navigate to the same product page they just left on their phone, or access the shopping cart if they already placed the item in. Any obstacles as they return to their place on the new device will threaten cart abandonment.

A responsive navigation system will feel familiar and give them an indication of how to get where they want. Even if the shopper has never been to the desktop site before, they’ll still have an idea of where the shopping cart is, or how to get to the product page, from the familiarity with the smartphone page.

11 Responsive Navigation Best Practices for eCommerce

As we discussed before, serious eCommerce brands should at some point customize their site design to suit their specific users. If you’re designing a responsive eCommerce site, keep these 11 navigation best practices in mind:

Serious eCommerce brands should at some point customize their site design to suit their specific users Click To Tweet

1. Save progress for a seamless experience

Minimize the amount of extra work the shopper has to do by saving their progress automatically. Just like in the example above, this relates directly to items in a shopping cart, but is just as important for sections like recent history and previously viewed items.

image12

image10Source: The Burren Perfumery

Saving a shopping cart is referred to as a “persistent shopping cart,” and is an effective way to combat cart abandonment as a simple reminder if the shopper returns to the estore some time later. In fact, an eMarketer report showed that 56% of shoppers use carts as a makeshift “save-for-later” option.

Commonly, persistent carts are made with long-term cookies.

eMarketer report showed that 56% of shoppers use carts as a makeshift “save-for-later” option. Click To Tweet

2. Mobile-first approach

Design your smallest screens first, and then progressively enhance upwards. As Smashing Magazine points out, the mobile-first approach “helped us to address one of the shortcomings that we identified in our responsive projects — the problem of delivering unnecessary content.”

It makes sense if you think about it. You first design the layouts on the smallest screen, and then progressively add content as you scale upwards to bigger screens. Consider the alternative, of designing your biggest screen first, and having to cut and re-edit the entire page as you progress.

image17

image03

Source: The Practical Man

The mobile-first approach also puts the priority on content. Designing on the smallest screen first forces you to decide which is your most important content simply because you don’t have room for everything else yet.

The mobile-first approach puts the priority on content. Click To Tweet

3. Prioritize content so you know what to hide

If your site is like most webstores, you have a “featured products” section on your home page. While the desktop version may have five or six different products, your smartphone and tablet versions probably can’t fit that many.

Related posts:  Meyer has arrived, and it's our sweetest free eCommerce theme yet!

ecommerce responsive design

ecommerce responsive design

Source: Cienne NY

Prioritize all your content before you begin designing so you can simply work off a list. Not just products in a featured section, but product photos, subcategories, product details, etc.

Prioritize all your content before you begin designing so you can simply work off a list. Click To Tweet

4. Don’t compromise product images

Product images are one of your greatest sales tools, providing high-quality visuals into what the products looks and feels like, its size, and its usage. An MDG Advertising report found 67% of people called images “very important” in purchase decisions, with many consumers valuing images over descriptions, specs, and even reviews.

ecommerce responsive design

ecommerce responsive design

Source: Bureau Tonic

When you’re deciding what to cut for product pages on smaller screens, find other elements besides product images. In fact, center the mobile page around a prominent image.

5. Don’t compromise calls-to-action either

After product images, a product page’s call-to-action (“Add to Cart”) is one of the next most important elements. While desktop views often have the luxury of placing images and product details, including the CTA, side-by-side, tablet and especially smartphone views don’t.

ecommerce responsive design

ecommerce responsive design

Source: Bugaboo

While it’s tempting to put the CTA off to the bottom of the mobile version to save space, it’s more effective in a leading position. As Practical Ecommerce’s Armando Roggio explains, keep the CTA visible on the mobile product page’s first screen. The CTA should be more accessible than less important elements, such as lengthy descriptions, specs, or customer service options.

6. Smaller navigation menu for product pages

Conserving screen real estate for mobile devices is a central goal of responsive design. As we mentioned above, product images and CTAs are some of the most important elements of product pages on any device. To make more room for these, try collapsing  or hiding the navigation menu.

image08

image25

Source: Advice from a Caterpillar

If you’re not a fan of hamburger icons, you can at least shrink your menu down and use smaller icons.

Conserving screen real estate for mobile devices is a central goal of responsive design. Click To Tweet

7. Vertical Elongated Menus

The conventional horizontal navigation menu doesn’t translate well to mobile screens. Jake Rocheleau points out that vertical elongated menus give ample white space, comprehensive legibility, and easy clickability for mobile home pages.

ecommerce responsive design

ecommerce responsive design

Source: H&M

Some designers steer away from vertical elongated menus because it makes the home page too long, but this isn’t as big of an issue as they think. Your customers are used to scrolling more on mobile devices, and gesture controls make it easier. They’ll appreciate the clarity of communication and appearance more than a shorter page.

8. SVG Icons

Scalable vector graphics go hand-in-hand with responsive design, and icons go hand-and-hand with navigation. Put them together, and SVG icons just makes sense. The same icon set can be used on every device, giving that sense of familiarity we mentioned at the start.

But having icons that get bigger and smaller isn’t enough. Joe Harrison’s responsive icon technique combines SVG icons with image spriting — using a batch of small images in the same file so the client only downloads a single image from the server.

ecommerce responsive design

Screen Shot 2016 08 25 at 4.36.40 PM

ecommerce responsive design

ecommerce responsive design

Source: Responsive Icons

For more specifics on how to implement this yourself, Ilya Pukhalski explains the details in this Smashing Magazine article.

9. Card layouts

The Card UI layout is one of those special solutions with many different benefits, as Jerry Cao explains.

“The usefulness of the card UI pattern goes beyond loading times and translating across different screen sizes. Bite-sized content matches the attention span of most web users (especially on mobile devices). Nurtured by Pinterest and then popularized by social media sites like Facebook and Twitter, card UIs can now be found across websites of all industries.”

Cards work well for responsive design because their grid structure can be reorganized to fit any screen size without disrupting the flow of the page. If a few cards fall into the next row, it’s usually not a big deal. This holds true especially for eCommerce, where each product’s details and picture fit snugly into a self-sufficient card.

The Card UI layout is one of those special solutions with many different benefits, as @jerrycao_uxpin explains. Click To Tweet

ecommerce responsive design

ecommerce responsive design

Source: Threadless

Moreover, cards work well with touch controls on mobile devices; the user knows almost instinctively to tap them for more information.

10. Don’t rely on device-specific controls

Be careful with device-specific controls, such as hover text/controls and gesture controls. Design a navigation system that can work independently of these maneuvers.

image04

 

image00

It’s still a good idea to include them, and taking advantage of each device’s unique properties is just good design. However, device-specific controls should be optional, so the shopper can find their way regardless of the channel.

Don't rely on device-specific controls: hover text/controls and gesture controls Click To Tweet

11. Add “padding” to buttons for smaller screens.

While in many cases your screen elements should get smaller as the screen size shrinks, the opposite is true for clickable buttons. When buttons convert from desktop to mobile, they must have the appropriate size so that the shopper can comfortably tap them. (We all know how frustrating tapping tiny buttons on mobile devices can be.)

ecommerce responsive design

ecommerce responsive design

Source: Bellroy

Android’s guidelines suggest a minimum size of 48 CSS pixels (7mm), but a Smashing Magazine report says between 45 – 57 pixels, to account for fingers wider than the average.

@smashingmag report says between 45 - 57 pixels, to account for fingers wider than the average. Click To Tweet

Conclusion: The Future of “mCommerce”

As we touched upon at the beginning of this article, mobile online shopping is growing at an astonishing rate and is anticipated to keep increasing. The Rackspace study cited above posts these projections for mobile eCommerce in 2017:

  • Percentage of total online sales: 31% ($109 billion)
  • Number of mCommerce-enabled buyers worldwide: 811 billion (from 629 billion in 2015)
  • Average smartphone order: $116 (from $43 in 2013)
  • Average tablet order: $307 (from $74 in 2013)

These optimistic predictions for the mobile future of eCommerce speak one message loud and clear: the sooner you upgrade your estore’s mobile presence, the better.