Mobile-first layout
Designing and coding the narrow phone layout first, then adding complexity as the screen gets wider.
See it
What it is
Mobile-first means the narrow layout is the default and everything wider is an enhancement. In CSS that inverts the media queries: base styles target the smallest screen with no query at all, and every min-width block adds columns, sidebars, and bigger type on top. Luke Wroblewski named the approach in 2009, and it stuck because it is a content-priority exercise dressed as a technique: a 375px column has room for one idea at a time, so you have to decide what actually matters before you decide where it goes.
Reach for it on anything content-led or consumer-facing, which is most of the web. The practical payoff is that the styles everyone downloads are the simple ones, and you add rather than override. Working the other direction, you end up writing max-width queries that undo desktop decisions, and the phone gets the leftovers.
Gotcha: mobile-first is not mobile-only, and it is not 'design the phone screen, then stretch it'. A wide screen wants a genuinely different composition (multi-column, persistent nav, more shown at once), not the phone layout with bigger margins. Second trap: teams say mobile-first and then review every design on a 27-inch monitor. If the narrow layout is not the first thing in the Figma file and the first thing in the stylesheet, it is not mobile-first.
Ask AI for it
Build this layout mobile-first. Write the base CSS for a 375px viewport with no media query: single column, full-width stacked blocks, 16px side padding, body type at 16px, tap targets at least 44px. Then layer enhancements with 'min-width' media queries only (640px, 768px, 1024px, 1280px), each one adding columns, larger type, or a sidebar rather than undoing an earlier rule. Never use 'max-width' queries. Prioritise content order for the narrow view first and keep DOM order matching reading order at every width.