What "above the fold" actually means in 2025
Above the fold is everything a visitor sees before they scroll. The phrase comes from newspapers, where the most important story sat above the physical fold. On the web there is no single fold any more, because a phone, a laptop and a 27-inch monitor all show a different slice of your page. What matters is the first screenful on the device the visitor happens to be using.
Good above the fold design treats that first screen as a complete, self-contained pitch. Within a second or two a stranger should grasp what you offer, who it is for and what to do next. If they have to scroll to find out whether they are in the right place, a large share simply leave. Design the fold so scrolling is a reward for the curious, not a requirement for the confused.
The five elements every first screen needs
A converting hero is not a single hero image with a clever slogan. It is a small system of parts working together. When we build a homepage at Pro Digital Labs, we treat the fold as a checklist before we treat it as art. If one of these pieces is missing, the screen leaks visitors.
Keep each element doing one job. The headline says what you do, the sub-headline says who it helps and how, the call to action tells them the next step, and the proof reassures them you are real. Crowd two messages into one element and both get ignored.
- check_circleA clear headline that states the outcome or service, not a vague brand mood line
- check_circleA supporting sub-headline that adds the who, the where or the differentiator
- check_circleOne primary call to action button, visually dominant and unmissable
- check_circleA piece of proof: a real review, a recognisable logo, a guarantee or a credential
- check_circleA relevant visual that shows the product, the result or the people behind the service
Writing a headline that stops the bounce
Your headline is doing 80% of the work, so spend real time on it. The strongest headlines name the outcome the customer wants in plain language. "Same day courier across the West Midlands, collected within the hour" beats "Delivering excellence since 2015" every time, because the first one answers a question the visitor is actively asking.
Avoid clever wordplay that needs a second reading to decode. Clarity converts; cleverness usually just delays understanding. A useful test is the five-second test: show the screen to someone unfamiliar for five seconds, hide it, then ask what the company does. If they cannot tell you, the headline has failed regardless of how nice it looks.
Match the headline to the promise of the ad or search result that brought them. If someone clicked a Google result about restaurant websites, the fold should mention restaurant websites within the first line. This message match keeps the scent of the search alive and is one of the cheapest conversion wins available.
Making the call to action impossible to miss
The primary call to action should be the most visually prominent thing on the screen after the headline. Give it a colour that contrasts with everything around it, generous padding so it reads as a tappable button, and a label that describes the action and the value: "Get my free quote" works harder than "Submit".
Resist the urge to offer five equal choices in the hero. When everything is a priority, nothing is. Pick one main action, and if you must, give a quiet secondary option such as "See our work" as a plain text link beside it. On mobile, make sure the button sits inside the thumb zone and is at least 44 pixels tall so it is comfortable to press without zooming.
Proof belongs above the fold, not buried at the bottom
Trust is decided fast, often before a word of your body copy is read. A single line of social proof in the hero, a genuine star rating, a count of jobs completed, a client logo or a clear guarantee, lowers the perceived risk of carrying on. For a newer business with a thinner track record, a specific, honest promise such as "No call-out fee, fixed prices confirmed before we start" can do the same reassuring job.
Be honest with proof. Invented review counts and fake logos are easy to spot and corrosive once noticed. If you are early in your journey, lean on what is real: named relationships, sister companies, the founder's experience, or a money-back guarantee you genuinely honour. Real and modest beats impressive and fabricated, both ethically and for long-term trust.
Speed and the visual: the fold has to load fast
A beautifully designed fold that takes four seconds to appear has already lost. The first screen is also your Largest Contentful Paint in most layouts, the metric Google uses to judge loading speed, so it is worth optimising hard. Compress and correctly size the hero image, serve it in a modern format such as WebP, and avoid huge background videos that block rendering on slower phones.
Be careful with full-screen hero forms on mobile. A common mistake is a tall enquiry form that pushes the headline and any photo off-screen, so the visitor lands on a wall of input fields with no context. Lead with the message and a single button that reveals or scrolls to the form. Context first, commitment second.
Common above the fold mistakes that cost conversions
Most underperforming hero sections fail for the same handful of reasons. Knowing them in advance saves a redesign later. We see these on the majority of sites we audit, regardless of industry or budget.
Fix these before you touch anything more advanced. They are the cheapest, highest-impact changes you can make to a homepage, and they often lift conversions more than a full visual redesign would.
- check_circleA slider or carousel that rotates messages so fast no single one registers
- check_circleA headline about the company's history rather than the customer's problem
- check_circleNo phone number or location for a local service business that depends on calls
- check_circleA hero image of an empty office or a stock handshake that says nothing specific
- check_circleTwo or three competing buttons with equal weight and no clear primary action
- check_circleA cookie banner or chat bubble that covers the call to action on mobile
Testing and iterating the first screen
Treat your fold as a living thing, not a finished painting. Once it is live, watch real behaviour. A heatmap tool shows where people click and how far they scroll; if most visitors never reach your second section, your fold either answered everything or failed to earn the scroll. Analytics will show your bounce rate and the share of sessions that take a meaningful action.
Change one element at a time so you know what moved the needle. Swap the headline for a fortnight, then the button label, then the proof element. Small, deliberate tests compound into a fold that quietly outperforms the original by a wide margin. The goal is never a perfect first draft; it is a screen that keeps getting a little sharper every month.
Frequently asked questions
Is the fold still relevant now that everyone scrolls?expand_more
Yes. People do scroll, but only once they have a reason to. The first screen is where they decide whether the page deserves their attention. Get it right and you earn the scroll; get it wrong and the rest of your carefully written page is never seen.
Should I put a contact form in the hero?expand_more
On desktop a short form can work well if the page is built around enquiries. On mobile, lead with your headline, a clear value statement and one button, then reveal or scroll to the form. A tall form that buries your message is one of the most common conversion killers we fix.
How long should my hero headline be?expand_more
Aim for one clear line, roughly six to twelve words, that names the service and the benefit. If you need more, add a short sub-headline beneath it rather than stretching the main line. Clarity matters far more than length, so cut any word that is not pulling its weight.
What if my business is new and has no reviews yet?expand_more
Use honest proof instead of inventing it. A clear guarantee, the founder's relevant experience, named sister businesses or a transparent fixed-price promise all reduce perceived risk. Fake review counts and stock logos are easy to spot and damage trust the moment a visitor doubts them.