Start a Project
Call Us  0161 505 1048

Design & UX, Development

What is mobile-first design?

23 January 2019
A few designs sketched on a notepad | What is mobile-first design? | Neon

Since the advent of smartphones and 3G connections, the Internet has become a mobile-first world for a lot of industries.

Overall, the stats for the split between mobile and desktop devices is roughly 50/50 in the Western world. But when you strip out work-related activities and bring in countries such as India which is heavily dominated by mobile devices, a smartphone is the prominent means of accessing the Internet for most people.

This has caused a revolution in design and development approaches when it comes to websites and Internet-related applications. Where previously you were designing for 1024×768 screens, with ample space for images, text and buttons, now you’re not only designing for a much smaller space but also having to cater for a whole range of screen sizes of devices your website could be viewed on.

A responsive approach

This began with responsive design. Building a design that evolved as the screen size adjusted so you could cater for any new device that came along. However in the early days this was still very much built from a starting point of a desktop monitor, and scaling down assets as the screen size reduced. It was still a Desktop first approach.

Moving to mobile-first design

As many industries and businesses are now seeing their website traffic dominated by mobile devices, the approach needs to change again; to that of mobile first: Designing a website which is still responsive to screen size, but with the starting point and a focus on its functionality being optimised for mobiles as the primary user devices. Essentially, starting with the mobile screen and working up from there.

An image showing a mobile, a tablet and a desktop | What is mobile-first design? | Neon

What does this mean for website design?

A focus on page file size

As previously blogged about page speed is an increasingly important consideration for user experience and search engine optimisation. This is largely due to the growth in mobile internet and people’s reliance on mobile networks to download web pages. Image heavy pages are out, lightweight pages with content that works on smaller screens are in.

A change in navigations

In the desktop-first, responsive world, designs used two website navigations. One for desktop and wider screens and a different one for mobile devices. With break points where they changed. More and more we will see what we considered to be mobile menu icons appearing on desktop versions of the websites too.

More space around buttons

Your desktop mouse is a precise tool. You can click on a precise location on the screen without too much effort and near 100% accuracy. Your fingers are slightly less precise. In order to aid the accuracy and reduce misplaced clicks, more white space is applied around buttons and clickable areas on a mobile design.

Reduced reliance on hovers

A lot of nice design elements rely on the position of the mouse cursor and a change of state when it hovers over a point. This hover state doesn’t exist in a mobile world as there is no cursor. So if you have any elements which rely on it, they won’t be part of a mobile-first design.

Where do you start?

In many cases, if you have a responsive website you will probably find that it suffices unless you want a redesign or rework of your online presence. Once you reach that point you need to shift your thinking from people viewing your website on a large desktop screen and ultra fast Internet connection, to those on smaller screen and a 3G/4G one. It is a small shift in mindset but has big implications for how you approach a design project.

Related Items

Brand Logo Quiz

Five Reasons Why Your Facebook Ads Are Getting Disapproved

Top 5 UX errors and how they impact your online success

We are here to help

Want to be at the top of the search ranks? How about a website that’ll give your audience a great experience? Or maybe you’re looking for a campaign that’ll drive more leads? Get in touch to find out how we can help.

Start a project
The design and dev team making notes | Start a project with Neon | Neon
Employee on telephone
Group work
Designer laughing
Computer typed on
Sausage dog
Writing on white board
Designer planning sitemap
Employee posting notes on board
Developer working
Group photo of CEO and Brand Ambassador
Employee in meeting
Employee in Meeting

Stay up to date

Privacy Policy

© Neon Digital Agency Ltd 2021. Part of

Inc & Co Logo