Breakpoint

When screens were drawn at one width, layouts needed no reference points. Draw to 960 pixels and ship it. Once people viewed the same screen on many devices, it started getting cut off on the right in some windows and squeezed into a narrow column in others.

Pagedeck's document list ran into it. Cards were laid out three across, and narrowing the window brought each card down to 110 pixels with titles wrapping onto three lines. Drawing a separate screen per device was considered and dropped, since every new device would add another copy to maintain.

A breakpoint takes width rather than device as the reference. Instead of handling every width separately, you fix a handful of boundaries and let the same rules stretch and shrink between them.

The moment the screen width crosses a value you set, the layout rules move to the next step. Six things get decided.

1. Keep the count low. Small, medium and large — three or four is enough. Eight boundaries means eight combinations to check.
2. Set values where the content breaks, not at device names. If a card needs 280 pixels for its title to fit on one line, the boundary is the width where three of them no longer fit side by side.
3. Write down what changes in each band as a table: column count, whether the menu is expanded or collapsed, body text size.
4. Change one thing per boundary. Shift column count, text size and menu shape at the same point and you can't tell which one broke the layout.
5. Writing them in mobile-first order, starting from the smallest screen, means each boundary adds rules rather than overriding them, which reads more easily.
6. Check on both sides of a boundary. With 640 as the boundary, look at 639 and 641 to catch a rule that applied on only one side.

This reference point is a tool of responsive design, where the layout flexes with screen size. In adaptive design, which builds separate layouts for a few fixed sizes, the boundary is also the boundary of a separate screen, so the same word carries a different amount of downstream work.

"Was this value taken from a device name? Let's reset it to the width where the card breaks."

The basis for a boundary has to be the content, not a device.

"Change column count, text size and the menu at one boundary and we won't know what broke."

Asking for the changes to be spread out.

"Please also check at 639, one pixel under 640."

The boundary itself is something to test.

Noa set two boundaries off a 280-pixel minimum card width. Below 640 pixels, one card per row; between 640 and 1024, two; wider than that, three. Titles stopped wrapping, and when a new device appeared the only question was which of the three bands its width fell into.