Above the Fold: What Visitors Should See Before Scrolling

The fold is an argument that has been running for twenty years, and both sides are slightly wrong.

It is not where people stop reading, and it is not irrelevant either. It is where they decide whether reading on is worth it.

This guide covers what the term means, where the fold actually sits now, what belongs above it, and how to check your own without guessing.

Key Takeaways

• It is a decision point, not a cutoff. People scroll when given a reason.
• The fold moves with the screen. There is no single position.
• One message, one action. Crammed tops communicate nothing.
• Let the edge cut something off. A clean break hides the rest.
• Check it on a real phone. That is where most visitors are.

What Above the Fold Means

The phrase comes from newspapers. A broadsheet was folded in half on the stand, so only the top half was visible to somebody walking past.

Whatever sat there had to be strong enough to sell the paper. Everything else was reached by picking it up.

On the web, the above the fold meaning is whatever is visible when a page loads, before anybody scrolls. The top half of the screen rather than the top half of the sheet.

The job is identical. Earn the next action rather than fit everything in.

Which is why the newspaper comparison survives, despite nobody buying a broadsheet off a stand any more.

What is above the fold depends on who you ask. The term is used loosely in practice. Some people mean the first screen, others mean the hero section whether or not it fits. For most purposes the first screen is the useful definition.

Where the Fold Actually Sits

There is no single fold. That is the part that makes the old debate unproductive.

A desktop monitor shows a lot. A laptop shows less. A phone shows least, and a phone held in a browser with its own toolbars shows less still.

So designing to a fixed height is designing for one visitor. The useful question is what the first screen contains on the devices your visitors actually use.

Your analytics will tell you which those are. Most small business sites find more phones than anything else, often considerably more.

Check the figure rather than assuming it. A trade selling to offices may still be mostly desktop, and that changes what the first screen can hold.

Design the phone view first and let the desktop version inherit from it rather than the other way round.

Browser toolbars complicate this further. A phone browser hides and shows its own bars as somebody scrolls, so the visible area changes while they are reading.

Which is another argument against designing anything to fit exactly. Exact fits break on the device you did not test.

Is the Fold Still Relevant

People scroll happily now. That was not reliably true in the early days of the web, and the habit changed.

But attention is still weighted heavily towards the top. Nielsen Norman Group's eyetracking work found users spent about 57% of their page viewing time above the fold in its 2018 study, down from 80% in 2010.

So the fold stopped being a wall and became a weighting. More attention is spent up there than anywhere else, even though people will go further.

That is the practical reading. Put the most important thing where the most attention is, and give people a reason to continue.

Anybody claiming the fold is dead, and anybody claiming nothing below it gets read, is overstating their half of this.

What changed is the cost of getting it wrong. A weak top used to lose the visitor entirely. Now it mostly loses their patience, slowly and just as expensively.

How to Get Your Own Top Right

Three steps, and the first is the one most sites fail.

1. Say one thing clearly

Good above the fold web design holds five things. A value promise headline, one supporting line, one primary action, one relevant visual, and a hint that there is more below.

The headline says what you do and who for, in the words a customer would use. Not a slogan, not a pun, and not a sentence that would fit any business in your trade.

The supporting line adds the detail the headline had no room for. One sentence.

Keep it to one line on a phone. Two lines of supporting copy push the button off the visible area on a small screen.

One action, repeated later down the page rather than joined by a second one up here.

A trust signal belongs here too, provided it is honest. A named review, a figure you can evidence, or a professional membership that means something in your trade.

Every extra element makes the others smaller. That is the trade, and it is why crammed tops communicate nothing at all.

2. Let the edge cut something off

A page that ends neatly at the bottom of the screen looks finished, and a page that looks finished does not get scrolled.

So let the next section begin before the edge. Half a heading, the top of a row of cards, the beginning of a photograph.

This costs nothing and is usually a matter of reducing the height of the section above it by a small amount.

That visual interruption does more than any downward arrow, because it shows there is something rather than asking people to believe it.

Avoid full screen height sections that line up perfectly on every device. They are the commonest cause of a page that nobody scrolls.

This matters most on a phone, where a full height hero can fill the entire screen and leave no hint that anything follows it.

3. Check it on a real device

Open your own site on your own phone, on mobile data, and look at what is actually visible.

Can you see the button without scrolling. Can you read the headline aloud in one breath. Does the page look like it continues.

Then show it to somebody who does not know the business and ask what you sell. Their answer is the only honest measure of whether the headline works.

Give them five seconds and then take the screen away. What they remember is what the first screen actually communicates, rather than what it contains.

Do it again after any redesign, because this is the part that quietly breaks when something else is changed.

A cookie banner or a chat bubble can cover the button entirely on a small screen. Both are easy to miss from a desktop, and both are common.

Does It Matter for Search

Indirectly, and the indirect route is worth understanding rather than dismissing.

What loads first is usually the largest thing on screen, which makes it the Largest Contentful Paint. Google documents a good Largest Contentful Paint as 2.5 seconds or less, measured at the seventy fifth percentile of page visits.

That measurement is one of the Core Web Vitals, and those feed into Google's page experience signals.

So a heavy hero image or an autoplaying video does not harm your rankings directly. It harms the measurement that feeds them.

Compress the hero image, serve it at the size it displays, and avoid anything that makes the first screen wait on a script.

Fonts are worth checking too. Text that waits for a web font to download leaves the first screen blank for longer than anybody intended.

Above the Fold Content, and What Goes Below

The right column is not less important. It is the part people read once the left column has convinced them to.

Which is the useful way to think about the whole subject. The first screen sells the second one, and nothing more than that is being asked of it.

Common Mistakes

• Cramming everything up top. Nothing stands out at all.
• A clever headline. Clear beats memorable here.
• A slideshow in the hero. Nobody waits for the second slide.
• A full height section. It looks finished, so nobody scrolls.
• A heavy hero image. It delays the measurement Google uses.
• Never checking on a phone. Where most visitors are.
• A chat bubble over the button. Invisible from a desktop.

FAQs

What does above the fold mean?

Whatever is visible on a web page when it first loads, before anybody scrolls. The phrase comes from newspapers folded in half on a stand, where only the top half could be seen by somebody walking past and deciding whether to buy.

Is above the fold still relevant?

Yes, though as a weighting rather than a wall. People scroll readily now, but attention remains concentrated at the top of a page, so the most important message and the main action still belong in the first screen a visitor sees.

What should be above the fold?

A headline saying what you do and who for, one supporting sentence, one primary action, one relevant visual and one honest trust signal. Crucially, also something cut off by the bottom edge, so the page visibly continues past the screen.

Where is the fold on a website?

There is no single position, because it moves with the screen. A desktop monitor shows a great deal, a laptop less, and a phone least of all. Design for the first screen on a phone, then let larger screens inherit from that.

Does above the fold affect SEO?

Only indirectly, and the route is worth understanding. What loads first is usually the Largest Contentful Paint, which is one of the Core Web Vitals, and those feed into Google's page experience signals. A heavy hero image slows that measurement rather than harming your rankings by itself.

Conclusion

Above the fold is a decision point rather than a cutoff, and it moves with every screen.

Say one thing clearly, offer one action, and resist the urge to fit everything into the first screen.

Let the bottom edge cut something in half, because a page that looks finished does not get scrolled.

Then open it on your own phone and ask somebody what you sell.

If you would rather hand it over, see how we approach web design.