Above The Fold: What Viewers See Before Scrolling

Above the fold is everything a visitor sees before they scroll, and on most screens that is less room than designers assume. Treat it as a fixed budget you have to spend. The layout question is not what could fit but what has earned a place in that first screen.

A strong fold answers three things fast: what this is, who it is for, and what to do next. If a visitor has to hunt for any of those, the page is asking for work before it has offered value. Most people decline that trade silently by leaving.

The fold is also the only part of the page every visitor sees. Someone who bounces in the first second never reaches your testimonials or pricing, no matter how good they are. That is why small improvements up top tend to move the whole page.

A fold that tries to say everything ends up saying nothing at the exact moment attention is most expensive.

The elements worth the space

Almost every high-performing fold contains the same small set of parts. A headline that names the outcome, a subheadline that handles the first doubt, one clear action, and a visual that supports the claim rather than decorating it. The order shifts with the audience, but the set rarely does.

Leaving one of these out usually costs more than adding one in. A fold with a headline and button but no subheadline leaves the reader to guess who the offer is for. A fold with visuals and no action looks like a portfolio, not an offer.

A thin strip of proof, such as a customer count or a recognized logo, earns its place when it is real. If the proof is thin or borrowed, it does more harm than good, and the fold is better off with one fewer element.

Height is a moving target

The old rule of 600 pixels came from desktop monitors few people still use. On a phone, the fold can be as short as 400 pixels once the browser chrome loads. Design for the smallest realistic screen and let larger ones breathe.

This is why fixed-height hero sections with absolutely positioned content break so often. The text overlaps the visual on one device and floats in a sea of empty space on another. Flow-based layout that stacks on small screens survives the range.

Check the fold on a real device, not a design-tool preview that hides the chrome. What you can read there without scrolling is your true above the fold, and it is often smaller than the mockup suggested.

What to push below the fold

Features, pricing tables, long testimonials, and FAQs are all fine, just not in the first screen. They reward a reader who has already decided to care. Putting them above the fold crowds out the headline and hands a cold visitor a wall of detail to ignore.

The instinct to front-load every benefit is understandable and usually wrong. The fold is a door, not a room. Its only job is to get the right person to step through it and start reading.

Ask a few people to describe what the page offers after five seconds with it. If their answers diverge, the fold is unclear. If they all say the same specific thing, you have spent the budget well.

Keep the fold honest to the page

Whatever the fold promises, the next screen has to deliver. A headline about speed followed by a slow, dense paragraph breaks the spell immediately. The first scroll should feel like the fold kept its word.

This is why it helps to design the fold and the section just below it together. The transition from promise to proof is the moment trust is either confirmed or quietly lost, and it deserves the same care as the headline itself.

A fold is judged in seconds, but the decision to stay is made over the first two screens. Meeting the promise quickly is what turns a quick glance into a genuine read.

Key takeaways

• Treat the fold as a budget and make every element justify its place.
• Answer what it is, who it is for, and what to do next in one screen.
• Design for the shortest realistic phone height, then let larger screens breathe.
• Verify the fold on a real device and keep the next screen honest to the promise.