Layout shifter

Two words apart, and completely unrelated: this is not layout shift. Layout shift is the performance defect measured by Cumulative Layout Shift, content jumping under a reader’s eye after the page has already painted, and it is something you work to eliminate. Layout shifter is one of the five responsive layout patterns Luke Wroblewski catalogued from early responsive sites, and it is a deliberate design decision made ahead of time. A reader who searches for one name and lands on the other will find advice that reads as exactly backwards, which is the strongest argument for keeping both words in the vocabulary and knowing which one you mean.

With this entry the set of five is complete on the site: tiny tweaks changes only the numbers, mostly fluid stretches one grid and then caps it, column drop loses full height columns one at a time, off canvas parks a region outside the viewport until it is asked for, and layout shifter is the one where the composition itself is different at each size. Not the same arrangement at another width, and not the same blocks in the same order at a different column count: a genuinely different plan, in which a region can be a full height rail at one size, a card in a two up row at the next, and a full width band at the smallest. The other four are all one composition responding to space. This one is several compositions, selected by space.

The mechanism has got much better since the pattern was named. Named grid areas make each composition a readable block of grid-template-areas per breakpoint, so the arrangement is declared in one place instead of being reconstructed from floats and widths scattered across media queries. That is also the honest test of whether you are looking at a layout shifter: if you can write the three plans as three area maps and they do not look alike, the pattern applies. If two of them are the same map with different track sizes, what you actually have is mostly fluid or a switcher, and you should say so.

The cost is why the pattern is rarer than it sounds. Three compositions are three layouts to design, build, review and keep working, and each new region has to find a home in all of them. Worse, the arrangements have to agree with a single source order, because there is only one document: a region that reads third on desktop and first on mobile is either a a break between reading order and visual order, with the focus order problems that brings, or a compromise in one of the two compositions. Decide the source order from the content’s own priority first, then check that every composition can be built from it, and treat any arrangement that needs a different order as a cost rather than a free choice.