Episode 1 — Fundamentals / 1.9 — CSS Responsive Design

1.9.a — Mobile-First Strategy

In one sentence: Mobile-first means writing your base CSS for the smallest screen, then layering on complexity with min-width media queries as the viewport grows — a form of progressive enhancement that produces leaner, faster, more maintainable stylesheets.

Navigation: ← 1.9 Overview · 1.9.b — Media Queries →

1. What "mobile-first" actually means

Mobile-first is a CSS authoring strategy, not a device obsession. Your base styles — the code outside any media query — target the narrowest viewport. Wider layouts are added in ascending min-width queries.

/* Base: mobile (no query) */
.card { padding: 1rem; }

/* Tablet and up */
@media (min-width: 768px) {
  .card { padding: 2rem; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .card { display: flex; gap: 2rem; }
}

The opposite — desktop-first — starts with the widest layout and overrides downward with max-width queries.

2. Mobile-first vs desktop-first

Aspect	Mobile-first (`min-width`)	Desktop-first (`max-width`)
Base styles	Smallest screen	Largest screen
Queries add	Complexity as viewport grows	Constraints as viewport shrinks
Progressive enhancement	Natural fit — base is simple	Graceful degradation — base is complex
CSS weight	Lighter on mobile (fewer overrides)	Heavier on mobile (more overrides)
Mental model	"What do I add at wider sizes?"	"What do I remove at smaller sizes?"

Interview tip: Most teams and frameworks (Bootstrap 5, Tailwind) default to mobile-first because it aligns with progressive enhancement and produces less CSS for the devices with the weakest hardware.

3. Progressive enhancement in practice

Progressive enhancement means every user gets a working experience; capable browsers get a richer one. Mobile-first CSS is progressive enhancement applied to layout:

┌──────────────────────────────────────────────┐
│  Base CSS (mobile)                           │
│  ┌────────────────────────────────────────┐  │
│  │  + min-width: 768px (tablet)           │  │
│  │  ┌──────────────────────────────────┐  │  │
│  │  │  + min-width: 1024px (desktop)   │  │  │
│  │  └──────────────────────────────────┘  │  │
│  └────────────────────────────────────────┘  │
└──────────────────────────────────────────────┘

Each layer adds — never subtracts. If a query fails to load, the user still has a functional mobile layout.

4. Content priority on mobile

Small screens force you to decide what matters most. This is a design advantage, not a limitation.

Decision	Mobile	Tablet/Desktop
Navigation	Hamburger menu or bottom bar	Full horizontal nav
Sidebar	Hidden or collapsed below main content	Visible alongside main
Grid columns	1 column, stacked	2–4 columns
Images	Smaller, essential only	Larger, decorative allowed
CTAs	Full-width, thumb-friendly	Inline, standard size

Rule of thumb: If content isn't important enough for the mobile view, question whether it belongs at all.

5. Touch targets

Mobile users tap with fingers, not cursors. Small tap targets cause frustration and mis-taps.

Guideline	Minimum size
WCAG 2.5.8 (AAA)	44 × 44 CSS pixels
Google / Material	48 × 48 CSS pixels
Apple HIG	44 × 44 points (≈ 44px on 1x)

.btn {
  min-height: 48px;
  min-width: 48px;
  padding: 0.75rem 1.5rem;
}

/* Links in a list need spacing too */
.nav-list a {
  display: block;
  padding: 0.75rem 1rem;
}

Common mistake: The visible element looks big enough, but the clickable area (the element's actual box) is tiny. Always check the computed size in DevTools.

6. Performance benefits of mobile-first

Benefit	Why
Less CSS parsed on mobile	Base styles are minimal; complex layout rules live inside queries phones never match
Fewer overrides	Adding rules (`min-width`) is cheaper than undoing them (`max-width`)
Smaller initial paint	Simpler DOM + fewer layout calculations = faster first paint on weak CPUs
Natural code splitting	Complex grid/multi-column code only loads conceptually when needed

Phones have less CPU, less memory, and often slower networks. Sending them the simplest CSS by default is the right trade-off.

7. Writing mobile-first: step by step

Reset / normalize — apply a consistent base.
Typography first — set font-size, line-height, spacing at the body level.
Single-column layout — stack everything vertically; let natural document flow do the work.
Component styles — padding, colors, borders at mobile scale.
First breakpoint (e.g., min-width: 640px) — introduce two-column layouts, larger spacing.
Second breakpoint (e.g., min-width: 1024px) — full desktop layout, sidebars, wider containers.
Polish — min-width: 1280px for wide screens if needed.

/* Step 2–4: base mobile */
body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  padding: 1rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

/* Step 5: tablet */
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Step 6: desktop */
@media (min-width: 1024px) {
  body { padding: 2rem 4rem; }
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

8. Common anti-patterns

Anti-pattern	Problem	Fix
Desktop CSS with `max-width` overrides to "fix mobile"	Bloated, fragile, hard to maintain	Rewrite mobile-first
`display: none` on half the page at mobile	Content is still downloaded; screen readers may still see it	Restructure content priority
Fixed pixel widths everywhere	Breaks between breakpoints	Use relative units (`%`, `rem`, `fr`)
Only testing at exact breakpoint widths	Misses the "in-between" viewports	Drag the browser edge slowly to find issues

9. Key takeaways

Base CSS = mobile. Media queries add complexity for wider screens.
min-width queries are the mobile-first tool; max-width is desktop-first.
Touch targets: 48px minimum interactive area.
Mobile-first produces less CSS, faster rendering, and better content hierarchy.
If it's not worth showing on mobile, rethink whether it belongs anywhere.

Explain-It Challenge

Explain without notes:

Why does mobile-first CSS download less unused code on phones than desktop-first CSS?
A button looks 48px tall in the design mockup, but users complain about mis-taps. What might be wrong, and how do you diagnose it?
Your teammate wrote all desktop styles first and wants to "just add max-width queries for mobile." What's your argument for rewriting mobile-first?

Navigation: ← 1.9 Overview · 1.9.b — Media Queries →