Responsive Design Principles

Designing the desktop version first and squeezing it down produces a phone layout full of compromises, because the desktop version was allowed to assume space it will not have. Designing the phone version first and expanding produces a desktop layout that had to earn every addition.

The narrow view forces the useful question early: what does this screen actually need? Everything that survives 375 pixels of width is essential by demonstration. Whatever you add back on a wide screen is then a deliberate improvement rather than a leftover.

The instinct is to pick breakpoints named after devices. Device sizes change constantly and the names were never accurate. The better method: widen the browser slowly and add a breakpoint at the width where the layout starts looking wrong.

• A paragraph passing about 75 characters per line — cap the container, not the page
• A card grid where cards become absurdly wide — add a column
• A navigation bar that no longer fits — collapse it
• A table that starts to scroll horizontally — that's a real breakpoint, and horizontal scroll inside the table is often the right answer rather than a redesign

Most interfaces need three breakpoints. Some need two. Needing seven is usually a sign the layout is fighting itself rather than a sign of thoroughness.

Breakpoints handle the moments layout must change shape. Between them, values should scale — otherwise a design tuned at 1440px looks cramped at 1100px and lost at 1900px.

/* Scales between a floor and a ceiling, no breakpoint needed. */h1 {  font-size: clamp(2.25rem, 4vw, 3.25rem);  line-height: 1.05;} /* Columns decided by available space, not by a media query. */.card-grid {  display: grid;  gap: 1.5rem;  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));}

The hover one catches people repeatedly. A table row revealing its actions on hover is elegant on a laptop and simply broken on a phone, where those actions don't exist. Show them, or give them a persistent affordance.

1. 01Drag the browser width slowly from narrow to wideNot three fixed sizes. The problems live between the sizes you'd have tested.
2. 02Check the awkward middleAround 700–900 pixels — small tablets, split-screen windows — is where most layouts are worst, because nobody designs for it.
3. 03Open a form with the on-screen keyboard upOn a real phone. Confirm the submit button is reachable.
4. 04Confirm nothing scrolls horizontallyA page that scrolls sideways on a phone is almost always one over-wide element — usually a table, a code block, or an image without a max-width.