Conversion and UX

Above the Fold

Also called the fold, first screen

The part of a page a visitor sees before scrolling, which differs on every screen size.

Quick facts: Above the Fold

Category
Conversion and UX
Also called
the fold, first screen
Level
Beginner
Affects
First impressions, bounce, ad landing page performance
Where to see it
Chrome DevTools device toolbar, Microsoft Clarity scroll maps, GA4 scroll events
In this article4
  1. How above the fold works
  2. Why above the fold matters
  3. Common mistakes with above the fold
  4. How to act on it

How above the fold works

The phrase comes from newspapers, where only the top half of a folded broadsheet was visible on the stand. On the web there is no single fold. What a visitor sees before scrolling depends on their screen, the height of the browser toolbar, whether a cookie notice or chat bubble is covering part of the page, and on a phone whether the address bar is expanded. There is no fixed line to design against.

What does exist is a dependable pattern of attention: whatever occupies the first screen decides whether the rest of the page is read at all. Attention thins as people move down, so the top carries more of the decision than any other part of the layout.

Why above the fold matters

A visitor arriving from an ad or a search result is deciding one thing: am I in the right place? The first screen has to say what this is, who it is for, why it is worth their time and what to do next. If it does not, the back button is nearer than the scrollbar.

On mobile the stakes are higher, because the visible area is small and a hero image with a slogan across it can fill all of it while saying nothing. That matters in Nepal in particular, where most traffic arrives on a phone. Paid traffic is the least forgiving of all, since every one of those visits was bought.

Common mistakes with above the fold

Cramming is the usual failure: headline, subheading, form, trust logos and navigation all competing for the same small space, so nothing stands out and the visitor reads none of it. The opposite failure is a decorative banner that pushes the actual message out of sight.

Designers also review the page on a large monitor and never open it on an older phone, where the same layout puts the button below the visible area. And treating the fold as a hard rule produces a third mistake — refusing to let any page be long. Long pages work perfectly well when the opening earns the scroll.

How to act on it

Decide the message before the design starts. Write the promise, the proof and the next step, then let the layout carry them rather than the other way round. Keep the primary call to action reachable on a small phone without scrolling, and repeat it further down instead of relying on a single appearance.

Check the page on a real device rather than a resized desktop window, and check it with the cookie banner, notification bar and chat widget in place, because those are what the visitor actually sees. For campaign traffic, make sure the opening repeats the promise made in the ad; a mismatch between the ad and the page is one of the quickest ways to waste a click on landing pages built for ads. Then scroll-test with a stopwatch mentality: if you cannot tell within a moment what the page offers, neither can a stranger.

Do and do not

Do

  • Answer what, who and what next on the first screen
  • Check the page on a real, older phone
  • Keep the main button visible without scrolling

Do not

  • Squeeze every trust badge into the top screen
  • Design only on a wide desktop monitor
  • Let a decorative banner push the message down

Questions people ask about this

Is above the fold still relevant now that everyone scrolls?

Yes, though not as a rule about page length. People scroll willingly, but only when the top of the page gives them a reason to. Treat the first screen as the decision point that earns the scroll, rather than as a box into which every important element must be squeezed. Long pages perform well when their opening makes the rest look worth reading.

Where exactly is the fold on mobile?

There is no single line. It moves with screen size, browser toolbars, notification bars, in-page banners and the text size a visitor may have changed in their settings. Rather than chasing a pixel height, open the page on a few real phones, including an older one, and check that the headline and the main button are visible before any scrolling.

Should the enquiry form sit above the fold?

Only when the visitor already knows what they want, as with branded search or a returning customer. For an unfamiliar service, a form at the top asks for commitment before you have given a reason to commit. A short promise with a button that jumps to the form usually works better than the form competing with the message.

Related terms

Found this useful?

Share it, or ask an AI to summarise it

Back to the glossary

Knowing the term is the easy part

Applying it to your own site and budget is the work. Book a call and I will tell you what actually applies to you.