Design

Why we finally switched to mobile-first design

We recently decided to design our websites mobile-first. Up until now, we would adjust a desktop experience to work on mobile at the very end of the process. Now, we begin by designing for the smaller screen. It’s quite literally mobile-first!

Matt Jones is a UX Designer and Front-End Developer working at Pixel Palace in Brisbane, Queensland.
Matt Jones
Head of Digital Experience & Strategy

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

Prioritisation

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.

Problem solving

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

Sadly, in 2018 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!

Need a new mobile website?

We design and build awesome mobile websites that kick goals for our clients.

Get in touch