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?

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

/* 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

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.

<nav class="nav">
  <a class="nav__link nav__link--active" href="#">Home</a>
  <a class="nav__link" href="#">Work</a>
  <a class="nav__link" href="#">About</a>
  <a class="nav__link" href="#">Contact</a>
</nav>
<main class="main">
  <h1 class="hero__title">Design for every screen</h1>
  <p class="hero__sub">Start small, build up.</p>
</main>

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.

Common mistakes designers run into

Designing desktop first and then “shrinking” it down to mobile later, which makes mobile feel like a cramped afterthought
Forgetting that mobile-first means designing for the smallest screen to work well first, then “adding” for bigger screens

The developer’s perspective

👨‍💻 What developers actually see

Designers see “I need two designs,” but developers write mobile CSS as the default (no media query at all), then add rules for bigger screens step by step (progressive enhancement).

💡 Real-world example

A product whose traffic is mostly mobile gets designed mobile-first for a very practical reason: the experience most people actually have is the one that gets designed and tested first, and desktop becomes the expanded version.