Complete guide to mobile first design

Designing mobile first is an important strategy when creating a website or app. In the last 5 years alone, the number of mobile phone users worldwide has gone up nearly one billion, from 4.1 billion to 4.93. That’s a lot of mobile phone users.

At Justinmind, we take the mobile-first philosophy seriously. In fact, our prototyping tool takes a mobile-first approach very seriously.

With such large numbers of people using mobile phones to navigate the web and use apps, it makes sense to give responsive design priority.

We thought we would give a rundown of what mobile-first design is and how you should adopt it when creating user experiences for people.

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 that 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 desktops coupled with the rise of mobile phones over the last 5 years has shown that mobile-first design has to take priority.

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 a strong foundation. This foundation will help strengthen other designs for tablets and desktops. The foundation should always be content and mobile-first design emphasizes content over navigation – users get the information they need quicker.

This will also make your life easier since mobile-first design starts off with tackling the hardest screen size to design for. The rest inevitably falls into place.

Mobile-first design forces you to really focus and maintain clarity by removing any unnecessary user interface decoration. By removing any distractions, you’ll invariably improve the user experience and that makes good business sense.

Content takes center stage in a 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 the 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.

Breakpoints are also important to mention. Normally you would define your breakpoints depending on the device.

For example, when you resize your browser from large to small, you will see the presentation of the content change at specific breakpoints – these breakpoints are used to change the content to fit the device. On our blog, for example, when you resize below 1223 pixels wide, the content will change to suit the newer size.

This approach becomes untenable when you consider the vast number of mobile devices on the market. Because of this, it’s best to create content-specific breakpoints. What does that mean? It means creating a breakpoint for when the content is no longer easy to consume. The best sort of design is one that solves future problems prematurely.

Justinmind’s wireframe tool new responsive features make creating a website that’s mobile-first a cakewalk.

Our new features include scalable UI elements. The new size attribute allows you to define an element’s position by pixels as well as by percentage.

As such, UI elements will remain in place with a fixed percentage relative to the size of the canvas – so no matter how you resize or which device you view the content on, UI elements will stay in the same position. Consistent across all devices.

With the new Pin feature in Justinmind’s app prototyping tool, you can stick UI elements on the canvas and they’ll adapt depending on the screen size. Locked ratios mean your images maintain their clarity and size so you don’t need to worry about creating awkward workarounds.

And to save you time when crafting mobile-first designs, you can create your own responsive widget libraries. If you need to use a widget time and time again with your own specific settings – save it. It’ll maintain those responsive properties.

Our new release comes with updated templates, including a responsive template for the web which is designed with mobile-first in mind. In Justinmind, create a new prototype and under templates, you’ll find a fully responsive example for you to tinker with and make your own.

Explore the settings yourself and play around with the new properties to get a better feel for the mobile-first design features included in the new version.

Neglecting mobile design in this day and age is a UX design sin. Delivering a pleasurable user experience should be at the heart of what we do. Using this mobile-first approach will not only make your life easier as a designer but it’ll make the life of the user easier too. And isn’t that why we do this?