Quick answer: “Above the fold” is the part of a web page visible before a visitor scrolls. On a homepage it should answer three questions within a few seconds: what you offer, who it is for, and what to do next. That usually means a clear headline, one short supporting sentence, a single main call to action, a relevant image and a small trust signal such as reviews or client logos. You do not need to fit everything on the first screen. People scroll when the top of the page gives them a reason to.
Where the term comes from
The phrase comes from newspapers. Papers were folded in half on the newsstand, so the stories printed on the top half were the ones passers-by could see. Editors put the biggest headline there to sell the paper.
On websites, the “fold” is the bottom edge of the browser window when the page first loads. Everything above it is seen by every visitor. Everything below it is seen only by those who scroll.
There is no single fold
Unlike a newspaper, a website has no fixed fold. It depends on:
- Screen size, from small phones to large desktop monitors
- Browser window size and toolbars
- Zoom settings
- Phone orientation
A layout that fits neatly on a large laptop screen may show only a headline on a phone. So instead of designing for an exact pixel line, design so that the most important message appears first on every common screen size. Check your analytics for the screen resolutions your visitors actually use and test on real devices.
Do people scroll?
Yes. Long pages are normal on the web, and scrolling on phones is second nature. Usability research has shown for years that people do scroll, but they give the top of the page much more attention than what follows. If the first screen is confusing or dull, many leave before they scroll.
So the job of the area above the fold is not to hold everything. It is to make the visitor confident they are in the right place and curious enough to keep going. Heatmaps and scroll maps on your own site will show how far people get. Our guide to heatmaps explains how to read them.
What belongs above the fold
1. A clear headline
The headline should say what you do in plain words. “Bookkeeping for small construction firms” tells a visitor far more than “Building your future together”.
Test it with a stranger. If they cannot tell you what the business does after five seconds, rewrite it. Our article on value propositions covers how to find the right message.
2. A short supporting line
One or two sentences that add detail: who you serve, where, or the main benefit. For example: “Monthly books, payroll and tax-ready reports for contractors in the Denver area. Fixed fees, no surprises.”
3. One main call to action
Give visitors one obvious next step, shown as a button with specific text:
- “Get a free quote”
- “Book a consultation”
- “See pricing”
- “Shop new arrivals”
A second, softer option such as “See how it works” is fine, but make the main button stand out. Several equally weighted buttons make people hesitate.
4. A relevant image
Show your product, your work, your team or your customers. A real photo of a finished kitchen helps a kitchen fitter far more than a stock image of a smiling businessman. Make sure the image supports the headline rather than competing with it.
Some sites use video backgrounds here. They can work but come with costs, which we cover in our guide to video backgrounds.
5. A quick trust signal
A small amount of proof near the top reassures people:
- Star rating and number of reviews
- Logos of well-known clients, if you have permission to show them
- Years in business or accreditations
- A short testimonial
Keep it brief. A full wall of logos belongs further down.
6. Simple navigation
Visitors who are not ready for your main call to action need to find their way around. Keep the menu short and clear. On phones, a menu icon is standard, but make sure your phone number or main action stays visible. Our article on hamburger menus discusses the trade-offs.
What to leave out
The space above the fold is limited, so remove anything that does not help visitors decide:
- Rotating sliders. Carousels split attention, and most visitors only see the first slide. One strong message beats five rotating ones.
- Welcome text. “Welcome to our website” wastes the most valuable space on the page.
- Big pop-ups on arrival. They hide the message before people read it, and Google has penalised intrusive mobile pop-ups since 2017.
- Several competing buttons. Pick one main action.
- Large logos and tall headers. A header that takes half the screen pushes your message out of view, especially on phones.
- Long paragraphs. Save detail for later sections.
Above the fold on mobile
On a phone, the first screen may only hold your logo, a headline, a line of text and a button. That is fine if they are the right ones.
Checklist for mobile:
- The headline is readable without zooming
- The main button is visible without scrolling, or very close to it
- The header is slim
- Tap-to-call is available for service businesses
- Images are cropped so the subject is still clear
- Nothing covers the content on arrival
Above the fold on other pages
The same thinking applies beyond the homepage:
- Service pages: name the service, the main benefit and how to enquire.
- Product pages: product name, price, image, key details and the add to cart button.
- Landing pages: a headline that matches the ad or link that brought people there, and one call to action. See our landing page optimization guide.
- Blog posts: the title and the opening that tells readers they will get the answer they came for.
Guide visitors below the fold
Once the top of the page has done its job, help people continue:
- Leave a hint of the next section visible so the page does not look finished
- Use visual cues, such as arrows or a person looking towards the content. Our article on directional cues explains how these work.
- Repeat the call to action further down the page for people who scroll
Below the fold is where you add detail: services, process, testimonials, pricing, FAQs and a final call to action. Our guide to homepage conversion covers the full page structure.
Speed matters too
The content above the fold should load first and fast. If visitors stare at a blank screen while large images or scripts load, they leave. Load the hero content first, keep the main image compressed and delay scripts that are not needed straight away.
How to test your above the fold area
- Five second test. Show the page to someone for five seconds, then ask what the business does and what they would click.
- Check on real devices. Look at your page on a small phone, a large phone, a tablet and a laptop.
- Review analytics and heatmaps. Look at clicks on the main button and how far people scroll.
- A/B test one change at a time, such as the headline or the button text. See our guide to A/B testing.
- Watch real users. Our article on user testing shows how to run simple sessions.
FAQ
Does everything important need to be above the fold?
No. The most important message and next step should be, but detail and proof can follow below. People scroll when the start of the page is clear.
How tall should the hero section be?
Tall enough to show the headline, supporting line and button on common screens, and not so tall that it hides everything else. Full screen heroes often push the message too low on phones.
Should the phone number be above the fold?
For service businesses that take calls, yes, especially on mobile.
Make the first screen count
The top of the page is where visitors decide whether to stay. Say clearly what you do, give one obvious next step and add a little proof, then let the rest of the page do the detailed work. If you want a homepage built to turn more visitors into leads, see our Turn visitors into customers service.
