visual design
Mobile-first
What does "mobile-first" actually mean?
Mobile-first means designing for the small screen first, then enhancing for larger ones, rather than starting with desktop and forcing it down. Beginning with tight constraints pushes you to decide what truly matters - and what remains is a core that scales up gracefully, not 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:30
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.
Mobile first isn't just about screen size - it’s about starting with the most constrained environment and building up from there. Try it live on this page to see how prioritising mobile forces better decisions. The hands-on demo here lets you experience mobile first in action - no screenshots, no external tools - just your browser and your choices.
Try building mobile-first on site:uxbyexample.co.uk - the demo lets you see how constraints force better decisions. This isn’t just about screen size; it’s about prioritising what matters most when space is tight - and scaling up from there.
Mobile first means designing for the smallest screen first - not as a compromise, but as a strategic starting point that forces you to focus on what truly matters. You can see this principle in action through the interactive demo on this page - no screenshots, no external tools - just hands-on design decisions you can make yourself.