How to use mobile first? Pros, cons and use cases

Why should we focus on the mobile version first, and what does it mean for end-users? Learn about the mobile-first design approach.

15th March 2019

Anita Steć

UX Designer

For the past several years in a row, we have been told, “this year is a mobile year.” We heard it at conferences, we read it in numerous articles.

It indeed is true, that the mobile first approach can already be considered design standard. This makes sense because visits from smartphones and other mobile devices already represent a significant percentage of page views.

While there is huge buzz regarding this phenomenon, it also has its drawbacks. That’s why we prepared use cases and potential threats showing where it could go wrong, and tips on how to solve some of the potential risks.

In this article you will learn:
What is mobile first?
Why use this approach?
Risks in using it
How companies use mobile first? (+ use cases)

What is the mobile first approach?

Mobile first is a design philosophy that involves creating mobile versions of applications, websites or products at the beginning and then adapting them to other platforms.

In the buzz surrounding this phenomenon, designers often forget the progressive enhancement strategy. It means first we are dealing with the variant that causes the most difficulties and limitations. This most often turns out to be the mobile version. This choice is influenced by the size of the devices and the different ways of interacting with them. Therefore, in the mobile version, we include all the necessary and critical functionalities for the project. In the next steps, we create versions for larger devices. In theory, the essential features are being extended during this stage.

At least, this is what the process should look like.

Want to improve your UX?

Why mobile first?

Screen size is the critical reason for designing in line with the mobile first principle. It imposes many limitations because on mobile devices we can fit much less information than on desktop screens. Therefore, when designing a mobile interface, we have to pay special attention to avoid “crowding” and overflowing it with data. More importantly, we have to remember how we interact with it. In this case, we do not have a precise cursor, but much larger fingers – especially the thumb.

Therefore, all clickable elements must:
– have an appropriate size (with minimum dimensions 44 pt x 44 pt),
– be easily accessible with a thumb,
– be placed at sufficiently large distances from each other.

Applying these rules allows avoiding accidental clicks on areas we don’t want to click on at all.

What does it look like in practice though?

A small checkbox can work well when you click on it with your mouse. However, performing the same action with your thumb can be challenging. Hence, it is worth considering other alternatives, that allow users to select this option by clicking on a larger area of the screen. A great example of such a case is the solution implemented in the Duolingo application. What is important, is that their solution works equally well after moving it to a larger screen. In this case, mobile first worked:

Why not mobile first?

The mobile first approach has one major flaw. When using it, it is easy to forget about the possibilities offered by a desktop. And still, we also want to take full advantage of them. Therefore, direct transfer of mobile design to a larger screen may result in solutions that will no longer be user-friendly. A well-known example of such an error can be a usage of the hamburger menu on the desktop. It is a menu hidden under a popular icon, consisting of parallel, horizontal lines. This solution turns out to be useful on a small screen because it is a great way to “save” space. However, it often has no justification in a desktop application. For the sake of consistency between the two variants, we give up on the simplifications that we could offer the user on a larger screen. In this case, it is easy and direct access to navigation.

The Blablacar application is an example where we can even speak of mobile only approach. The desktop version here is almost identical to the mobile version. At first glance, you can notice that the designers didn’t use the desktop version of the place it offers. And the difference in size is several times! It can be easily used here to provide a user with more detailed information – for example, to explain some icons mean. Therefore, such an approach cannot even be called progressive enhancement, but only a direct transfer of data from the screen of the phone to this computer.
Anyway, see for yourself:

Let’s focus on the user

Is it possible to eliminate the drawbacks of the mobile first approach? Of course! You can replace it with the user first philosophy.

Designing for different devices is not only an additional limitation but also an opportunity. Thanks to it we can simplify the way the user performs specific tasks. Let us look at the different ways of using a keyboard on your computer and phone. In the first case, we find it very convenient. It is a quick way to fill the specific field. When it comes to mobile devices, writing with a much smaller touchscreen is not only slow and requires additional effort, but also increases the chances of making a mistake. The designer’s task is to minimize this risk. What can be done in such a situation? It depends on the context. Imagine that the user wants to introduce a payment method into the application. We can “force” them to laboriously rewrite credit card details and get lost in the maze of numbers.

Maybe instead, we would allow them to use the camera on their phones and add the card with one or two clicks? For example, Uber and Taxify (“Scan card” option) use this solution:

Simplicity = convenience

When designing for usability, we should always try to simplify users’ activities as much as possible.

Do not force them to enter complicated passwords to log into an application. There are much faster solutions, such as logging in with a fingerprint reader. Many banking applications have already implemented such a solution.

If we never forget that the mobile first approach also includes progressive enhancement., then we will also remember about the possibilities offered by the additional space available when designing for the desktop. However, this also works the other way round. When creating a mobile version of a desktop page, let’s not focus on the limitations, but let’s also use the additional features offered by a smartphone or tablet.