Responsive Design

For a while, phone sites were built separately. Different address, different screens, and the same content maintained in two places — every copy change and every price update had to be made twice.

Pagedeck lived through it. Ravi asked for one line of pricing copy to be changed; the desktop screen picked it up and the phone screen kept serving the old line for two weeks. Then tablets arrived and phone screens kept growing, and there was no end to how many versions the team owed.

Responsive design stops producing one build per device. The layout is written instead as rules that stretch and shrink with the available width. With one place to edit, there's nothing left to fall out of sync.

It starts with writing sizes as proportions rather than fixed numbers.

1. Convert widths to proportions. A card is a third of the container, not 400 pixels. Shrink the window a little and the card shrinks a little, so no gap opens up and nothing gets clipped.
2. Pick your breakpoints — the widths at which the layout is allowed to change. Choose them by dragging the window until the layout starts to feel cramped, not by copying the dimensions of a particular device.
3. Decide the column count for each range. Below 768 one column, above it two, above 1024 three. Inside a range only the elements grow and shrink; the column count changes when a boundary is crossed, which is why drawings are needed at the boundaries and not everywhere.
4. Handle images and tables too. Cap an image so it can't exceed its own column, and let a wide table scroll on its own. When the whole page starts sliding sideways, the layout has broken.
5. Look at it on real hardware. Narrowing a desktop window is not the same as holding a phone. Whether tap targets are big enough, and whether content collides with the curved edges of the display, is what the safe area tells you.

"Do we go responsive on this, or leave mobile for later?"

Asking whether one build should cover every width or just one for now.

"Three columns at 1024, but around 900 the cards get too narrow. Let's add another breakpoint."

Elements shrank inside a range until they stopped being readable.

"There are only two mockups. What happens at the widths in between?"

Nothing has been decided for the ranges between the breakpoints.

Pagedeck mockups arrive in threes. Noa draws 360, 768 and 1440, plus a table saying which elements grow in between and which stay fixed. That table is what Theo asks about most. Without it, how the page looks at 500 or 1100 gets decided by whoever builds it, and the decision comes back during review.