Why is mobile-first design important?

As of December 2022, 62% of the web’s traffic comes from mobile devices. The ten-year trend on desktop vs mobile is pretty startling – in 2012, 94% of the web’s traffic came from desktop – mobile overtook desktop in 2017, and has been increasing its share ever since.

mobile-first Design Principles

Using mobile-first design principles means approaching the design of a website or digital product in a way that prioritises the user experience on mobile and smaller screens. In mobile-first design philosophy, mobile UX only has the most essential features, in theory making it easy to scale up and bring in additional elements for larger screens – this is also known as “progressive enhancement”.

Historically, you might have had two versions of your website – a desktop and a mobile version, with the mobile version either having its own separate HTML sitting either on the same domain or an m. or mobile. sub-domain, and this being served dynamically when a user browses from mobile using a “user-agent” tag. This then progressed to responsive design – wherein text, images and components would move and resize fluidly to fit various screen sizes.

Mobile-first moves beyond the principles of responsive design to make intentional design choices based on how people interact with content on mobile.

Why is mobile-first design important?

As we’ve already briefly mentioned, a user browsing from mobile is obviously browsing from a smaller screen, so it’s important that the design is stripped back to its key elements, prioritising content and key interactions so the user isn’t endlessly scrolling or having to manually scale the page to find what they need. Equally, when browsing via mobile data, rather than WiFi, bandwidth will be an issue. This again increases the importance of prioritising content – ensuring that even with lower bandwidths, the user can still load the most important elements of the page in order to get what they’re looking for.

Aside from ensuring a good browsing experience for users on mobile, there is another key reason why mobile-first design and build is very important in the wider world of digital marketing.

Google’s mobile-first index

It almost goes without saying these days that Google is the world’s most popular search engine – as of December 2022, it occupies 93% of the global search engine market. Ensuring that your website is optimised properly to perform well on Google is a cornerstone of any organisation’s digital marketing. In 2018, Google officially announced that they were rolling out mobile-first indexing – meaning that they would predominantly use the mobile version of a site’s content to index and rank the site – whether the user is searching from desktop or mobile. It’s not surprising that they made this shift considering 64% of searches are carried out on mobile. What it boils down to is this – a strong mobile user experience is not just a confirmed ranking factor, but almost a prerequisite for any sort of meaningful visibility on Google.

How does mobile-first design affect your website?

Executed in the right way, mobile-first design and build can only enhance the performance of your website and the experience of your users. Prioritising fast loading speeds and consistent content across all platforms will help you ensure a great user experience as well as help you to secure between rankings on search engines.

There are a number of things you could check to determine whether your website should be reviewed in order to ensure the best possible performance on mobile:

How much traffic do you currently get from mobile?

How do people interact with it once they get to your site from mobile? You can use tools like Google Analytics to see what percentage of your traffic currently comes from mobile. Higher bounce rates, lower time on page, and lower conversion rates might suggest visitors from mobile aren’t getting the best experience.

You can use the report dashboard under User > Tech in GA4 to check the percentage of traffic from different devices, as well as other detail like screen resolution.

Google Core Web Vitals

There are a number of ways to run your website against these metrics. You can do this using the Lighthouse extension in Inspector in Google Chrome, via a report in Search Console, or run it through Page Speed Insights. These tools will by default crawl and analyse your site from mobile, giving you scores out of 100 for your performance against various metrics – scores below 90 generally indicate something that needs reviewing.

Google Core Web Vitals scores in the high 90s and above indicate good performance on mobile.

Is mobile-first design ever the wrong approach?

In some scenarios, it may be that the desktop experience warrants more focus. Our approach when embarking on a project with a client is to assess a number of factors, particularly looking at the amount of traffic coming from mobile. If this was fairly low, and the majority of traffic came from desktop – we would focus more on creating the desktop experience in the first instance, and then ensuring responsiveness on mobile devices.

Need some more guidance? We build all of our websites with a focus on high performance and world-class user experience, no matter the device. We can support you with reviewing your current site and advise of opportunities to improve and enhance your approach to your website and wider digital strategy – just get in touch and we’ll see how we can help.