Landing Pages

Above the Fold Explained

What above the fold means on websites and phones, what visitors need to see first, and how to plan a first screen without cramming everything into it.

On this page
  1. Where the phrase comes from
  2. Why the first screen matters
  3. What belongs on the first screen
  4. What to leave out
  5. Phones change the picture
  6. Do people really scroll?
  7. Load speed counts too
  8. A simple way to check your page

Where the phrase comes from

“Above the fold” is a term borrowed from newspapers. Papers were displayed folded in half, so the story and headline on the top half were what passers-by saw first. On a website, the phrase means the part of the page that is visible before a visitor scrolls.

There is one awkward fact: there is no single fold on the web. The visible area depends on screen size, browser window, device orientation and whether toolbars are showing. A laptop, a tablet and a phone all show different amounts. So the useful question is not “where is the fold?” but “what does a visitor see first on the devices my audience uses?”

Why the first screen matters

Visitors usually decide quickly whether a page is relevant to them. The first screen is where they check: am I in the right place, and is this for me? If the answer is unclear, many will leave without scrolling.

That does not mean nothing below matters. People do scroll when the top of the page gives them a reason to keep going. The first screen’s job is to earn that continued attention, not to contain everything.

What belongs on the first screen

For a landing page with one goal, a few elements do most of the work.

A clear headline. It should say what the offer is or what the visitor gets, in plain words. If the visitor came from an advert, the headline should echo it, which is the idea behind message match. Techniques from headline writing apply here.

A supporting line. One or two short sentences that add the detail the headline cannot hold: who it is for, what is included or how it works.

The main action. A button or short form with a specific label. Making the call to action visible on arrival means that someone ready to act does not have to search.

A relevant image or visual. Use something that explains the offer, such as the product, the service in use or the result. A generic picture that could belong to any business adds little.

A small signal of credibility. A genuine customer comment, a recognisable accreditation you really hold, or a visible contact detail can reassure visitors early. These must be real; see trust signals.

Orientation. A logo so people know whose page it is. Beyond that, a stripped-back header often helps a single-goal page by reducing the choices.

What to leave out

The first screen is not a place to put every selling point. Common problems include:

  • Large decorative sliders or banners that push the headline down.
  • A cookie notice, pop-up and chat widget all appearing at once, covering the content.
  • Long paragraphs of introductory text before the point.
  • Several competing buttons with equal weight.
  • A huge image that fills the screen and moves the headline and action out of sight.

If a visitor has to guess what to do next, the first screen is not yet doing its job.

Phones change the picture

Many visitors will see your page on a small screen, where the first view is far shorter than on a computer. A layout that looks balanced on a laptop may show only a logo and a large picture on a phone. Check your page on real devices, not only a resized desktop window, and treat mobile optimization as part of the design, not a final tweak.

On a phone, the headline and a short supporting line may take most of the first view. That is acceptable if the action is easy to find as soon as the visitor scrolls a little, or if a clear button is available near the top.

Do people really scroll?

Yes, in many situations. It is a common misconception that everything important must be crammed above the fold. What helps is a visible cue that more content exists: a partial section peeking into view, a clear heading or a short line inviting the visitor to keep reading. Whether a long page suits you depends on your offer, a point examined in the piece on landing page length.

Be cautious about universal claims here, because visitor behaviour differs between audiences, devices and offers. If the question matters to you, observe your own results, or use A/B testing if you have enough traffic for the comparison to be meaningful.

Load speed counts too

If the top of the page appears slowly, a visitor sees a blank screen no matter how good the design is. Heavy images and scripts are common culprits, so page speed is part of getting the first impression right.

A simple way to check your page

  1. Open the page on a phone and on a computer without scrolling.
  2. Cover the screen with your hand, then uncover it for five seconds.
  3. Write down what the page offered and what you were meant to do.
  4. Ask someone else to do the same and compare notes.

If the answers differ from what you intended, adjust the headline, simplify the layout or move the action into view. Small changes are easier to evaluate than a complete redesign, so alter one thing at a time and keep notes on what you changed.

The complete guide to landing pages

How to Plan a Landing Page That Does One Job
Read the guide

Keep exploring

Guides from other topics

All topics →