Above the Fold Optimization: What Visitors Must See First
What the fold means on the six most common screen sizes, and the four elements that have to be above it.
On this page
The short version
- The fold is not a line, it is a distribution. The same page has a different first screen on six common devices, and the smallest one has less than half the space of the largest.
- Four things must be above it: what this is, who it is for, what to do, and a reason to believe the page is legitimate.
- Browser chrome takes a real bite on mobile — the usable height is meaningfully less than the screen height, and it changes as the reader scrolls.
"Above the fold" survives from newspaper layout and gets treated as a fixed line. It is not: it is wherever the viewport ends, which differs by device, by browser, by whether the address bar is showing, and on desktop by how many toolbars someone has.
That makes the useful question not "what is above the fold" but "what is above the fold on the smallest common device", because that is the constraint every other case satisfies automatically.
Usable height on common devices
After browser chrome. These are the numbers a first screen actually has to fit into, not the advertised screen sizes.
Approximate and browser-dependent. Measure your own audience's distribution rather than trusting any list — the laptop row surprises people and is worth checking.
The four things that must fit
What this is. The headline, carrying the promise.
Who it is for. Usually the subhead, and it is what stops the wrong visitor reading three screens before discovering it was never for them.
What to do. The form, or a button leading to it. On a small ask the form itself; on a large one, a button that scrolls to it — which still counts, because the visitor can see there is an action.
A reason to believe this is legitimate. A recognisable logo, a name, a count, anything that says a real organisation is behind this. On a page reached from an ad, this matters more than most people allow for, because the visitor has no idea who you are.
What to move below
Almost everything else. Feature lists, extended proof, comparison tables, the long-form case — all of it works better after the visitor has decided to keep reading, and putting any of it above pushes one of the four essentials off.
The hero image is the most common offender. A large decorative image takes the single largest share of the first screen and contributes least, unless it shows the actual thing being offered. A picture of the checklist is worth its space; a stock photograph of a person at a laptop is not.
The second most common is a cookie banner. It is not part of your design and it will occupy a strip of that first screen whether you like it or not, so the layout has to survive it.
The same first screen, two ways
Nothing fits
- Full-width stock photograph
- Site navigation with seven links
- Headline, then nothing else visible
- Form is two scrolls down
- Cookie banner covers the subhead
All four fit at 560px
- Logo only, no navigation
- Headline and subhead
- One field and a button
- A line naming the audience
- Cookie banner accounted for in the layout
The fold is not a wall
People scroll. The old claim that content below the fold goes unread has not been true for a long time, and pages that cram everything above it perform badly because the first screen becomes unreadable.
What is true is that the first screen decides whether they scroll at all. So the goal is not to fit the page above the fold — it is to make the first screen good enough that the second one gets seen.
A useful signal that you have gone too far: if the first screen has more than about five distinct elements, it is competing with itself, and something that matters is being lost among things that do not.
First screen check
- All four essentials fit at 560px of usable height
- Checked on a 13-inch laptop with a bookmarks bar showing
- No decorative hero image taking the largest share
- Cookie banner accounted for in the layout
- Five or fewer distinct elements
- Something identifies who is behind the page
- There is a visible reason to scroll
Frequently asked questions
Should the form always be above the fold?
For a small ask, yes — there is nothing to be persuaded of. For a large one, a visible button that leads to it is enough, and the form itself is better placed after the case has been made.
How do I find my audience's real viewport sizes?
Your analytics tool records them. Take the tenth percentile of height rather than the median — the design should work for the smallest common device, not the typical one.
Does a scroll indicator help?
Marginally, and it is usually a symptom. If a page needs an arrow to tell people to scroll, the first screen has probably been filled edge to edge with no visual hint that anything follows.