visual design
Mobile-first
What does "mobile-first" actually mean?
Mobile-first means designing for the small screen first and enhancing up for larger ones, rather than designing for desktop and trying to cram it down. Starting from the tightest constraints forces you to decide what truly matters - and what's left is a core that scales up gracefully instead of a desktop layout squeezed until it breaks.
Also known as: mobile first, mobile-first design, progressive enhancement layout
Prefer to watch?
Watch the recap 0:46
The demo
The same screen on a phone, built two ways. Flip between starting from the phone and cramming a desktop layout down - and see which one a thumb would actually thank you for.
What this demo shows (text version)
The same screen is shown inside a phone-width frame two ways. "Mobile-first" starts from the small screen: one clear column, large tap targets, only the essentials (a search, a few categories, one primary action). "Desktop-first, shrunk" takes a wide multi-column desktop layout and crams it onto the phone - producing tiny text, cramped controls and content overflowing sideways.
Both hold the same content; only the starting point differs. Starting small forces you to prioritise what matters and yields a core that scales up gracefully; starting wide and shrinking arrives on mobile already cluttered. Mobile-first is that discipline - design the hardest case first, then enhance - and it must also respect touch-target size and thumb reach, not just columns.
Mobile-first is a discipline, not just a screen size: start where space, attention and input are scarcest, so you're forced to prioritise the essential and cut the rest. Then enhance for bigger screens. Designing desktop-first and shrinking does the opposite - it crams a wide layout onto a phone, where it turns cramped, tiny-targeted and overwhelming.
Built mobile-first, the phone screen was calm and confident - one clear path, big targets, the essentials and nothing else. The desktop-first version shrunk onto the same screen was the opposite: columns crushed together, text and taps too small, the whole thing fighting for room. Same content; only the starting point differed.
The real value is the forcing function. A phone gives you little space, divided attention and imprecise thumbs, so designing there first makes you rank ruthlessly: what's the one job, the one primary action? That clarity then carries upward - a focused mobile design enhanced for desktop usually beats a desktop design crammed down, which arrives on mobile already cluttered.
Technically it pairs with progressive enhancement: start with a simple, working single-column base, then add columns, density and flourishes as the viewport grows (min-width media queries building up, rather than max-width patching down). The base everyone gets is solid; larger screens get more, not the small screen getting less.
Mobile-first isn't "mobile-only", though - don't strip desktop of capability in the name of purity; enhance genuinely for the extra space. And it's not just layout: mind touch targets, thumb reach and performance on real phones and networks. The point is to start from the hardest case so everything after it is an upgrade.