Responsive & Multi-Device Design

One layout, every screen. The goal is not "make it shrink" — it's to serve the right information density, interaction model, and ergonomics for each device class. A phone is held one-handed with a thumb; a TV is driven by a D-pad from 10 feet; a watch is glanceable in 2 seconds. Same content, different affordances.

Philosophy

• Mobile-first = author the small layout as the baseline, then add with min-width media/container queries. Progressive enhancement: the base CSS is the floor everyone gets; larger screens layer on. Smaller cascade, fewer overrides, better perf on weak devices.
• Desktop-first (max-width, graceful degradation) is legacy. Avoid for new work — you end up un-styling for mobile, which is more code and more bugs.
• Content-first, not device-first. Design the content, let it dictate where it breaks. Devices are a moving target; content is yours.
• Responsive vs adaptive vs fluid: Fluid = continuous scaling (%, vw, clamp()), no jumps. Responsive = fluid + breakpoint reflows. Adaptive = discrete fixed layouts swapped at thresholds (server-detected or JS), no in-between. Modern default: fluid + a few responsive breakpoints. Reserve adaptive for genuinely different device classes (e.g. a real TV/watch app, not a width).
• Intrinsic web design (Jen Simmons): let the content's natural size drive layout via minmax(), auto-fit, clamp(), fit-content — fewer hard breakpoints, no cliffs.

Breakpoints

Prefer content-driven breakpoints: resize the browser, add one where the layout breaks (line length >~75ch, cramped columns, awkward gaps). Don't target specific devices — they change yearly.