Mobile-First Without Building Everything Twice

Mobile-first is not a slogan. It means the stylesheet without queries is a working phone layout. Desktop is an enhancement. Building two separate pages — m.example.com and the desktop site — is how teams double every bug.

Write the narrow version first

/* base = phone */
.layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.nav { display: flex; flex-direction: column; gap: 0.5rem; }

@media (min-width: 800px) {
  .layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .nav {
    flex-direction: row;
    gap: 1rem;
    margin-left: auto;
  }
}

Same HTML. Different layout rules as space appears. You did not invent a second markup tree.

Share one HTML

<body>
  <header class="layout">
    <a class="logo" href="/">Shop</a>
    <nav class="nav">...</nav>
  </header>
  <main>...</main>
</body>

If you find yourself maintaining index.mobile.html, stop. Feature detection and CSS can adapt one document. Separate mobile sites go stale the week after launch.

Progressive enhancement, not progressive regret

• Touch targets stay large in the base styles (about 44px minimum is a useful rule of thumb).
• Desktop can add hover states; phones never had them.
• Prefer min-width enhancements over max-width reductions.

Common mistakes

• Desktop-first with a late "mobile pass". You will patch overflow forever.
• Different content on mobile. Users notice when a policy link disappears.
• Fixed pixel widths in the base sheet. They fight every phone.

A worked example: filters

On a phone, filters can sit in a stacked block above the list. On a wide screen, they become a side column.

<div class="shop">
  <form class="filters">...</form>
  <section class="results">...</section>
</div>

.shop {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 900px) {
  .shop {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: start;
  }
}

Same form. Same results. Different placement. That is mobile-first without a second site.

What “building twice” looks like

Two HTML files, two stylesheets, two bugs for every change. Or a JavaScript render that swaps entire trees by user-agent sniffing. Both age badly. Prefer one document and CSS that adapts.

What happens if you skip this

You will fix a bug on desktop, forget the mobile sheet, and ship two truths. QA will only test one of them.

Try it

Delete any max-width phone overrides you added last week. Move the narrow rules into the base. Put the wide rules inside min-width. Reload at 360px and 1200px. Same HTML?

If you need two HTML files to look good on two widths, what will you do when a third width appears?