What is mobile-first design?
Mobile-first design reverses the old order of work. For years sites were designed for a desktop monitor and then squeezed onto phones, losing pieces along the way. Mobile-first starts with the phone: a narrow column, a thumb instead of a mouse, a patchy connection and a person who may well be standing up. Once the page works there, the layout is enhanced for larger screens, gaining columns, bigger images and extra detail where the space allows.
The phrase was popularized by the designer Luke Wroblewski around 2009, when smartphones were still a small share of web traffic. They now account for most of it on most consumer sites, and Google indexes the mobile version of a page as the primary one, so the approach has moved from forward-thinking to simply accurate.
Why it matters
Why mobile-first design matters
Designing for the phone first is a discipline of priority. A small screen has room for the essentials and nothing else, which forces the decisions a desktop layout lets a team postpone: what the page is for, what comes first, what can go. Those decisions make the desktop version better too. It also matches how most people meet a brand, through a link in a feed, a message or a search on the move, and how Google reads a site, since it crawls and ranks the mobile version. A desktop-first site that falls apart on phones is falling apart for most of its audience.
In practice
How mobile-first design works in practice
- 01
We start the layout at phone width, with the content ranked and stacked in a single column, tap targets sized for a thumb, type large enough to read without zooming and the main action within easy reach. In the code, the base styles are written for the small screen and media queries add complexity as the viewport widens, rather than stripping it away as it narrows. Images are served at sizes that suit each screen, so a phone never downloads the desktop hero.
- 02
Then it is tested on real phones, not just a resized browser window, including a mid-range device on a slower connection, because the designer's own phone on office wifi is the most flattering test there is. Only then do we design the wider layouts, adding what the extra space makes possible: a second column, a larger gallery, navigation that no longer needs to hide behind a menu icon.
Watch out
What people get wrong about mobile-first design
Thinking it means mobile-only, with the desktop version left as a stretched phone layout and a lot of empty space. Second, treating it as a coding technique rather than a content decision, so the styles are written mobile-first while the page is still designed on a desktop canvas and cut down later. Third, hiding important content on phones to save space. If something matters on a desktop it matters on a phone; if it does not matter on a phone, ask whether it belongs on the desktop at all. And designing only for the newest phones, when much of the audience holds an older, smaller and slower one.
