Layouts must stay usable between breakpoints

What it is

Mocks stop at 375 and 1440; people live at 412, 820, 1280. Two columns from 768, three from 1200, and at 1199 the two columns stretch to a 90-character measure. The trough between breakpoints is not a width that “does not count.” Continuously usable means every real window width can finish the primary task, not just the two artboard widths.

That is not a mandate to be fluid (to morph continuously). It is a ban on treating intermediate widths as uninhabited.

Why it happens

The viewport is continuous; breakpoints are samples. Adaptive layouts snap at those samples and stretch in between; fluid layouts interpolate all the way. Either way, the trough grows long lines, leftover slivers, sticky chrome overlapping matter. QA that only hits the samples never sees those diseases.

Real devices also stack system bars, split view and desktop zoom. A nominal “768 tablet” rarely arrives as 768 whole pixels. The trough is the mode.

Where it stops holding

Some canvases and game viewports only support a handful of discrete resolutions; in-between widths are letterboxed or cropped, and continuous use is not on offer. Fixed-pixel ads and third-party embeds may overflow in the trough — their fault, but you still choose whether to scroll them or switch structure earlier.

Very narrow widths (below what the smallest readable type can live in) may be refused with horizontal scroll or a rotate prompt. Refusal should be explicit, not a silent wreck.

Applying it

• Do not let the QA list be only artboard widths. Add at least 360, 390, 412, 600, 820, 1024, 1280, 1366.
• At each in-between width, walk a primary path (read, submit, compare). On failure, add a structural switch at the nearest content-failure width, or give that module min/max so stretch cannot wreck it.
• How to check: drag a resizable window from narrow to wide — no jumping. Anywhere the primary button is unreachable, body unreadable, or the whole page grows a horizontal scrollbar, note the pixel. That pixel is uninhabited land. Repair until a full drag does not break, rather than repairing two artboards.

Related

• Same group: F2.10.1 Breakpoints belong at content failure widths, not at device names · F2.10.3 Extra breakpoints multiply the cost of checking
• Nearby: F2.11 Fluid and adaptive layout · F2.16 Extreme content and overflow · F4.03 Line length
• Search terms: in-between widths · continuous usability · resize testing · line length