Above the fold is the part of a web page a visitor sees before they scroll. The phrase comes from broadsheet newspapers, where the stories on the top half of the folded front page were the ones that sold the paper on the stand. On a website, the fold is the bottom edge of the browser window when the page first loads.
How above the fold works
There is no single fold. Someone on a 13-inch laptop, someone on a large desktop monitor and someone on a small phone each see a different slice of the same page, and a phone turned sideways sees less again. Browser toolbars, zoom settings and the phone’s own text size move it further. So when people say above the fold, they mean the first screen on the devices your visitors actually use, not a fixed pixel line.
That first screen usually holds the hero section: a headline, a supporting line, perhaps an image and a button, with the navigation and any notices sitting on top. Everything further down is below the fold, which only means the visitor has to choose to scroll to reach it.
People do scroll, and long pages work well when the top gives them a reason to carry on. The first screen does not need to hold everything. It is where the visitor decides whether this page is the right one.
Why it matters
Someone arriving from a Google search or an ad makes a fast judgement: is this what I was looking for, and is it meant for someone like me? If the first screen answers both and shows what to do next, they keep reading. If it shows a stock photo, a vague slogan and a rotating slider, many go straight back to the results.
UK sites have an extra layer. PECR requires consent for non-essential cookies, so most sites show a cookie banner on a first visit. On a phone that banner can cover a large part of the screen, which means a new visitor’s real first view is your page plus the banner. The key message and the next action need to be visible while the banner is still showing. Designers often check pages with the banner already dismissed and never see this.
For paid traffic the cost is direct. You pay for the click whether or not the first screen does its job, so a weak opening wastes budget on every visit.
Common mistakes
- Judging the page on a large monitor. A designer’s wide screen shows far more than a visitor on a phone sees. Check the mobile view first.
- A headline that says nothing. “Welcome to our website” or “Excellence in every detail” spends the most valuable space on the page without telling anyone what you do.
- Sliders and carousels. The first slide gets seen and the rest mostly do not, while the movement pulls attention from the message.
- Cramming everything in. A form, three offers, a phone number and a row of badges squeezed into one screen are harder to read, not more persuasive.
- A heavy hero image. The hero image is often the largest element on the page, so it usually decides Largest Contentful Paint. A slow one delays the very content the visitor came for.
- Letting the banner hide the button. A cookie notice pinned to the bottom of a phone screen can sit right over the main call to action.
How to act on it
Open your main landing pages on your own phone in a private browsing window, so the cookie banner appears as it would for a new visitor. Without scrolling, can you tell what the page offers, who it is for, why it is worth their time and what to do next? If any of those four is missing, rewrite the headline and the line beneath it before changing the design.
Then look at behaviour. A scroll map shows how far down people get. If most visitors leave without scrolling at all, the first screen is not persuading them to stay. Put one clear action in that first screen and repeat it lower down for people who need more detail first.
When a page exists to turn ad clicks into enquiries, the first screen is a large share of the work. When I build landing pages for Google Ads and Facebook campaigns, I write the opening to match the ad, check it with the consent banner showing, and keep it light enough to load quickly on a mobile connection.