Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?

TL;DR

Responsive design is the outcome: a page adapts to available space, input methods, user preferences, and content needs. Mobile-first is one implementation strategy: start with the constrained layout as the base CSS, then add enhancements with min-width queries. A responsive page can be mobile-first or desktop-first; mobile-first does not automatically make it faster, and breakpoints should be chosen where the content needs them rather than for named devices.

Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?

The terms describe different dimensions of a design decision.

Responsive design

A responsive interface uses flexible sizing, wrapping, Grid or Flexbox, responsive media, and conditional rules so the same document works across different environments. Viewport width is common, but media queries can also respond to motion preferences, pointer precision, hover support, orientation, contrast, and print output. Container queries adapt a component to its own available space.

Mobile-first CSS

Mobile-first CSS puts the simplest narrow-layout rules outside a query and layers on changes as space becomes available:

.card-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (width >= 48rem) {
  .card-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

This often encourages teams to prioritize content and progressive enhancement. It can also reduce overrides when the narrow layout is the simplest default. The performance benefit is not the cost of evaluating fewer media queries—browsers evaluate media queries efficiently, and all downloaded CSS still has transfer and parsing cost.

Choosing an approach

A desktop-first approach may be reasonable when incrementally adapting an existing desktop product or when the wide layout is genuinely the simplest baseline. A component library may benefit more from container queries than from page-wide mobile or desktop breakpoints.

Whichever direction is used:

Choose breakpoints by resizing until the content or interaction no longer works well.
Keep source order logical; CSS reordering should not create a confusing keyboard or reading order.
Test zoom, long content, touch and keyboard input, reduced motion, and real devices—not only a few viewport presets.
Avoid hiding essential functionality merely because the viewport is narrow.

Exercises

Beta

Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?

TL;DR