Mobile First

Screen design used to start at the desktop. A designer finished a 1440-wide layout, then shrank it to phone size. Shrinking is subtraction rather than addition, so mobile work turned into a negotiation about what to cut, and what got cut was usually the part that mattered.

Pagedeck went through this. The dashboard was drawn for desktop first, and when the mobile version came up, Noa and Theo spent three days arguing over what to fold away. Every candidate for removal was, to someone else, the reason the screen existed. A wide layout can put a promo banner, recent activity, and a help panel side by side; a narrow one stacks them in one column, so something lands far enough down the page that nobody sees it.

Mobile first reverses the order. Draw the narrow screen first and the shortage of room leaves only what is necessary, which turns the wide screen into an exercise in adding instead of removing.

Finish one layout at the narrowest size, then widen from there. Four steps.

1. Treat 360 pixels wide as the reference screen. It covers the common phone width, and a single column that reads well here reads well on anything larger.
2. List everything that belongs on the screen and put it in top-to-bottom order. With one column available, placement order is priority order. Anything with no room gets folded behind a toggle or moved to another screen.
3. Widen the window and mark the point where the layout starts to feel wrong as a breakpoint. That point is usually where a line of text grows long enough that the eye loses the start of the next line.
4. Decide what the extra room buys. Unfold what step 2 folded away, or split one column into two. New features don't enter here: the promise of the method is that the same content appears in the same order at every size.

The payoff is largest when more than half of a product's traffic is mobile; Pagedeck's document screens run 62 percent mobile, so narrow is the baseline. It pays much less on an admin console with a twenty-column table, which has no single-column form — screens like that do better with adaptive design and a separate layout per size. Also check that any button pinned to the bottom edge clears the safe area.

"We're going mobile first on this redesign. Review the 360 layout, then we'll look at desktop."

Asking the team to review the narrow mock before the wide one.

"All I have is the desktop mock, and none of this fits on a phone."

The order got reversed, so someone still has to decide what comes out.

"Mobile first doesn't mean we only care about mobile."

It names a starting point, not a split of attention between the two screens.

For the Pagedeck dashboard redesign, Noa posted the 360 layout on its own. Mia looked at what had been pushed down the column and cut everything from the third item on. The desktop mock arrived after that decision was settled.