Mobile-first approach

The mobile-first approach implies that projects are born with the mobile version in mind from the get-go. This version can work as a seed to grow different viewports as tablet and desktop, providing many benefits like usability, functionality, and a consistent user experience. The mobile-first approach goes a long way and shows the victory of responsive design and progressive advancement, two terms we will review in this article. Mobile-first was not a conscious decision by developers or designers but the logical consequence of an ever-growing mobile market.

 

Since 2016 internet usage worldwide has been dominated by mobile and tablet users, and—yes, you guessed it—this trend has only continued. Nowadays, there are 5.27 billion mobile phone users in the world. Consider that it is more than 65% of the current over 7.86 billion people on Earth. Even if you were not thinking about showing ALL of them your site, the mobile version might be the first glance they get at your business. According to some studies, more than 9 in 10 internet users aged 16 to 64 visit online retail stores each month. So even if you are not selling, they are most certainly buying.

 

The mobile-first approach then has a crucial role in product development and design. It can help your site get the views and the conversion rate you were seeking. Even if you are skeptical about mobile device importance, Google has established its mobile-first index. Now Google is crawling the mobile version of sites over desktop, producing the need for a mobile-focused development with usability, functionality, and speed at its core. If you want to rank higher and more organic traffic, you cannot let this out of your designers' plan.

 

Even if the user stays the same, mobile usage diverges a lot from the classic desktop style. Today you might have someone scrolling on a crowded bus, walking down the street (what’s wrong with these people), or ignoring their next of kin over dinner (what’s wrong with them also?!). These might not be the ideal moments to build your brand but, without them, you might be losing business. That is why a tailored design is essential with a mobile-first approach.

Responsive vs. adaptive design

When designing for multiple devices, responsive vs. adaptive design is the typical struggle, even if nowadays, responsive design seems the way to go. While adaptive design requires you to code each viewport aside, responsive lets you create a liquid site that changes shape with the browser size. This was a neat solution to solve the problem of multiple device sizes. With a responsive design, you could automatically adjust to any device on the market, be it desktop or mobile. But a problem emerged, what if designing for desktop-first meant a responsive but baroque mobile design?

Progressive advancement and graceful degradation

Progressive advancement and graceful degradation are two terms coined for responsive web design. To create a user interface that adjusted to different devices, designers created custom versions accordingly, which could be achieved in two ways.

Progressive advancement

Progressive advancement begins the design process with a lower browser such as a mobile phone to build up from there. It means that designers have to be very critical about the primary functions and features, setting up the minimum viable product, and checking for proper functionality on the least complex device first. Extra features can be added later but having built up from the simplest version, ensuring a consistent user experience with clearly defined goals and better usability.

Graceful degradation

Graceful degradation works the other way around. The high-end desktop version comes first, and then it is degraded to fit the least complex devices, such as mobile. This way of working, however, can present its difficulties. Mobile often becomes an afterthought and can result in an ad hoc, poorly created design with a user experience lacking consistency and noticeably pruned.

 

As responsive design has won the game, the same is the case with mobile and progressive advancement. Building up from a strong core of functionality, usability, and clean design will benefit your project with a mobile-first approach. Although, it can also splash some of that simplicity in a cleaner desktop version.

User experience vs. user interface

Mobile devices imply a particular user experience and interface that sets them apart from desktops and tablets. Nowadays, most people carry a phone in their pocket, and the experience around these devices is non-stop. Whether through notifications, apps, security, or web browsers, users are constantly reminded of the piece of technology that goes along with them. Since the victory of smartphones and the ever-expansion of social media, the connection among humans has risen to unprecedented levels. Today, it’s necessary to design an extraordinary experience for mobile users.

 

Creating a satisfactory user experience for mobile not only implies throwing on the design to-do list (port to phone) but actually thinking that the majority of users will first get to your site from their phones. That is why the mobile-first approach is much needed. User experience vs. user interface is not a true dilemma. User experience and user interface design, as well as first impressions, are key for conversion. You already know it, but the internet has become one of the most competitive spaces; the ease of use and the endless creation of new projects means that you have to show you are different from the get-go. That initial distinction now happens on mobile.

 

At Awkbit, we don't recommend ignoring relatives or walking or driving while using your phone (no one should do the latter), but we are not here to tell you off. If you wish to design a responsive website through the mobile-first approach, we will be at your disposal with a crafted user experience to scroll to forgetfulness. Is your project mobile-first? Did you just realize that you haven’t checked the version since the Blackberry days?