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 a 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.

Mobile-first design vs. other design methods

Responsive web design is a design method that allows a website to fit the screens of different devices automatically. It suggests that design and development should respond to the user’s behaviour based on the device they are using. Responsive web design is a well-established method used by most web designers, and it ultimately creates a better user experience by reducing users’ operations such as panning, scrolling and zooming. 

Progressive enhancement refers to the design method starting with a strong base of designing for the lower browser (e.g. on mobile devices) 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 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.

On the other hand, graceful degradation is the opposite of progressive enhancement, where the website design starts from a fuller, more advanced version that would be displayed on desktop. The designs then have to cut features or content in order to make the website compatible with a mobile browser. 

In most cases, progressive enhancement design wins over graceful degradation. Mobile-first design is exactly a rule of progressive enhancement, and therefore there is no wonder why it is such a successful design method for web designers. 

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.

Mobile-first design principles

When designing for mobile-first, then desktop, it is necessary to sort your information in primary, secondary and tertiary content to allow the essential content to be present on the mobile site, and then more can be progressively added to the larger desktop version. 

There are a few mobile-first design principles that you can follow. As we have already mentioned, Content-first design is essential when designing for mobile because due to the reduced screen size, the content has to be clear and concise with all the essential information available at first glance or within a simple click. 

Keep the design simple  

Simplicity is key in mobile design. When users handle their mobile devices, they are using their fingers as opposed to a precise cursor, so you should not include too many trendy desktop features such as pop-ups. It is also important that everything is easily reachable, as the website should accommodate people using their phone with only one hand. 

Make sure that your mobile site has a quick load- time

Users are much more distracted and likely to bounce when using mobile devices in comparison to desktops. This means that the performance of your mobile website is key. The connection speed should be quick and the links should work well to give the user a pleasant and easy experience, which will, in turn, reduce the bounce rate. 

Keep the visuals captivating

As mentioned above, users on mobile devices are more likely to leave your website due to distractions. It is therefore even more crucial that you use images that are attention-grabbing, bright and memorable. (But remember, the images cannot be too big, as this could slow the speed of your website!) 

Prioritise contact information

You are more likely to increase your conversions if you display a clear contact method so that your customers can easily contact you. A good way to do this is to include a live chat on your website, which works especially well on a mobile browser. 

Conclusion

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.

Get in touch