Above the fold

On a newspaper the fold was a fixed line. On the web it is not: the visible area depends on the device, the browser window, toolbars and zoom settings, so the fold on a large monitor and on a small phone are in very different places. The idea is still useful, as long as it means the first screen on the devices your visitors actually use rather than a single line.

It is often misread as a rule to cram everything into the first screen. People do scroll, especially when the first screen tells them clearly that the rest of the page is worth reading.

How it works

Designers check analytics for the most common screen sizes, then look at what each shows on first load. The first screen should establish what the business is, who it is for and what to do next, usually in a hero section with a headline, a short supporting line and a call to action. Everything else can follow, as long as the first screen invites scrolling instead of looking like a finished page.

The first screen also affects speed. Core Web Vitals measure how quickly the largest visible element appears, so the first screen should not depend on a heavy video or slider to show anything.

To see your own first screen as visitors do, check analytics for the most common screen sizes, then view the page at those sizes in the browser's device mode and on real phones. Note what is visible before any scrolling: does it say what you do, where, and what to do next? Remember that browser toolbars, cookie banners and chat widgets take space too, and on some phones a consent banner covers a large part of the first screen.

Example

A dentist's home page opens with a full-screen slider of rotating stock photos. On a phone, the first screen shows only the slider and a menu icon, with no mention of the clinic's location, treatments or booking. The redesign replaces the slider with one real photo of the clinic, a headline naming the town and main treatments, the review rating and a Book an appointment button, all visible on a typical phone without scrolling.

One more element was taking the first screen: the cookie notice, which covered the lower third of the screen on phones until dismissed. It is redesigned as a slimmer bar at the bottom that still offers clear accept and reject options, so the headline and button stay visible. The clinic then checks the result on a small, older phone as well as a recent large one, since the visible area differs considerably between them.

Why it matters for your business

The first screen is where visitors decide whether they are in the right place, and many leave if it does not answer that quickly. Getting it right means paid and search traffic lands on a page that makes sense immediately. It also matters for speed, since loading metrics are measured on what appears first. Do not over-correct, though: stuffing every offer, badge and form into the first screen makes it harder to read and pushes the real message out.

Common mistakes

• Designing the first screen only for a large desktop monitor.
• Using a slider whose most important slide is rarely seen.
• Packing so much into the first screen that nothing stands out.
• Loading a heavy background video that delays the visible content.

Questions people ask

Where is the fold on a website?

There is no single fold. It is wherever the bottom of the screen falls when a page first loads, which varies by device, browser and window size. On a phone it may be only a short way down the page; on a desktop monitor much further. Check your analytics for the screen sizes visitors use and design for those.

Should my call to action be above the fold?

On most pages, a clear primary action should appear on the first screen so that ready visitors can act immediately. On longer pages for considered purchases, repeat the action further down after the explanation and proof. What matters is that the action is easy to find whenever a visitor decides to take it.

Do people scroll below the fold?

Yes, people scroll routinely, especially on phones where scrolling is natural. They scroll further when the first screen signals that the page is relevant and that more useful content follows. The fold matters because it shapes that first impression, not because content below it goes unseen.