Most visitors decide whether to stay or leave based on the first screen they see, before they scroll. If your above-the-fold area does not answer one silent question, “Am I in the right place?”, people leave. This article shows you how to design that first screen so it earns the scroll: what to put in it, what to cut, and the mistakes that quietly cost you readers.
What the first screen actually has to do
Above-the-fold is not a fixed pixel height anymore. On a phone it might be 700px tall; on a wide monitor, 1080px. So stop thinking in exact pixels and think in jobs. The first screen has three jobs, in order:
- Confirm relevance: this page is about the thing the visitor came for.
- Show the payoff: what they get if they keep reading or act.
- Offer a next move: scroll, click, or read on, with zero confusion.
If the first screen does those three things, the rest of the page gets a chance. If it does not, nothing below matters.
Why relevance beats cleverness
A clever headline that hides the topic feels smart to the writer and confusing to the reader. Someone who searched “invoice software for freelancers” should see those exact concepts near the top. This is the same principle Nielsen Norman Group has long described as information scent: people follow words that match their goal. Weak scent, and they backtrack, which usually means closing the tab.
The four elements worth fighting for
You do not have unlimited attention in that space. Prioritize these four:
- A clear headline that names the outcome or the topic in plain words.
- A one-line subhead that adds the how or the who-it-is-for.
- One visual anchor: a product shot, a short demo, or a simple illustration that shows the thing.
- A single primary action, styled so it is obviously the main button.
Everything else, awards, long menus, social icons, secondary offers, competes with these four and usually loses you clarity.
One primary action, not five
When the first screen has a sign-up button, a “watch video” link, a chat bubble, and a newsletter box all shouting at once, the visitor picks nothing. Choose the one action you most want and make it visually dominant. Secondary actions can exist, but they should look secondary: quieter color, less weight, smaller size.
A real scenario
A small accounting-tools site had a hero that read “Financial clarity, finally.” It looked elegant and said nothing. Bounce on paid traffic was high. They changed the headline to “Bookkeeping software built for solo consultants,” added a subhead “Track expenses, send invoices, and see your tax estimate in one place,” and kept a single “Start free” button. Same colors, same layout grid. The change was purely about naming the topic and the payoff on the first screen. Time-on-page and scroll depth improved because the right people now knew, in two seconds, that they were in the right place, and the wrong people left faster, which is also a win because they were never going to buy.
Common mistakes and how to fix them
Mistake: a headline about your company, not the reader
“We are a modern platform” tells the visitor nothing about their problem. Fix: rewrite the headline around the reader’s outcome or the concrete thing you offer.
Mistake: a giant hero image that pushes content off-screen
Full-height background photos look impressive and delay the actual message, especially on laptops with short viewports. Fix: let the headline and action sit inside the first screen without scrolling. Test on a 13-inch laptop, not just your big monitor.
Mistake: slow-loading hero media
A heavy video or uncompressed image means the first screen is blank while people wait. Fix: compress assets, set an image or poster frame that renders instantly, and never make the core message depend on a script that loads late.
Mistake: false scent from ads
If an ad promises a discount and the first screen never mentions it, trust drops immediately. Fix: echo the ad’s exact promise in the headline or subhead.
Action checklist
- Read your first screen for two seconds, then look away. Can you say what the page offers and who it is for?
- Confirm the headline names the outcome or topic in plain language.
- Reduce the first screen to one primary action; demote the rest.
- Test the viewport on a small laptop and a phone, not only your desktop.
- Check load speed of the hero image or video; compress anything heavy.
- If traffic comes from ads, match the ad’s promise in the headline.
Conclusion and next step
The first screen is a filter, not a decoration. Its job is to confirm relevance, show the payoff, and offer one clear move. Your next step: open your most important page on a phone and a small laptop, and cut anything on the first screen that does not help a stranger answer “Am I in the right place?” in two seconds.
FAQ
Is above-the-fold still relevant now that everyone scrolls?
Yes. People scroll only after the first screen convinces them the page is worth their time. It sets whether the scroll happens at all.
How tall should I assume the first screen is?
There is no single number because it varies by device. Design for the smaller viewports first, commonly a phone and a 13-inch laptop, so your core message fits without scrolling on the constrained cases.
Can I have more than one button in the hero?
You can, but only one should look primary. A quiet secondary action is fine; two equally loud buttons split attention and reduce clicks on both.
Should the headline include keywords for SEO?
Use the words your audience actually uses, which usually overlaps with search terms. Write for the human first; natural keyword match tends to follow.
References
- Nielsen Norman Group (nngroup.com) for research on information scent and page scanning behavior.
- Google web.dev for guidance on image and media performance affecting first render.