Extra breakpoints multiply the cost of checking

What it is

Four breakpoints are not four extra artboards. They are pages × orientations × states × breakpoints. Twenty pages, two orientations: one hundred and sixty layout states to look at. Copy xs / sm / md / lg / xl / xxl from a framework, and multiply again. Extra breakpoints with no matching content failure are pure cost.

Count itself multiplies QA. This leaf does not argue whether a breakpoint should sit at 900 or 768 — that is how you choose a failure width.

Why it happens

Layout states form a cartesian product with other variation: orientation, locale (German lengthens), empty versus full data, keyboard, split view. Each added breakpoint multiplies that product. Human review and screenshot bots both walk the product, not the sum. “One more breakpoint is more precise” becomes untestable after the third or fourth.

Untestable means the trough never gets a look — which fights “stay usable between breakpoints.” Fewer breakpoints, each tied to a real failure, is what leaves energy to drag the trough.

Where it stops holding

Products that truly have several information architectures (desktop rail, tablet two-pane, phone stack, unfolded foldable) may need three structural snaps. That is not six copied names. Component-level container breakpoints do not enter this viewport matrix and should not count toward “how many page breakpoints.”

Print, dark mode, high contrast are other axes that also multiply. They are not breakpoints, but they remind you: do not add viewport samples you can live without.

Applying it

• Write one sentence per viewport breakpoint: which module, which failure it repairs. Delete any sentence you cannot write, and merge into the neighbouring failure width.
• Draw the matrix: breakpoint count × critical pages × orientation. If it exceeds what the team can finish in a week, cut breakpoints before talking coverage.
• How to check: remove one breakpoint that names no failure, and regression-drag the full width range. No new overflow or half-column: it was cost. Every survivor occupies a matrix column, and someone actually walked the primary path in that column.

Related

• Same group: F2.10.1 Breakpoints belong at content failure widths, not at device names · F2.10.2 Layouts must stay usable between breakpoints
• Nearby: F2.15 Container queries and component-level response · F2.13 Portrait and landscape · F2.11 Fluid and adaptive layout
• Search terms: breakpoint matrix · combinatorial QA · media query · layout states