“Mobile first” is a buzzword you’ve probably heard if you’ve spent any time looking into the process of setting up a website. But what does it mean? Mobile-first describes two things in the context of web design. One in a technical sense, and one in a more general sense. In this article Cassie Selin, lead WordPress developer at m2media will example what Mobile First is and how to use it correctly in design.
Mobile First – An approach to building websites
Back in the day, websites could only be viewed on a computer, whether that be a desktop PC or a laptop. But it’s been over 10 years since the first iPhone was released and a new wave of smartphones revolutionised our relationship with the World Wide Web. Now more web traffic comes from mobile devices – phones, tablets, and the odd iPod touch – than it does from desktop pcs and laptops.
As a result of this shift, the way web designers and developers have changed. Instead of building a responsive website with the desktop experience in mind as the priority and the mobile version as an afterthought, a switch has flipped, and now the reverse is the way to go.
Is mobile-first the right thing for my site?
Depending on the context and target audience of your site, you still might put significant consideration into the desktop version of your site. In spite of the fact that more site visits come from phones these days, desktop websites still tend to generate more engagement as people tend to be more comfortable filling in forms, making accounts and browsing through complex navigation systems on their desktop or laptop computers.
However, even if you expect more engagement from the desktop version of your website, a mobile-first approach means that you will put at least equal consideration into the mobile version of your site, which is critical.
What does Mobile First mean, practically?
Mobile-first means that when you are designing your site, the mobile version isn’t an afterthought – it’s a critical consideration from day dot. What features will be available on the mobile version, how will they work, and how will the smaller screen real estate be utilised?
What are the priorities of your site on mobile – remembering that a user will see much less content ‘above the fold’ on mobile – this will help to sharpen and clarify your site strategy to the most important things first.
Mobile-first from a technical standpoint
If your site has been designed with a mobile-first approach, it should also be implemented with a mobile-first approach.
If you are the developer building a site, you should write your media queries from a mobile-first, progressive enhancement perspective. Writing the simplest version of the site’s styles and functionality first, then adding more complex styles and features as the viewport gets bigger, makes a lot of sense from a development perspective.
This approach is also a lot easier than writing complex features and layouts and then overwriting them with simpler styles as the viewport shrinks.
With this approach, the base version of your site should be built with mobile in mind, with your media queries targeting larger viewports.
And if you’re committed to a mobile-first approach, don’t begin dev before the mobile version of the site has been designed and approved!
