Simple Steps to Mobile-First Web Design

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.

Screenshot of Goreen's mobile home page

The Guerin Brothers’ category menu uses images of hats on their mobile site.

,

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.

Screenshot of Hoka's home page on mobile

Hoka repurposes its desktop video to capture the entire vertical space on mobile.

,

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.

Screenshot of the home page of the FIGS mobile site

Figs uses vertical video on its mobile site versus what’s shrunk to what’s in the desktop version.

,

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.

Screenshot of home page of Paka's mobile site

Paka Apparel uses completely different videos on its mobile site.

,

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.

Screenshot of the home page of Outdoor Voices' mobile site

Outdoor Voices has a vertical static image for mobile, which is different from desktop.

Source link

Leave a Comment