Mobile-First Design in eCommerce
A mobile-first design ensures your eCommerce content displays logically without any user interface problems. It’s a smart design process you should consider when thinking about responsive website design for your eCommerce website.
Mobile-First versus Responsive Design
While both terms refer to how websites adjust to fit various screen sizes, they aren’t the same thing. Mobile first, as the name suggests, focuses on smartphones and tablets first, then larger screens second. Responsive design, on the other hand, focuses on the largest viewport first to design for scalability across all screen sizes.
Why Mobile First?
As mobile commerce continues to surge, approaching eCommerce with a mobile-first mindset guarantees your content will render across all devices. Why is this true? Because starting with the smallest screen guides proper layout of graphics and typography for other screens and determines the information priority from top to bottom.
This doesn’t mean you should completely disregard nonmobile browsers. We like to take a holistic approach to responsive design—one that takes into consideration all shoppers on all devices.
Mobile-First eCommerce Considerations
When creating a mobile-first eCommerce design, there are four key considerations to keep in mind:
Content Inventory
When your design, marketing, and merchandising teams do a content inventory, they evaluate and document every page of your website and all its content. This can include website navigation, images, links, and documents. Content inventories help decide what web pages and elements should be updated, removed, merged, or displayed, among many other reasons.
Also called a content audit, creative teams use content inventories to revise a website’s navigation structure and determine what content to include on each page. This ultimately dictates the responsive design layout. For a highly detailed, step-by-step guide on how to do a content inventory, check out Moz’s guide.
Content Priority and Design Simplification
Since smaller screen sizes display information in a vertical format, mobile-first design focuses on content layout and order. The most important information displays at the top, such as product names, images, and prices, followed by less important content at the bottom. This makes it easy for shoppers to immediately discover key information without having to scroll endlessly.
The desktop version displays two hierarchies at the top of the page: one for account information, deals, and gift cards and another for product categories.
The mobile version removes the hierarchies, replacing them with icons for only the most pertinent information: account information, search, and shopping cart followed by the product name, color, and price.
A mobile-first approach creates a more simplified set of information. Bigger screens often add information that’s not always necessary, creating clutter and confusion. When you simplify to only what’s needed and prioritize content accordingly, you enable a clean, modern layout that emphasizes important information. Whatever you choose to emphasize, whether it’s product images or calls to action, they’ll stand out on a minimal layout and render across all viewports.
Patterns
When designing for smaller viewports, the patterns you create will have an important impact on the shopping experience. When designed consistently, patterns such as forms, dialog boxes, icons, and image galleries encourage customers to interact with and dive deeper into your site.
Engaging Layouts
As you simplify your content to only the necessary elements, you’ll have to find clever ways to tell engaging stories using your layout. Because you have less space, your photography, calls to action, and product placement should create a narrative that makes it easy for customers to understand who you are and what they should do next.
This example from footjoy.com uses clear, crisp photography to help customers immediately identify what the website sells. The calls to action are simple, easy to understand, and tell customers what they should do next.
As customers scroll down the page, they see additional calls to action for alternative shopping methods, still enjoying quality photography and clear labels.
As the customer scrolls to the bottom of the page, they continue to experience the same compelling visual story, all the while viewing clearly displayed product information.
An Approach Worth Investigating
As you consider taking a mobile-first approach to designing your eCommerce site, these are a just few starting points to think about. A strong responsive design will render on all viewports with little to no user interface problems because the simplified content is displayed in a logical order.
While this mobile-first, all-viewports, holistic approach is a change from the standard design process, it’s a bit of a necessity in today’s ever-evolving digital world in which content is displayed on viewports of varying sizes.
Elena Mintzias is a senior production designer at LYONSCG and has a background in graphic design as well as search engine optimization. Her wide range of skillsets comes from involvement on a variety client-related projects as well as in-house experience. She has a passion for art and design and is a big fan of Michigan football.
