Mobile first web design: the phone layout as your content priority list
Mobile first means designing the narrowest layout before the widest. On a phone everything sits in one column, so you're forced to decide what comes first, second and third. That order becomes the backbone of the site; wider screens then add columns and space without changing what matters most.
Where the idea comes from
For years, websites were designed at desktop width and then squeezed onto phones, usually by hiding things. The phrase "mobile first", popularised by the designer Luke Wroblewski, argued for the reverse: start with the constraints of a small screen, because they force decisions that improve the design everywhere. It sits alongside responsive web design, the approach of one flexible layout adapting to any width, and progressive enhancement, the habit of building a working baseline and adding to it.
The point was never only about phones. A single column is the most honest version of a page. If the content doesn't make sense read top to bottom in one stream, extra columns on a laptop only hide the problem.
Mobile first versus desktop first
| Desktop first | Mobile first | |
|---|---|---|
| Starting point | A wide, multi-column layout | One column, in priority order |
| Narrow screens | Columns collapse; content is hidden or shrunk | The base design; nothing to remove |
| CSS | Base styles for desktop, max-width queries to undo them | Base styles for phones, min-width queries to add layout |
| Typical failure | Phone pages that are cramped, slow or missing information | Desktop pages that feel stretched or sparse if wider layouts are never designed |
Mobile first web design has its own failure: stopping at the phone and letting the same single column stretch across a 1,440px screen. The method asks you to start narrow, not to finish there.
The method, step by step
- List everything the page must contain, then put it in order of what a visitor on a phone needs first. For a café that might be: what it is, opening hours, location, menu, booking, story.
- Design that list as one column at about 360 to 390px wide. Headlines, body text and buttons at full, comfortable size; nothing shrunk to fit.
- Put the main action within reach. Buttons at least 44 by 44px where you can, with space between them; WCAG 2.2 sets 24 by 24px as the minimum target size.
- Widen the window until the layout looks stretched. That's where your first breakpoint goes, not at a device width. Add a second column, a side-by-side image, or more space.
- Repeat until the widest layout, capping line lengths and content width so text doesn't run across the whole screen.
- Check the order still matches the priority list. Visual order on desktop and reading order in the HTML should agree, or keyboard and screen reader users get a different page.
Writing it in CSS
Write the phone layout as the default, without any media query, then layer wider layouts on top with min-width queries, for example @media (min-width: 48rem) { .services { grid-template-columns: 1fr 1fr; } }. Using rem for breakpoints means they respond to the reader's text size too. Container queries go a step further: a card can switch to a two-column layout when its own container is wide enough, wherever it's placed.
None of this works without <meta name="viewport" content="width=device-width, initial-scale=1"> in the page head. Without it, phones render the page at a desktop width and zoom out, and your phone layout never appears.
Mistakes that undo it
- Hiding content on phones. If information isn't needed on a phone, question whether it's needed at all. Phone visitors aren't a lesser audience.
- A full-height hero. On a phone, a hero forced to the screen height pushes every useful fact below the fold.
- Hover-only interactions. Menus and details that only appear on hover don't exist on touch screens.
- Testing only in a resized desktop browser. It misses real touch, real font rendering, real network speed and the browser's own toolbars. Test on an actual phone.
How Anticode builds for phones
Anticode's design gate blocks publishing a page without a phone viewport, the meta tag above. Pages from the design engine size type and spacing with fluid values that tighten on narrow screens, and when you arrange elements in the layout editor, a frame only splits into side-by-side columns once each child has room for its minimum width, so a layout you design on a laptop still stacks cleanly on a phone.
For app builds, when Cloudflare Browser Rendering is available, a self-review opens the new app in a headless browser at phone and laptop widths, takes screenshots, clicks through it, and the Critic fixes what it finds. None of that replaces holding the page in your own hand: the test on mobile guide covers what to look for.
Questions people ask
Is mobile first still relevant?
Yes. Phones carry a large share of web traffic for most small businesses, and a single-column priority list remains the clearest way to decide what a page is for.
Should I use min-width or max-width media queries?
With mobile first, min-width: phone styles are the default and wider layouts are added. Mixing both directions makes styles hard to follow.
Where should breakpoints go?
Where your content starts to look stretched or cramped, not at specific device widths. Most small sites need two or three.
Does mobile first mean a separate mobile site?
No. It's one responsive site, designed starting from the narrowest layout.