Why bother going mobile-first?
The way people use the web is changing. In 2017, mobile made up as much as 63% of all website traffic – and it continues to grow each year. Despite this staggering statistic, most web agencies (including us until recently) continue to prioritise desktop design over mobile. There are a few obvious reasons for this:
- Designing for mobile is challenging
- It’s easier to impress clients with flashy, polished desktop mock-ups
- We humans are resistant to change
However, as we’ve taken the leap, we found there are many compelling reasons to design websites with a mobile-first approach.
The benefits of mobile-first design
When designing for a mobile device, the most obvious difference is the size of the screen. A mobile screen is a lot smaller, which at first feels constricted, constrained, and limiting. This may sound undesirable, however these ‘limitations’ consistently lead to many unexpected benefits.
We can’t have everything on a small screen at once. This forces both designer and client to rigorously prioritise. The only way to progress is to consider what is most important, which leads to the toughest decisions being made at the start of the process. This means critical content is baked into the user experience from the beginning, resulting in a more focused, deliberate design.
Better performance on key devices
It makes sense to have your website perform best on the device most people use it on. Which is to say, there’s almost no point in having a slick homepage on desktop, when 92% of your visitors are on a mobile device, where that same page is clunky and slow.
It’s common for designers to whip up killer desktop designs only to realise later that key features just don’t work on mobile. Then what? Usually it’s one of the following:
- Replace the feature with something substantially less effective on mobile
- Spend time rebuilding the feature so it’s at least usable on mobile
- Scrap the whole idea and start again
Mobile-first design avoids these issues, and ensures top performance on all devices.
There are more subtle differences when designing for a mobile device that pose interesting challenges for designers.
- No mouse cursor – Instead, we use touch and gesture interactions, which leads to more intuitive experiences that don’t require a cursor
- Less resources – A mobile browser might have trouble rendering advanced visual effects, which leads to more elegant visual design solutions
- Navigation – Finding your way through a mobile website can be absolutely painful if it’s poorly designed.
Overall, designing mobile-first forces us to think outside the box, and reconsider some long-standing design patterns.
Progressive enhancement vs graceful degradation
We start with mobile designs, then gradually build them out, adding in more advanced features that will work on larger devices. This process is called progressive enhancement and is pretty much the best way to design a website in 2020. We’ve found it produces better results on all devices, not just mobile.
The opposite approach is called graceful degradation – where designers create the final desktop product, then work backwards to make it function on other devices. The main problem with this approach is that when features are trimmed (as opposed to added) it’s quite possible the website won’t do what it was originally designed to do, as the whole experience can change dramatically.
With mobile-first design, we make sure the experience is excellent on all devices, with only a few extra bells and whistles on desktop. Without these extra features, the website still does it’s job.
Switching to mobile-first design in 2020
Sadly, in 2020 many sites are still rubbish on mobile. There’s never been a time where a poor mobile experience can be more damaging to a brand or business. Similarly, there’s never been a time when a great mobile experience can help your business goals! This is ultimately what motivated us to change our approach.
Of course, we can’t always assume that mobile is the primary device. Context, user journeys and other factors have to be considered, as usual. Remember, it’s mobile-first, not mobile-only! The goal is to deliver an awesome experience consistently across any device, from the smallest smartphone to the biggest 4k display. Mobile-first design isn’t a perfect approach, but it’s definitely been a very positive change for Pixel Palace.
Are you a fan of progressive enhancement or graceful degradation? Let us know why in the comments below!