24th March 2020
New to Web Design? Read our Simple Guide to Web Design Terminology.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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!)
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.
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.
16th January 2019
5 Web Design Tricks To Improve Your Website’s Performance
12th September 2018
UX Design – What is it and Why Does it Matter?
28th August 2015
What a Web Designer Does (that you may not be able to)
Leave us some information, and get a reply as soon as today.
Conversion-led with proven R.O.I. success
We're confident you will see instant results
Established since 2003. Servicing local businesses and global brands
Patient, friendly and supportive
Rest-assured, you'll be in safe hands with a personal team
Are you in need of more business?
We can double your conversion rates by optimising the user experienceGet a FREE UX audit on your website