How To Design E-Commerce Sites for Mobile

Posted by Robin Martin on December 6, 2017

There can be no more dragging one’s feet toward the reign of mobile supremacy. According to 2016 CMO Council facts and stats, by the end of 2017, mobile commerce will be responsible for almost a quarter of the e-commerce sector’s total revenue. According to Cisco, by 2020, at least 80 percent of mobile data traffic will originate from mobile devices.


Gone are the days when it was enough to simply be mobile responsive. Last year, mobile traffic surpassed desk top traffic for the first time. Mobile’s ascent has been steadily growing since 2009, along with desktop’s decline. But now we are in a firmly planted in a new era of mobile-first.

Some foreshadowing of the of mobile dominant future: Google is hard at work on a new, mobile-first web index. What does it mean for you? To provide a seamless user-experiences, e-commerce businesses should create web interfaces that conform to any screen size or device. The mobile experience must be as good as possible—or users won’t come back. Here are three essential things to consider when moving toward mobile.

Mobile Essential #1: Orientation

Because mobile devices put a premium on real estate, the task for designers is distill, distill, distill. You need to streamline your desktop site version but in ways that don’t detract from the user experience.

The biggest changes from desktop to mobile sites are due to device width, which can only accommodate vertical scrolling. In this context, a large navigation menu doesn’t make sense. Scrolling is cumbersome and can cause a bunch of mistaken clicks taking users on a wild goose chase. Uncooperative navigation turns mobile users off, so do your best to adapt to the smaller vertical by paring content down to its essentials.

Mobile Essential #2: Organization

Mobile first means adjusting not only the layout of the content but even the nature of the content itself to optimize the user’s experience. The priority for mobile content is improved usability. This would include an easy way to link to checkout, access to every category on site, and clear, zoom-in images for a more visual heavy content experience.

Mobile Essential #3: Truncation

Forms are nobody’s favorite—and this is true in spades for mobile users. You will have to make tough choices in terms of what data you need to capture, such as choosing between phone number and email address rather than both. But there are advantages to keeping it short. It expedites the checkout process, which is key to mitigating shopping cart abandonment.

For a full guide on how to build and optimize your utility's online store, download our e-book, "Best Practices for Designing Your Utility's Online Store."

Best-Practices-Online-Store-CTA copy.png

Download E-Book