Adaptive Design

When there was one screen width, there was one thing to check. Draw for 1024 pixels, confirm that single view, done. Phones and tablets made width effectively unbounded, and the basis for deciding how many mockups to draw disappeared with it.

The first answer was building two separate products. A phone-specific address, with the screens rebuilt from scratch. That made the review targets clear — two of them — but every feature change meant editing in two places, and shipping with only one side updated kept happening.

Adaptive design takes the middle path. It neither handles every width nor maintains two builds; it fixes three or four ranges and designs an arrangement for each. Making the coverage finite settles the number of mockups and the list of things to review in one decision, which is the whole appeal.

It starts with choosing the ranges you support. Five steps.

1. Collect actual screen widths from your traffic logs. Clusters near 360, 768, and 1440 pixels are common, though it varies by product. Enterprise-heavy products cluster wide; consumer products often have small widths above half of all sessions.
2. Cut three or four ranges. The width at which the arrangement changes is a breakpoint, and it goes in the valleys between the clusters you just found.
3. Draw a separate arrangement per range. Not the same arrangement stretched and squeezed — a different one. Three columns become one, and a left sidebar moves to a bottom tab bar.
4. Check the widths between ranges. Inside a range the layout uses a fixed width, so at something like 420 pixels the side margins open up noticeably. If it looks wrong, shrink that range's fixed width or move the breakpoint.
5. Subtract what the device covers. Elements have to sit inside the safe area, clear of the notch and the home bar, or the smallest range gets clipped.

This works alongside mobile first, which is about drawing the small screen first. Which range you draw first and how many ranges you keep are separate decisions.

"Adaptive means three mockups. The tradeoff is that landscape tablet has to fit one of the three."

Fewer things to review, at the cost of ranges something gets squeezed into.

"The side margins open up too far at 420 pixels."

The fixed width reads wrong at a width between breakpoints.

"1440 is 60 percent of our traffic. Let's build that arrangement first."

Which range to draw first, decided from the distribution.

The Pagedeck document editor works this way. Ravi pulled the width distribution, and Noa drew separate arrangements for 360, 768, and 1440. After Theo implemented it, the margins opened up at 420 pixels, so the small range's fixed width grew to cover it.