Fold position moves with the device; there is no fixed pixel
Aliases: viewport height · no 600px fold · fold histogram
What it is
The “fold” on a mockup is often drawn at 600, 736 or 1000 pixels, as if it were a physical edge. On a real device it is the bottom of the viewport, set jointly by device height, status bar, browser chrome, tab bar, orientation and a foldable’s mid-state. The same page folds above the price on an SE, through the reviews on a tall phone, and somewhere else again in a landscape browser. The fold is a distribution, not a pixel constant that can be written into a grid.
Packing “what matters” into 600 pixels against that constant leaves a hole on a tall screen and slices the critical fact on a short one.
Why it happens
Visible height = device logical height − system chrome − the app or browser’s own shell. Every term moves: Safari’s toolbar grows and shrinks on scroll, Android navigation is three-button or gesture, a foldable’s cover and inner displays differ by a whole slab. “First screen” in the user population is therefore a histogram of heights, not a point. Any practice that pins a key fact “16 pixels above the fold” holds for one bar of that histogram.
Worse, the fold moves on one device. The toolbar collapses and the viewport grows, yesterday’s below-the-fold floods the first screen; the keyboard rises and the reverse happens. The fold is a live edge that walks with state.
Studying it
On a real device sample (or viewport data weighted by market share) record visible height at landing, draw the histogram, and drop the page’s key anchors (price, primary button, first heading) onto that chart. Read, for each anchor, the percentage of users who have it on the first screen.
Independent variables: device class, browser chrome, orientation, toolbar expanded or collapsed. Dependent variables: first-screen coverage of each key anchor, proportion of elements sliced by the fold.
Do not let one preset iPhone in a design tool stand in for the histogram. If the lab only has one height, say so; do not generalise to “all folds”.
Where it stops holding
A single-SKU appliance (an industrial panel, one model of in-flight entertainment) can treat the fold as a constant. Print, and a desktop widget of fixed window size, have no such distribution. Server-side chopping into two heights by User-Agent is still a coarse sample of the distribution; the users in the middle get sliced wrong. Larger type changes what one screen holds; the fold’s pixel has not moved and the content-fold has — the histogram has to be drawn again in content height.
Applying it
- Let the product’s own viewport-height histogram decide which few items must enter the first screen, not a line on the mockup.
- Accept a key anchor as “still fully visible at the Nth percentile height” — for example the price still complete at the 25th-percentile short viewport.
- Do not crush the first screen into a packed strip and an empty strip to appease a fictional 600-pixel line.
- How to check: landing frames on the shortest and tallest target devices, toolbar up and down, portrait and landscape, with price, primary button and first heading marked. Any frame where those three are sliced into unreadability is still treating the fold as the fake constant.