Above the fold: what to place on a landing page's first screen?

Inherited from print — the top half of the folded newspaper, visible on the newsstand — the fold on the web marks the lower edge of what a visitor sees without scrolling. Its death has been announced regularly: screens have multiplied, scrolling has become a reflex, and it's true that no pixel has a guaranteed position across devices. But the principle hasn't moved: 100% of visitors see the first screen, and each following screen is seen only by those the previous one convinced to continue. On a landing page, where every visitor costs a paid click or SEO effort, that first screen is the most expensive real estate on the page.

What eye tracking says about first-screen attention

Eye-tracking research confirms how attention concentrates at the top of the page. A study by Djamasbi, Siegel and Tullis published in 2010 in the International Journal of Human-Computer Studies tracked participants' gaze on real web pages: fixations concentrate massively on the area visible without scrolling, and the pages rated most appealing combined a strong main image, little text and a clear visual hierarchy in that zone (study on Google Scholar). This doesn't mean nobody scrolls — most visitors do — but the decision to scroll is made above the fold, within seconds, on the strength of that first screen. It's the same initial-triage mechanism described in our article on time spent on a landing page.

The 5 elements of a landing page's first screen

1. The headline: the main promise, phrased from the visitor's point of view. It's the most-read element of the whole page — our full method is in the headline article.
2. The subheadline: one line specifying for whom and how. It turns a seductive promise into a credible one.
3. The main CTA: visible without scrolling, even though the visitor will often only click after reading further. Its presence announces the expected action — the phrasings that work are in our CTA examples.
4. One proof element: a rating, a customer count, a media logo — a single line of social proof is enough at this stage.
5. A visual that shows the offer: a product screenshot, a photo of the result, a preview of the document — not a decorative illustration that could accompany any offer.

And one anti-element: navigation. A full menu above the fold offers ten exits before the first argument — our article on landing page navigation details why removing or reducing it is almost always a win.

The "everything above the fold" trap

The opposite conclusion would be to cram everything into the first screen: promise, benefits, testimonials, price, form. That's a symmetrical mistake. An overloaded first screen has no hierarchy left: the eye doesn't know where to land, and the study cited above shows precisely that users' favourite pages have a simple first screen. The first screen has exactly one job: making people scroll — creating the desire to read the next argument. The sale itself happens across the whole page, in the order laid out in our anatomy of a landing page that converts. One exception: very simple, quick-decision offers (a newsletter, a lead magnet), where first screen and form can merge — see short pages.

One fold per device

There isn't one fold but dozens: a laptop displays twice as much content as a phone held in one hand. Since most landing page traffic is mobile, the practical rule is to design the first screen for mobile first: if headline, subheadline, CTA and one line of proof fit on a phone screen, they'll fit everywhere. Also watch the elements that eat this zone on mobile — cookie banner, app bar, entry pop-up: our articles on mobile-first design and the cookie banner show how to limit the damage. Finally, check the real rendering: what an iPhone SE shows is not what your 27-inch designer monitor shows.

How to check your first screen is doing its job

• The 5-second test: show the first screen for five seconds to someone who doesn't know the offer, then ask what the page sells and to whom. A vague answer = rework the headline — the full method is in our article on the 5-second test.
• Scroll depth: if a large share of visitors never gets past the first screen, the problem is above the fold, not below it.
• The heatmap: a heatmap shows whether eyes and clicks land where you expect — or on a decorative, unclickable element.
• A/B testing the headline: it's the first-screen element with the best effort-to-impact ratio — start there, method in our A/B testing guide.

LanderKit templates apply this discipline out of the box: a first screen that fits on mobile with headline, subheadline, CTA and social proof, zero escape menu, and the rest of the argument structured to reward the scroll.