What Is Mobile First Design?

A mobile-first approach to website development means that we start the design from a mobile perspective and then expand its features to create everything else.

Before the idea of mobile-first design came about, programs and services started with desktop sites. Only after a desktop site was up and running would developers make the site responsive for viewing on mobile devices, create a separate mobile website, or just leave the website as is. After all, if the user really needs to use the website, developers thought, “users can cope with a cramped interface, right?”

That’s what developers used to think. Now things are different. Mobile browsing has exploded in popularity in recent years, and statistics now show that 70–90% of users access websites and other online services from their phones. And thus, a new approach to design and development was born. A mobile-first approach means you start designing a product for mobile devices first, which is usually a smartphone screen. Then, you move on to adapting it to desktop devices or miss them out entirely.

How it works

The mobile-first approach:

• Start by creating a layout that you’ll use to build a mobile version of your product. By doing so, you’ll make sure that everything looks great on a smartphone screen. Then, write code according to that layout. Alternatively, you can write code and build a layout simultaneously using a prototype.
• Once the mobile version is complete, create a desktop version. If you don’t need a separate desktop version, you can make your mobile version scale up to a larger screen.
• If you want to improve or fix a feature, do it on the smartphone version of your product first, and then the desktop version. Sometimes, a mobile version can work better than a desktop or web version.

Sometimes, it’s not even possible to access a service via desktop; the website will just prompt you to download the mobile app (and occasionally the desktop app).

Here are some peculiarities of mobile-first design

• When users visit desktop websites or applications, they usually use a mouse that allows them to click on different parts of the screen more accurately. When users do the same using smartphones, they use their fingers. As such, all buttons and links in the desktop version can be small, while in the mobile version, they have to be bigger.
• Desktop users don’t just use a mouse, they also use keyboards. A smartphone keyboard is small and rather slow to respond. Besides, it takes up a lot of screen space. While a desktop app can ask the user to enter information using the keyboard, mobile apps should avoid this where possible.
• And vice versa. A desktop application has to support keyboard shortcuts and hotkeys, such as commands to copy and paste data. Meanwhile, the mobile app has to support code completion and autofill for certain fields.
• Modern smartphones may be larger than their predecessors, but they are much smaller than an average desktop computer. As such, mobile screens are best suited for just one column of content with infinite scroll. Desktops, on the other hand, are large and wide. They allow you to spread content across several columns, make showcases, and design fancy layouts.
• Smartphones are stretched from top to bottom, whereas the desktop is from left to right. Ideally, content for a phone has to be vertical, for a desktop it should be horizontal.
• The basic function of a smartphone is to make calls, so this feature can be implemented as part of the application functionality (for example, to call a taxi driver). Meanwhile, desktops do have apps that support calls but it’s much more natural to do it on a phone.
• Your smartphone knows a lot more about you than your desktop: it can recognize you by your fingerprint or face, and it has a built-in payment module. The smartphone also knows its location. The most a desktop could traditionally do is remember your card number and know which city you’re in. This means that smartphones are way ahead when it comes to recognizing your location, offering you delivery methods, and offering built-in payment methods.
• Your smartphone is your private space, so messages or notifications attract your attention. You need to think carefully when sending anything to a user or notifying them. A desktop is a terminal that you come to when you need it and then leave.

This discussion can go on and on, but it’s already clear that there are plenty of differences between mobile phones and desktops.

Where is it used?

Mobile-first is used to show a product, service, or project on a small screen without sacrificing anything, for example:

• Online stores (Amazon)
• Food delivery service apps (DoorDash)
• Taxi services (Uber)
• Social networks (Instagram)
• Remote services apps (online banks)

If your product is simple enough that you can view it using your smartphone and understand what it’s about, then a mobile-first approach makes sense.

Pros and cons

The main advantages of the mobile-first approach:

• The majority of users get normal functionality on the website or in the application as soon as you launch your product.
• If your service is convenient to use, more people are likely to order your product.
• Pages optimized for mobile load faster than responsive ones.
• Search engines give them a better ranking and show them higher in the search list.

The difficulties begin when you have to make not just one, but two products: for smartphones and for everything else. This is because you need to take into account that different screens have different resolutions, with different browsers, and all of this must also be taken into account when designing different interfaces. Additionally:

• Products take more time to develop if all smartphones are meant to be supported along with the desktop version.
• Design and development can cost a lot more.
• There is a need to maintain the designs for old devices with smaller screens or non-standard specifications.

Want to know more about creating web applications? Check out Practicum’s software engineer course where we’ll teach you the fundamentals of web development, including the tools you’ll need to implement mobile-first design practices on your own. Best of all, the first course is free.