Adaptive layout jumps at a breakpoint
Aliases: adaptive layout · discrete layout bands
What it is
At 767 a hamburger; at 768 a persistent sidebar. The box tree changed; columns did not grow one pixel. Adaptive snaps at a breakpoint: one column becomes two, a module moves from below to beside, a toolbar becomes a top bar. You design N structures; which one the user gets depends on which band the width landed in.
Side effect: one extra pixel and the content well gets narrower (the sidebar ate 240 px). Wider-yet-tighter is an adaptive bill. Fluid stretch does not suddenly donate a column to chrome.
Why it happens
A snap changes topology: who neighbours whom, how many streams. That is the right move when information architecture must change (a phone has no room for persistent nav). A 1 px difference can drop someone into a different IA. Split view, rotation and an external display will walk that line repeatedly, and structure will flip back and forth.
If nothing interpolates between snaps, the trough is one stretched structure — that is the “stay usable between breakpoints” problem. Adaptive’s own mechanism is: same topology between samples, different topology at samples.
Where it stops holding
Kiosks and some TV apps that only offer a handful of artboards are born adaptive. A desktop window that can be dragged, with adaptive only and no fluid in the trough, will look stretched. People hunting for a “just right” width will see the layout blink near the breakpoint; if the blink remounts the page and kills scroll position, that costs more than a blink.
Applying it
- For each snap, write the topology change (nav shape, column count, which module moved) and make sure the wider band does not shrink the content well without a reason.
- Anchor content identity across the snap (same row, same field still in view). Do not remount the page to the top.
- How to check: screenshot 1 px below and 1 px above each breakpoint and diff. The diff should match that topology sentence, and the wider shot should not have a smaller content width without a reason. Then rotate or split near the breakpoint on a device and watch for structural flicker and lost scroll.