Skip to content
Web for Designers

Mobile-First Design

There are two ways to write responsive CSS. The first way is desktop-first: you design for a wide screen and then write max-width media queries to shrink things down for smaller screens. The second way — and the modern standard — is mobile-first: you design for the smallest screen first, then use min-width queries to add complexity as more space becomes available.

Why mobile-first?

Section titled “Why mobile-first?”
  • Most users are on phones. Writing for the small screen first means your baseline works for the majority of your audience with zero media queries.
  • Simpler defaults. A single column of content requires almost no CSS. Adding a two-column layout for large screens is one media query. Going the other way — collapsing a complex grid into a single column — is far more CSS to write and easier to get wrong.
  • Faster on slow connections. Mobile browsers on slow networks download and apply the base CSS immediately. Desktop enhancements only apply when needed.
  • Figma parallel. Most design teams today start with the mobile artboard before building up to tablet and desktop. Mobile-first CSS matches that workflow.

The pattern

Section titled “The pattern”
/* Base styles — small screen, no media query needed */
.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}


/* Tablet and up: switch to a row */
@media (min-width: 420px) {
  .nav {
    flex-direction: row;
  }
}


/* Desktop and up: add more space */
@media (min-width: 700px) {
  .nav {
    gap: 2rem;
  }
}

Notice the progression: default = narrowest, each query adds on top.

See it in action

Section titled “See it in action”

The preview pane is your screen. Narrow your browser window (or view on a phone) to see the mobile base layout. Widen it past 420 px and the desktop enhancement kicks in.

At narrow widths the nav links stack vertically — the natural mobile pattern. Once the pane exceeds 420 px, a single @media (min-width: 420px) block switches the nav to a horizontal row and increases the heading size.

In mobile-first CSS, which kind of media query do you use to enhance a layout for wider screens?
Why is mobile-first considered better than desktop-first for most projects?
In the nav example, what change does the @media (min-width: 420px) block apply?
Which describes the correct order of rules in a mobile-first stylesheet?