What is above the fold?
The phrase is borrowed from newspapers. A broadsheet folded on a newsstand shows only its top half, so editors put the headline, the picture and the story they most wanted sold above the crease. On a web page the fold is the bottom edge of the screen on first load. Everything a visitor sees without touching the mouse or the thumb is above it; everything else has to be earned.
The complication is that there is no single fold anymore. A phone held upright, a laptop, a widescreen monitor and a tablet turned sideways all cut the page at a different line. So above the fold is less a measurement than a discipline: whatever the device, the first screen has to say what this is, who it is for and what to do next.
Why it matters
Why above the fold matters
Most people decide whether to stay in the first few seconds, and those seconds are spent on the first screen. If it loads slowly, says nothing, or buries the point under a cookie banner and a hero slider, the visit is over before it starts. The first screen also sets the tone: the typography, the picture and the pace of the motion tell a visitor what kind of brand they are dealing with before a word is read. That is why it matters for conversion, for brand and for search, since the first paint is what the performance metrics measure.
In practice
How above the fold works in practice
- 01
We start by deciding the one thing the first screen must do: play the reel, state the offer, get the email. Then we design the top of the page for the smallest likely viewport first, because if the headline, the image and the call to action fit on a phone they will fit anywhere. Only then do we open it up for the desktop, where the extra width is used for air rather than for more stuff.
- 02
The second half is engineering. The assets in the first screen are the ones that have to load fastest, so the hero image is sized and compressed with care, the fonts are preloaded, scripts that are not needed for the first paint are deferred, and anything that would shift the layout as it loads is given its space in advance. A first screen that is beautiful in the design file and janky in the browser has failed.
At RIOT
Above the fold at RIOT
On riot.nyc, a WordPress site we design and build ourselves, the first screen belongs to the work. Film plays before a sentence is read, because we are a creative agency and production studio and the reel says it faster than copy can. The words, the services and the clients sit below, for the people who stayed.
Watch out
What people get wrong about above the fold
The oldest mistake is cramming. Treating the fold as a deadline and stuffing every message, badge and button into the first screen produces a page that says everything and lands nothing. The second is pretending people do not scroll: they do, constantly, as long as the first screen gives them a reason. The third is designing the fold on a 27-inch monitor and discovering on launch day that on a phone the headline sits below a video that never loads.
