In 2010 at the Mobile World Congress Google CEO Eric Schmidt announced that moving forward, web designers should put mobile first. In the last decade, mobile phones have become an integral part of our lives. It is exceptionally uncommon to meet anyone who doesn’t own a mobile phone or even smartphone at that. This rise in the use of smartphones means the way people access the internet has also evolved away from just desktops, in 2018 alone 52.2% of all global web traffic was via mobile phones.

Designers can no longer get away with designing for desktop users only and must learn to adapt. So what is mobile-first design and why does it benefit anyway?

What is it?

Mobile-first design is exactly as it sounds: sketching, prototyping and designing for mobile first and then scaling up to larger screens from there. Mobile-first ensures that you deliver the right User Experience (UX) to the right screen.

With such limited space available on a mobile phone screen designing for that makes far more sense for the UX. Designers must prioritise the elements of the website that are most important to create a strong base to work from.

Mobile-first design has been somewhat of a replacement for strategies such as responsive or adaptive design. Both these design strategies focus on the desktop, or the largest screen, first and then the design is just altered slightly to fit a smaller screen, leaving the smaller screen a bit of an afterthought for designers.

What are the benefits?

Google Ranking

After Eric Schmidt’s announcement at the Mobile World Congress in 2010, 8 years later Google followed up on the warning announcing that they now use mobile-first indexing for over half of all web pages globally. Mobile-first indexing means that Google will look at the mobile version of a website in order to rank it before the desktop version. By using the mobile-first design strategy web designers can greatly increase the chances of a website ranking higher on Google.

Mobile Conversions

While average conversions on a website are still higher for desktop than that of mobiles globally, with desktops converting at around 3.82% and mobiles at 1.32%, the gap is slowly closing as mobile usage increases.

By following the mobile-first design strategy a business can greatly increase their conversion rate. As the number of people accessing the internet via mobile phones increases and trust starts to build towards mobile websites the number of conversions made is also likely to increase.

Progressive Enhancement

In web design progressive enhancement refers to starting with a strong base of designing and building up to a larger design for desktop. By using the mobile-first design strategy the design of a website starts with only the most important elements providing a strong base to build on. It is far easier in web design to upsize functionality and software than it is to try and downsize what is there already.

As well as providing a strong base for a larger website to be built on, the mobile-first design also provides a strong base for UX design to be built on and improving its effectiveness on all devices. By starting with only the most necessary and important elements of the website you are ensuring the user will have the greatest experience for that screen which will then only be enhanced as they move onto a larger screen.

Mobile-first is Content-first

When designing for mobile-first it is important to consider that the need of those searching on mobile is probably different to those searching on a desktop. While those searching via desktop are probably looking for more detailed responses and additional information, on mobile it is far more likely the user is simply after quick information.

When designing for mobile-first the content must be very carefully considered. What does the user need to know first or most importantly? Designing this way will make the UX a lot simpler too as it will force the designer to reduce their use of extra functionality and elements in order to focus on that which is essential.

This doesn’t mean the extra functionality isn’t necessary but it is where you must consider how the user is searching and what their purpose may be. For example, a desktop user may be looking for more in-depth information and expecting full-size imagery and more whitespace whereas the mobile user just wants to be able to find the answer quickly.

Neglecting to consider mobile-first web design in this day and age is somewhat of a virtual sin. Providing an easy experience for users on a website is after all the priority, by designing with the user in mind you are ensuring they have a pleasant experience.