A mobile-first approach to web design

By Adrián Martin

Get more articles like this:

Related categories

User Experience Opinion

There was a point in life (which may seem a billion years ago now) when ‘web’ design simply meant designing for the big ol’ box computer.

Now of course, the ‘web’ does not just refer to the computer, but is accessible from a whole range of devices from our laptops to our tablets and our mobile phones. This means we are no longer designing for one device or one size, but have to consider every possible screen that our websites will be viewed upon.

Once it became this way, it was time to consider that a newer approach may be necessary. And in 2010, Eric Schmidt (former CEO of Google) came forward to say that Google would be taking a mobile-first approach to their design. If Google were doing it, shouldn’t we all!? This was a major catalyst for a lot of web designers, who shifted their thinking to a mobile-first approach.

A mobile-first approach

First things first, what is a mobile-first approach? A mobile-first approach means that when you are designing, you consider the smallest screen first (the mobile), working your way up towards the biggest screen (the desktop computer).

Why would you use a mobile-first approach?

We are now at a stage where great design cannot simply look great, but equally must function great, which is achieved by the combination of carefully-constructed content, UX planning, design and development.

1. Content-focused = user-focused

When you begin designing for mobile, this is the most limited device there is (in terms of screen size and bandwidth among many others). You are therefore forced to put functionality at the forefront by considering what is most essential to your design. You must nail your content down to its simplest state and make sure the most important parts of your design are prioritised, resulting in a content-focused and therefore user-focused design, which gives users what they need as soon as they need it.

2. Progressive enhancement vs graceful degradation

By going mobile-first, you are using the technique of progressive enhancement.

With progressive enhancement, you are ‘enhancing’ the site, which means you have created a project with the most basic functions and features for the best user experience possible. You are then able to build upon this and add things to make it even better as you go along.

This is opposed to graceful degradation, which means creating a full, standard website for desktop and then having to scale back and remove content and features as the viewport becomes smaller and simpler. This can cause a lot of problems as it makes mobile-first your last thought, so can lack the necessary functionalities needed to serve its users.

3. A growing mobile world

As told by Mayven, there are now more than 1.2 billion web users worldwide with 85% of new handsets being able to access mobile web. In 2016, mobile internet usage surpassed desktop for the first time. And in 2018, 52.2% of all website traffic worldwide was generated through mobile phones (Statista). What this tells us is that mobile is growing and if this continues, mobile view is should be our focus going forward.

JUMP’s mobile-first approach

At JUMP, we have tried and tested a lot of methods in the 10 years that we’ve been working across design and digital. For us, a mobile-first approach might take more time and effort, but we believe it is what ensures our clients’ most important content is accessible to the world.

Here are some examples of our mobile-first designs, which start with the basic functionality and are built up by progressive enhancement.

A gif image of the NE1 Get in to Newcastle website

NE1 - Get into Newcastle

The NE1 Geordie Jackpot is the most popular feature of Get into Newcastle, so this had to take centre stage in addition to an obvious and easily-placed menu bar function.

When we got to the desktop browser, we were able to add to this with various different features across the page from ‘featured’ to ‘offers’ to more.

A gif of Shared Interest scrolling through the desktop site and then through the mobile site

Shared Interest

Shared Interest wanted people to instantly recognise who they were and what they did, so mobile users could easily and quickly get the information they needed.

The desktop version allowed us to build on this with more details including explanations, infographics, case studies and social media links.

A gif of Tyneside Cinema scrolling through the desktop site and then through the mobile site

Tyneside Cinema

The circumstances by which people usually go to a cinema website on their phone are to immediately check what’s on and book tickets.

However, when it came to the desktop version we were able to add new releases and other exciting events that Tyneside Cinema have.

Spread the word...

By continuing to browse or by clicking “Accept All Cookies,” you agree to the storing of first- and third-party cookies on your device to enhance site navigation, analyse site usage, and assist in our marketing efforts. Cookie policy