It is rare to encounter a website that is not usable on a mobile device.
All major site builders and platforms, including e-commerce, automatically adjust content to screen size, enabling simultaneous mobile and desktop versions. But the process is generally flawed. Most platforms only adapt and scale the desktop layout to mobile. The mobile version is an afterthought.
Take a closer look at your analytics. The number of mobile visitors is likely to increase, but the percentage that converts to customers remains low.
It’s time to adopt a mobile-first approach to web design.
A mobile-first design can future-proof a site by ensuring that it remains attractive and relevant. Get started with key ingredients right away. Here are five ecommerce examples.
Examples of mobile-first design
Gorin Brothers, a hat manufacturer, implements a category menu with product images for a mobile site that doesn’t exist on a desktop. It provides easy navigation with one finger.
Hoka, a shoe company, repurposes its desktop home-page video to occupy the entire vertical space on mobile instead of scaling it to fit the width. This creates an impressive mobile effect that is not there on desktop.
Figs, a medical scrubs company, has also included vertical video on the front page of its mobile site to shrink it from the desktop version. Parts of the video indicate that it was shot vertically for mobile and cropped for desktop.
Paka Apparel uses a completely different video on the home page of its mobile site than on desktop. Mobile is a more lifestyle centric one.
Outdoor Voices, another apparel merchant, has a dedicated static image for mobile, separate from that for desktop. Instead of trying to fit the wide shot into a vertical device, the site chose a different (vertical) image from the same photo session. This simple and easy tactic is becoming increasingly common, but many companies overlook this cost-effective option.