CRO
What is above the fold? Meaning and impact on conversion
Copy for AI
Above the fold is the part of a web page a visitor sees without scrolling: the first screen. The term comes from newspapers, where the top story sat above the fold of the folded paper. Online it matters because attention is front-loaded: in Nielsen Norman Group’s 2018 eye-tracking study, users spent about 57% of their page-viewing time above the fold.
Below you’ll find what belongs there, a copyable template, two worked B2B examples and a 10-point checklist you can run on your own page.
What is above the fold exactly?
Above the fold refers to everything that is visible as soon as a page loads, before the visitor starts scrolling. Everything underneath is “below the fold”. Where exactly that line falls depends on the screen: a desktop monitor shows far more than a smartphone, and it even varies between phones. So there is no single fixed fold line, but a range of common screen sizes.
The importance lies in behaviour. Visitors decide within seconds whether a page looks relevant. If the essentials are not on screen right away, many drop off before they ever scroll. That first impression therefore carries disproportionate weight. It is exactly the zone where your conversion rate begins.
Research by the Nielsen Norman Group confirms this. In its 2018 study (120 participants, more than 130,000 eye fixations on a 1920 x 1080 screen), users spent about 57% of their viewing time above the fold, 74% in the first two screenfuls and 81% in the first three (source: Nielsen Norman Group, “Scrolling and Attention”).
| Part of the page | Share of viewing time (NN/g, 2018) |
|---|---|
| First screen (above the fold) | about 57% |
| Second screen | about 17% |
| First two screens together | 74% |
| First three screens together | 81% |
The first screen is not a place to keep your message waiting.
What belongs above the fold?
The first screen has to answer four questions at a glance: what is this, who is it for, why should I care and what is the next step. In practice that usually means:
- A clear value proposition. One crisp headline that says what you solve, not a vague slogan.
- Supporting subtext. One or two sentences that make the promise concrete.
- A primary call-to-action. One obvious next step, not five choices at once.
- A visual anchor. Imagery or design that reinforces the message instead of distracting from it.
- A trust signal. For example a logo, a number or a short reference that lends credibility.
The table below sums up which element answers which question, and where things go wrong in practice.
| Element | Answers the question | Common mistake |
|---|---|---|
| Value proposition (headline) | What is this and what does it solve? | A vague slogan instead of a concrete promise |
| Supporting subtext | Why is this relevant to me? | Repeats the headline or dives into detail too fast |
| Primary call-to-action | What is my next step? | Multiple equal buttons that create decision paralysis |
| Visual anchor | Where should I look? | Stock imagery that distracts instead of supporting the message |
| Trust signal | Can I believe this? | Missing entirely, or a logo wall without context |
This is closely related to building a strong hero section that converts and to well considered call-to-action choices. The trap is trying to cram everything above the fold: it turns cluttered and you lose the very focus you were after.
A copyable above the fold template
Fill in this brief before anyone opens a design tool. If a line stays empty, that’s the gap your first screen has today.
ABOVE THE FOLD BRIEF
Page: [URL]
Visitor: [who lands here, e.g. "operations manager, from a Google search"]
Headline: [the outcome you deliver] for [who], without [the main pain]
Subtext: [how you do it, in one sentence, with one proof point]
Primary CTA: [verb + what they get], e.g. "Get your audit in 24 hours"
Secondary link: [optional, low-commitment: "See how it works"]
Trust signal: [one: client logo row, a number, a short quote with name]
Visual: [the product, the result or the people, never generic stock]
Mobile order: 1. headline 2. subtext 3. CTA 4. trust signal 5. visual
Two worked examples: before and after
These are illustrative B2B examples, not client pages. They show how the template changes a vague first screen into one that answers the four questions.
Example 1: an IT managed services provider
| Before | After | |
|---|---|---|
| Headline | ”Your partner in IT" | "IT support for 20 to 200 staff, with a fixed monthly fee” |
| Subtext | ”We offer innovative solutions" | "One team for helpdesk, security and backups, answering within the hour” |
| CTA | ”Learn more” + “Contact” + “Our services" | "Book a 20 minute IT check” |
| Trust signal | none | Logo row of three clients in the same sector |
Example 2: an industrial parts supplier
| Before | After | |
|---|---|---|
| Headline | ”Quality since 1985" | "Custom steel parts, delivered in 10 working days” |
| Subtext | Company history paragraph | ”Upload your drawing and get a quote within one working day” |
| CTA | Carousel with four slides | ”Upload a drawing” |
| Trust signal | ISO logo at the very bottom | ISO certificate badge next to the CTA |
The pattern is the same in both: a concrete promise, one action and one proof point, all visible before the first scroll.
Above the fold checklist: 10 checks for your first screen
Run this on your most important page, once on desktop and once on a real phone:
- A stranger can say what you offer within five seconds.
- The headline names an outcome, not a slogan.
- It’s clear who the page is for (sector, company size or role).
- There’s exactly one primary call-to-action.
- The CTA label says what happens next (“Get a quote”), not “Submit”.
- One trust signal is visible without scrolling.
- The visual supports the message instead of decorating it.
- On mobile, the headline and CTA both show before the first scroll.
- The cookie banner doesn’t cover the headline or the CTA.
- Something visibly invites the visitor to scroll on.
Score below 8? Then start with the headline and the CTA: those two checks fix most first screens.
Above the fold on mobile: smaller screen, harder choices
On mobile the fold is much smaller, and at the same time a large share of traffic arrives by phone. That forces you to prioritise. Where headline, subtext, button and image sit comfortably together on desktop, on mobile you have to choose ruthlessly what appears first.
That is exactly where the gains often are. At Adventure Valley Durbuy the key was the mobile experience: by rethinking the first screen and the conversion path on smartphone, the mobile conversion rate improved considerably. The lesson is not “cram everything above the fold”, but “put what matters there and test it”. If you want to know whether your fold works, conversion rate optimization is the way to measure it instead of guessing.
In practice we see that the difference between desktop and mobile is not only about space, but about order. On desktop an element can sit to the right or at the bottom of the first screen; on mobile everything stacks, so the reading order determines what a visitor sees first. A button that lands in view immediately on desktop can end up three screen lengths lower on mobile. So do not think of “the fold” as one line, but ask: what appears first, second and third on a phone?
Honestly: above the fold matters, but it is no dogma
We like to nuance one stubborn myth: that nobody scrolls and therefore everything has to be above the fold. That is not true. People do scroll, certainly when the first screen has caught their attention. The role of above the fold is to convince the visitor to go further, not to tell the whole story in a single screen.
In B2B that counts double. Buyers with a long sales cycle and multiple decision makers often read thoroughly before they get in touch. Above the fold wins the first seconds; the content below it wins the trust. So steer on qualified leads, not just on a pretty first impression. A page that looks good above the fold but proves nothing underneath delivers clicks, not customers. Test what works instead of fixating on the fold line: A/B testing shows you what really moves the needle.
Common above the fold mistakes
The most common blunder is trying to show too much. Anyone who crams a value proposition, three buttons, a navigation menu, a cookie banner and a carousel into the first screen turns above the fold into a wall of noise. The visitor no longer knows where to look, and the attention you just won you lose again.
A second mistake is a weak or missing call-to-action. A pretty first screen without a clear next step leaves the visitor hanging. One primary action should always be visible.
The third mistake is designing above the fold on a large screen and forgetting the mobile reality. What fits comfortably on a 27 inch monitor often becomes half a sentence and a button that falls just out of view on a phone. So always test on real devices, not only in a responsive preview. And the fourth: confusing “above the fold” with “the whole message”. The fold wins the first seconds; the rest of the page wins the trust. You measure that with A/B testing, not with assumptions.
Ready to make your first screen convert?
Tell us which page matters most for your leads, and we will take an honest look at whether your above the fold shows the right message and the right action.
We are a small team that moves fast, so you get concrete improvement points instead of a theoretical report. Contact us.
Frequently asked questions
What does above the fold mean?
Above the fold is the part of a web page that is visible immediately once the page loads, so without scrolling. The term comes from the newspaper world, where the most important news sat above the fold.
Where exactly is the fold?
There is no fixed line. The fold depends on screen size: on desktop you see far more than on a smartphone, and it even varies between phones. That is why you design for common screen sizes and test what actually comes into view.
Does everything really have to be above the fold?
No. Above the fold has to convince the visitor to keep scrolling, not tell the whole story. People do scroll when the first screen appeals to them, certainly in B2B where buyers read thoroughly.
Why is above the fold important for conversion?
Because visitors decide within seconds whether a page is relevant. If the essentials, with a value proposition and a clear action, are not on screen right away, many drop off before they ever scroll. That first impression weighs disproportionately on your conversion.
Free website scan
Enter your website and get an automatic scan within minutes, with concrete technical and SEO improvements. No sales pitch.
We only use your details for your scan. No spam, unsubscribe anytime.