Section · 01

Why responsive, and why mobile-first

Around 2010 the web stopped being a desktop medium. By 2024 most sites get more traffic from phones than laptops. Google ranks the mobile version of your site by default — mobile-first indexing— so if your mobile experience is worse, your SEO is worse. There’s no “real” desktop version anymore. They’re both real.

Responsive design means one codebase that adapts its layout to any screen size. Mobile-first means you design and build for the smallest screen first, then progressively enhance for bigger ones.

Section · 02

The three ingredients of a responsive site

Ethan Marcotte’s original definition (2010) had three parts. They still hold up.

1. Fluid grids        — sizes in % or rem, not fixed px
2. Flexible images    — images that scale down inside their container
3. Media queries      — CSS rules that change at different widths

Modern CSS adds a fourth: flex and grid layout, which collapse and rearrange content automatically without you writing a media query at all. But the underlying mental model is the same — your layout flexes.

Section · 03

Breakpoints

A breakpointis a screen width where the layout changes shape. Don’t pick breakpoints based on devices — devices change every year. Pick them based on where your content starts to look bad.

A sensible default set (you'll see these in Tailwind too):

sm   ≥ 640px   small phones in landscape, large phones in portrait
md   ≥ 768px   tablets
lg   ≥ 1024px  small laptops
xl   ≥ 1280px  desktops
2xl  ≥ 1536px  large desktops

Most sites need 2-3 breakpoints, not 8. Try the design at 360px width (the smallest realistic phone), then resize the window and watch where things break. Add a breakpoint there.

Section · 04

Mobile-first CSS

Write your base styles for the smallest screen. Then add styles for bigger screens using min-width media queries.

/* Mobile (base — no media query) */
.card {
  width: 100%;
  padding: 16px;
  font-size: 14px;
}

/* Tablet up */
@media (min-width: 768px) {
  .card {
    width: 50%;
    padding: 24px;
    font-size: 16px;
  }
}

/* Desktop up */
@media (min-width: 1024px) {
  .card {
    width: 33%;
  }
}

Why mobile-first and not desktop-first? Two reasons. First, phones have the most constraints (small screen, slow CPU, flaky network) and starting there forces you to keep things light. Second, it plays nicely with CSS cascading — additive overrides are easier to reason about than subtractive ones.

Section · 05

Flexible images and the viewport meta tag

The one HTML tag you cannot forget

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this in the <head>, phones will render your page at desktop width and then zoom out. Everything will look tiny. Every responsive design starts with this line.

Flexible images

img {
  max-width: 100%;
  height: auto;
}

Two lines. Now every image will shrink to fit its container without distortion. For high-DPI displays and bandwidth-aware loading, modern HTML adds srcset and sizes— you’ll see those in Unit 2.

Section · 06

Responsive vs adaptive vs a separate mobile site

You’ll hear three terms. They’re different.

Responsive   — one codebase, fluid layout, adapts continuously
Adaptive     — one codebase, but loads a different layout per device
Mobile site  — separate site at m.example.com (legacy, don't build this)

The old m-dot pattern (m.example.com) was a workaround when CSS couldn’t do real responsive layouts. It split your URLs (bad for SEO), doubled your maintenance, and inevitably one version got behind. There is no reason to build one in 2026.

You now have the design and the surface area covered. Next lesson: the dev workflow — IDEs, version control, methodologies, and the loop you’ll run thousands of times a year.

Responsive design, because 70% of your visitors are on a phone.