Above the fold

Above the fold means everything a visitor can see before they scroll. The phrase comes from newspapers, where the important stories went on the top half of the folded front page. On a website there is no physical fold, but there is a first screen, and the amount of attention it receives compared with everything below it has not changed much in thirty years.

In short

• It is whatever appears before the visitor scrolls.
• On a phone that space is small, and often smaller than the designer thinks.
• Its job is to confirm the visitor is in the right place, not to say everything.
• Cookie banners and large images eat it, usually without anybody checking.

Why the first screen still matters

People do scroll, and the old advice that nothing below the fold gets read was never quite true. What is true is that attention is heavily weighted towards the top and thins out steadily as the page goes on.

That makes the first screen a filter rather than a container. A visitor arriving from a search or an advert spends a moment deciding whether this page is about the thing they wanted. If the answer is not obvious in that moment, they go back to the results and try the next one. Nothing further down gets a chance to change their mind.

What the space has to do

Three jobs, and they fit more comfortably than people expect once the decoration comes out.

• Confirm the subject. A headline in the words the visitor was thinking in, not the words your brochure uses.
• Say who you are and where. For a local business the location is part of the confirmation, because half the visitor’s question is whether you are near enough.
• Show the way forward. One clear action, plus the sense that useful detail continues below.

Anything beyond those three is competing with them. That is usually where the rotating slideshow and the stock photograph of a handshake come in.

How the space disappears

Most first screens are smaller in practice than they were in the design file, and the reasons are consistent.

A cookie banner can take a third of a phone screen. A sticky header takes another slice. A full-width photograph, sized to look impressive on a laptop, pushes everything else out of view entirely on a handset. Add the browser address bar and a promotional strip announcing a holiday that has passed, and the headline is now below the fold on the page whose whole job was to state it.

None of this is visible from a desktop. It is only visible on a phone, in a private window, with the banner showing, which is a thirty-second check that almost nobody performs.

Designing for a line that moves

There is no single fold, which frustrates people who want a pixel measurement. Screen sizes vary, browser chrome varies, and the address bar hides and returns as the visitor scrolls.

The workable response is to stop treating it as a line. Order the page so that importance decreases steadily from the top, and make sure the first screen on the smallest common phone still does the three jobs above. Then check the same page on a laptop, where the extra room should feel deliberate rather than empty.

A useful habit is to design the phone version first and let the larger screens inherit from it. Doing it the other way round is how a page ends up with a headline that only fits on a desktop.

The technical side of the same space

The first screen is also where Google’s loading measurement is taken, and where layout shift usually starts, which gives the area a second reason to be handled carefully.

The largest thing that loads in that first screen sets your largest contentful paint, so an uncompressed hero photograph is both a design problem and a speed problem. Content that jumps as fonts and banners arrive produces layout shift, which is measured and counted against you. Both are covered under technical SEO, and both are decided by choices that look purely visual when they are made.

What belongs below it

Treating the fold as a filter rather than a container settles most arguments about what goes where.

The first screen earns the scroll. Everything that persuades, explains, proves and reassures can then follow in whatever order makes sense, because the visitor has already decided to keep reading. Detail, photographs of real work, reviews, the answers to the objections people raise, the map: all of it works better below, where there is room to do it properly.

The mistake is compressing that material upwards until the first screen is a dense block nobody reads. The white space that gets removed to make room was the thing telling a visitor where to look. A crowded first screen fails at the one job it had.

The test that settles arguments about it

Designers and owners disagree about the first screen more than about anything else on a website, and the disagreement is usually about taste. There is a way to make it about something else.

Hand your phone to somebody who does not know the business, open the page, and do not let them scroll. Give them five seconds. Then ask what the company does, roughly where it is, and what they would do next. Whatever they cannot answer is missing from that first screen, whatever the design file says.

Run it on the page your adverts point at as well, which is often a different page and often worse. When the answers do not come, the fix is nearly always removal rather than addition. What a page should contain further down is a website question, and the version written for advertising traffic is a landing page one.