What is mobile first design?

Mobile first design is a design strategy that says when you create a website or app, you should start sketching and prototyping the smallest screen first and work your way up to larger screens. Essentially, it’s about delivering the right user experience to the right device.

The reason that this makes sense is because with such limited real estate on small screens, UX designers must prioritize the most important aspects of their website and apps, namely content.

For many years, mobile websites were an afterthought to the design process. An addition not a necessity. The slow decline of desktop coupled with the rise of mobile phones over the last 5 years has shown that mobile first design has to take priority.

Benefits of mobile first design

Mobile conversions rates are up 64% when compared with the average desktop conversion rates. So designing mobile first can lead to more profit for your business. And since Google ranks for mobile-friendliness, it makes sense to bear this in mind when starting a new project.

This way of designing is also beneficial when it comes to download times and users accessing your content as quickly as possible. With fewer elements, the page will load faster. When you consider a 1 second delay causing a 7% loss in conversions – it pays to design mobile first.

When you design from the smallest screen to the largest screen, this is known as progressive enhancement. It’s about designing with a strong foundation and adding enhancements as you go.

With mobile first, you create your strong foundation. This foundation will help strengthen other designs for tablet and desktop. The foundation should always be content and mobile first design emphasizes content over navigation – users get the information they need quicker.

Mobile first is content first

Content takes center stage in mobile first design. With mobile first design, you have to give your users the content that they absolutely need. Designing this way, with such stringent limitations, forces UX designers to strip any extraneous elements away and focus on the essential.

When we talk of extraneous elements we don’t mean that they’re not necessary – they’re just not necessary for your mobile users. You can still use any UI elements you remove from your mobile first design in a desktop version, for example.

This is because content is context dependent. A mobile user will have different needs than a desktop user. A desktop user may be looking for more in-depth information or additional features that wouldn’t make sense when it comes to mobile first design.

On a traditional desktop website, you are more likely to see white space whereas collapsible menus and widgets are more prominent in mobile sites. The same can be said of photos – expect full size imagery on a desktop. We’re talking advertisements and promotional material. This sort of imagery will be reduced (or even removed) on mobile websites.