Above the fold: what should your visitors see before they scroll? How to check your first screen

Above the fold is the part of a web page you can see without scrolling. The fold is not in the same place on mobile and desktop. See what moves it, and how to check and prioritise your own first screen.

Indhold

Why does the first screen matter, and what is it confused with? What decides where the fold sits on your page? How do you check and prioritise your own first screen? What else do people ask about above the fold?

Above the fold

Above the fold is the part of a web page a visitor can see on their own screen without scrolling.

Also called: Above-the-fold content, ATF

The term comes from newspapers. The most important headlines and images were placed above the physical fold on the front page, so they could be seen while the paper lay folded on the newsstand. On a web page, the fold is not a fixed line. It sits wherever the visitor’s screen ends.

Why does the first screen matter, and what is it confused with?

The first screen is the only part every visitor sees. It decides whether they understand what the page offers, and whether they keep scrolling or leave. That does not mean everything important has to be squeezed in at the top.

Visitors are happy to scroll when they know what they are looking for and can see they have come to the right place. So the job above the fold is narrow: say what the page offers, and give one clear way forward. The rest can sit further down.

Three misconceptions come up again and again:

Misconception	What is actually true
Everything important must be above the fold	Only the message and one call-to-action button belong there. If you squeeze everything in, it gets harder to see what the page is about.
The fold is a fixed line	The fold moves with screen size, browser, cookie banner and header height. It sits in one place on your computer and somewhere else on a customer’s phone.
Visitors don’t scroll	Visitors scroll if the first screen gives them a reason to. The problem is rarely scrolling. It is a top section that says nothing.

The exception: on a long article or a landing page with a single task, the fold matters less than on the homepage. The visitor has come to read or to do one thing, and expects to scroll.

What decides where the fold sits on your page?

The fold sits where the visitor’s screen ends, minus everything the browser and the page itself place at the top. Screen size, browser bars, cookie banners and pop-ups, header height and image size together push the content down.

Take the homepage of a small plumbing company. On desktop, the visitor sees a large image, the slogan and the phone number. On a phone, the browser’s address bar and the cookie banner fill the top, and the image takes the rest. The phone number and the Book a plumber button sit below the fold.

None of these five factors is a mistake on its own. It is the total that counts. A cookie banner taking up a third of a phone screen, plus a full-height image, is enough to push both the message and the call-to-action button down. That is why you cannot name one pixel height as the fold for everyone.

It also means you cannot judge the fold from your own screen. Your computer probably has a bigger screen than most visitors’ phones, and you have usually already accepted cookies, so the banner does not show for you.

How do you check and prioritise your own first screen?

Open the page on a phone and a computer as a new visitor sees it, and take a screenshot of what is visible. Make sure one sentence about what the page offers and one call-to-action button are visible on both, and move the rest down.

Do it in this order:

Open the page as a new visitor. Use a private browser window on both phone and computer, so you are logged out and see the cookie banner.
Take a screenshot without scrolling. That is your first screen. Save it from both devices.
Write one sentence on what the page offers. For the plumbing company, it could be: Plumber in Aarhus, emergencies too.
Compare it with the screenshots. Is the sentence visible on both? Is one call-to-action button visible on both?
Remove what pushes it down. Make the cookie banner smaller, reduce the header height, or make the image shorter on mobile.
Move the rest down. Services, reviews and company history can sit below the fold.
Check again. Take new screenshots and see whether the sentence and button now sit above the fold.

For the plumbing homepage, this meant a shorter image on mobile and a cookie banner at the bottom of the screen instead of the top. Now the phone number and the Book a plumber button show on mobile before the visitor scrolls.

This advice matters less for pages where the visitor already knows what to expect, such as a long guide or a page you reach from a newsletter. There, a clear headline is enough, and the call-to-action button can sit further down.

What else do people ask about above the fold?

Do visitors actually scroll?

Is an image carousel a good idea at the top of the page?

Does above the fold affect load time and Google?

Does everything need to be above the fold on a long page?

What to remember about above the fold

The fold is not a fixed line: it moves with screen, browser, cookie banner and header height.

The first screen should say what the page offers and show one call-to-action button. Nothing more.

Always check your page on a phone in a private window, because your own computer shows a different fold from the one most visitors see.

Services, reviews and detail can sit below the fold, as long as the top gives a reason to scroll.

Homepage review

See what your visitors meet before they scroll

Enter your domain and your email. We will look through your homepage on mobile and desktop and send you what sits above the fold, and what pushes the most important parts down.

Whether your message and call-to-action button are visible on mobile without scrolling
Which elements push the fold up, such as the cookie banner, header or image
What you can move down without losing anything