The Breakpoints Nobody Designs For Are the Ones That Break

Most website designs arrive as two sets of screens: one for a phone and one for a laptop or desktop. Sometimes there's a tablet version too. They look great. Then the site gets built, someone opens it on a small laptop with the browser at two thirds of the screen, and the navigation wraps onto two lines, the cards squash and a heading breaks after one word.

The widths nobody designed for are the ones that break.

Why the middle goes wrong

A phone design and a desktop design are two fixed points. Between them is a whole range of widths that real people use: tablets in portrait and landscape, small laptops, browsers that aren't full screen, split-screen apps, large phones held sideways. The layout has to work at every one of those widths, not just at the two that were drawn.

When a design only defines the end points, the in-between behaviour is left to chance. Elements that fitted comfortably at 1440 pixels wide start colliding at 1000. A three-column grid that looked balanced on desktop leaves each column too narrow for its text before it switches to a single column.

Breakpoints from content, not devices

Breakpoints used to be set at common device sizes. There are now far too many devices for that to make sense. Instead, we set breakpoints where the content needs them. We open the page in a browser, slowly narrow the window and watch. The moment something starts to look wrong, such as a line that's too long, a column that's too narrow or a menu that no longer fits, that's where a change is needed.

This usually produces breakpoints at slightly odd numbers, and that's fine. They reflect the actual design rather than a list of popular screen sizes.

Layouts that flex

The fewer hard breakpoints a layout needs, the better it behaves in between. Modern CSS lets grids decide how many columns fit based on the space available, so a card grid can go from four columns to three to two without us specifying each step. Text sizes can scale smoothly between a minimum and a maximum. Spacing can grow with the screen.

We design components to cope with a range of widths rather than one. A card should look right whether it's 260 or 400 pixels wide. If it only works at one size, it will break the first time it's placed somewhere new.

Navigation is the usual casualty

Main navigation is where the middle most often goes wrong. Five menu items and a button fit nicely on a large screen. As the screen narrows, they run out of room long before the mobile menu takes over. We test the navigation at every width and switch to the compact version as soon as the full one starts to feel cramped, even if that's earlier than you'd expect.

Testing by dragging

Our testing routine is low-tech. We drag the browser window from wide to narrow and back again, slowly, on every page template. It takes a few minutes and finds problems that screenshots at fixed sizes never show. We also check real devices, because a tablet in landscape feels different to a resized desktop browser, but the drag test catches most issues first.

Designing the in-between

For larger projects, we now design at least one intermediate width alongside phone and desktop. It forces decisions about the middle to be made on purpose, and it gives developers a clearer picture of the intent. It's a standard step in our website design and build process.

Next time you look at your website, try narrowing the browser slowly and watch what happens. If anything wobbles, we can help make it hold together at every width.