Landing Pages

Above the fold design priorities

A priority order for the most expensive 600 pixels on your site.

6 min read Updated April 29, 2026

The first 600 pixels of your landing page get more attention than the rest of the site combined. Most teams fill that real estate with whatever the design template suggested, then wonder why conversion stalls. Here's a priority order for what belongs above the fold — and what to push down.

Why the fold still matters

"The fold is dead" is the lazy take. The fold is alive and it costs you. Roughly half of visitors never scroll past the first viewport, and the half who do scroll only do so when something above the fold has earned them. The first viewport isn't where you sell — it's where you earn the right to keep talking.

That changes the design problem. You're not trying to fit the entire offer into 600 pixels. You're trying to fit five things that, together, make scrolling feel worth it.

The five elements that earn the fold

Every above-the-fold element should answer a specific question the visitor is asking. The five questions, in priority order:

What is this? — answered by the headline.
For whom, and what changes? — answered by the subhead.
Is it real? — answered by a hero visual that shows the product or outcome.
Should I trust this? — answered by one piece of social proof.
What do I do next? — answered by the primary CTA.

If your hero doesn't answer those five questions in the first second of scanning, no amount of below-the-fold polish will save the page. Hero section copy formulas covers how to write the first two; the rest is design.

What to cut from above the fold

Most teams add to the hero. The harder discipline is cutting from it. The list of things that almost never earn their above-the-fold pixels:

Generic stock photography. If the photo could illustrate any product in your category, it adds zero clarity and pushes everything else down.
Three CTAs of equal weight. Multiple primary actions split attention and cut conversion. One primary, one quiet secondary at most.
Sub-subheads. A headline, a subhead, and a third explanatory line is one too many. The third line belongs below.
Long lists of feature bullets. Bullets are valuable, but not in the hero. Use them to set up a deeper section once you've earned the scroll.
Autoplay video with sound. Trust killer, conversion killer, and an instant bounce trigger on shared devices.
Promotional banners. A "20% off launch sale" bar at the top eats the fold without doing the hero's job.

The rule: every element above the fold either answers one of the five questions or it's competing with the elements that do.

Designing the hero visual

The hero visual does work or it pushes the CTA off the fold for nothing. The strongest visuals show one of three things: the product mid-use (a screenshot or interface clip), the outcome of the product (a result on someone's screen, a finished page, a happy account), or the user holding the result (a person with the thing they just made).

What underperforms: lifestyle photos with no connection to the product, abstract gradient backgrounds with no figure, illustrations that look like every other SaaS site this year. If you can swap the visual onto a competitor's page and nothing breaks, the visual is generic — replace it.

The fold is shorter on mobile

On a phone the "above the fold" area is closer to 400 pixels of vertical space, which is about a third of what desktop offers. That changes the design math. The headline has to be tighter. The subhead has to fit two lines max. The hero visual either gets stacked below the text or replaced with a smaller graphic. The CTA must be visible without scrolling.

Test the hero on a real phone, not in a browser dev-tools simulation. Real devices have notches, address bars, and one-handed reach problems that desktop sims hide. Mobile landing page optimization covers the full pattern set.

Ordering the elements on the page

A working priority order, top to bottom, on the first viewport:

Headline. Largest type on the page. Bold weight. Eight words or fewer.
Subhead. Medium type. One or two lines. For whom and what changes.
Primary CTA. The brightest thing on screen. Verb-first. Button design covered here.
Secondary CTA (optional). Quieter — text link or ghost button. "See how it works" or "Watch a 90-second demo."
Proof element. Logo strip, star rating, or named-customer caption.
Hero visual. To the right on desktop, stacked above or below text on mobile.

This isn't a template. It's a priority order. If you cut something, cut from the bottom of the list, not the top. Landing page best practices walks through how this fits the rest of the page.

The fold rule: answer five questions in the first viewport — what, for whom, is it real, can I trust it, what's next. Anything that doesn't help answer those five questions is competing with the elements that do. Cut without mercy.

Frequently asked

Is the fold really still a thing on modern devices?

Yes, just at varying heights. Desktop laptops show roughly 600-700 pixels before scroll; phones show closer to 400. The exact pixel count matters less than the principle: the first viewport gets disproportionate attention and decides whether the visitor scrolls.

Should the entire offer fit above the fold?

No, and trying to fit it usually backfires. The fold's job is to earn the scroll, not close the deal. Five clear elements — headline, subhead, CTA, proof, visual — beat ten cramped elements every time.

Where does the navigation bar fit into the fold?

Above it, taking as little vertical space as you can manage. A 60-pixel nav is fine; a 120-pixel nav with announcement bar and three rows of links is eating the fold. Consider hiding the nav entirely on dedicated landing pages where you don't want visitors clicking out.

Can I put the form above the fold?

On short-form lead-magnet pages, yes — the form is the offer. On longer pages where the visitor needs context first, the form usually belongs below the explanation. Test it; the answer depends on traffic source and offer complexity.

How do I know if my fold is working?

Two metrics: scroll depth (what percentage of visitors get past the first viewport) and time-to-first-scroll. If most visitors bounce without scrolling, the fold isn't earning its job. Heatmaps and session recordings show the rest.