Molochou
← All notes

Two layouts beat one responsive layout

The default way to build for two screen sizes is to draw the big one, then add media queries until the small one stops overflowing. It is cheaper, it is what every framework encourages, and it produces interfaces that are tolerable on a phone and never good.

The reason is that width is not the difference. Posture is.

What actually changes

On a desktop the pointer is precise, the hand is on a keyboard, and the screen shows several things at once. Navigation can live in a rail down the side because there is room and because moving a cursor there costs nothing.

On a phone one thumb does everything, and the reachable area is the bottom half of the screen. A rail on the left is a stretch across the device. A hover state does not exist. A dense list that scans beautifully at arm's length is a wall of text at the length of your arm bent.

These are not the same design at two widths. They are two designs.

What I built instead

On a board product I ended up with two component trees and two navigation models, chosen at the breakpoint rather than blended through it.

The phone gets a bottom tab bar, column tabs as pills you can swipe between, and a floating action button. Everything that gets touched often sits where a thumb already is.

The desktop gets a persistent rail and a side panel that opens next to the board rather than over it, because on that screen there is room to show the card and its context at the same time.

Neither is the other one adapted. They share data, tokens and behaviour. They do not share layout.

The objection

Two trees is more code, and more code is more to maintain. That is true and it is the right thing to weigh.

What it buys is that neither version carries compromises made for the other. No padding that exists because a desktop needed it. No navigation pattern that is almost reachable. Every decision in each tree was made for the device it runs on.

The cost lands once, when you build it. The compromise lands every day, on every user, forever. For a product people open daily, that trade is not close.

For a marketing page it absolutely is, and one responsive layout is the right answer there. The question is not which approach is better. It is how often the thing gets used.