Mobile First Design: Guidelines

What is a Mobile First Strategy?

A Mobile First strategy is a product strategy that prioritizes design for smartphones, tablets and mobile devices over design for other larger devices such as desktop PCs.

Surprisingly, by developing for the small devices first, designs for larger displays are automatically optimized.

Content is prioritized, the displays are not overloaded. Merely adding useful content is easier than shortening content that has already been displayed.

Mobile First vs. Desktop First

Desktop First Development

A company that develops a website often starts out by assuming that the website will be viewed by users on their desktop PC.

Design methods like Responsive and Adaptive Web Design often use a top-down approach.

Here the website is first developed for large screens, e.g. for computers and laptops.

There is a lot of space on these large displays. It is likely that unimportant information or design elements will be added. This is not a problem for the user experience on a desktop.

For mobile websites, however, this can become a problem. If not enough content is deleted or redesigned, it quickly leads to a flood of information and a confusing and overloaded design for mobile devices.

Users of mobile devices expect faster loading times of mobile websites. And this can have a crucial impact! Every additional loading second causes conversion rate to drop by up to 20%.

Due to the flood of information when following the desktop first approach, however, fast loading times often can not be guaranteed.

Integrated functions such as GPS, voice input and access to the user’s calendar or contacts are often not included by this type of development. The subsequent integration of these functions is often complex and difficult.

However, if a desktop website already exists, this approach is not wrong.

It is often faster to convert the web app for mobile devices than to start from scratch. Responsive and adaptive web design helps to generate the best possible user experience.

Mobile First Design Guidelines

The Mobile First guidelines were developed by Luke Wrablewski in 2009.

It avoids the problems of the desktop first strategy described in the previous chapter.

Mobile First helps to make the content not too heavy even for the smallest devices. Instead, it starts with the most important information and core functionalities.

Furthermore, the specific functionalities of the device, e.g. access to the user’s internal camera, contacts, and calendar, should not be ignored. Unlike the desktop first strategy, these can be implemented directly.

This can open up many possibilities and create a better user experience.

After the page has been developed for the smallest device, it can be converted for larger displays.

Information and design elements can be added for this purpose. This process is much easier than the other way around.

Advantages and Challenges of a Mobile First Strategy

• Focus on the core content: Since the space on a mobile device is small and the design has to look clean and polished, you have to prioritize. The Mobile First approach prevents you from adding unnecessary functions and content.

• Stop forgetting important content: The strategy requires that you prioritize your content before you start developing. Often, developers forget essential content and add them later. The mobile first strategy forces you to plan first and develop afterward, therefore preventing you from forgetting important content.

• Standardized user experience on mobile devices: Trying to convert content from a desktop page to a much smaller display is like playing Tetris. Sometimes you have to rearrange the different elements in a way that you won’t recognize that both pages belong to the same company. It’s much easier the other way around.

• Faster download times: When loading a website on the browser many elements (images, videos, audios, etc.) get automatically loaded. Mobile versions of the same website often hide these elements because of the reduced space. What they don’t think about is that the contents get loaded in the background, too. This causes long loading times. When using the Mobile First approach, this doesn’t happen.

• Desktop websites get optimized too: Because you don’t even get the chance to place too many elements and contents, you don’t overload your desktop website.

Challenges of a Mobile First Strategy

The Mobile First Guidelines have many advantages, but there are challenges you have to think about and deal with.

Moreover, you have to think about if the Mobile First Strategy is the one and only strategy for you.

Yes, the strategy can be immensely successful. But not for every business. Don’t try to force yourself to create a Mobile First strategy!

The Mobile First strategy is not an all-in-one strategy suitable for every purpose. It has some disadvantages and challenges you have to deal with:

• The Mobile First strategy requires time and effort

• Requires a team that has experience with this method

• Requires concrete planning

In order to help you to decide if you should follow the mobile first strategy or if another strategy would be better for you here are some questions that should help you to decide:

• Do your customers prefer to use a smartphone or a desktop?

• Would more customers visit your website if you had a mobile-optimized website?

• Do you have the resources and capabilities to implement the Mobile First approach?

And probably one of the most important questions:

Do you already have a desktop optimized website?

Then you would have to start from scratch again to use the mobile first strategy. In this case, you should probably use a different approach to create a mobile app or website.

Related articles:

• You Should Optimize Your Website: Adaptive vs. Responsive Design

• The Ultimate Guide to Mobile App KPIs in 2022