Above the Fold Design: What to Show in Your First Screen

"Above the fold" is a term borrowed from print newspapers — the content you could see without unfolding the paper. In web design, it refers to what's visible without scrolling. The concept is sound. The execution is harder than it sounds.

The complication in 2026 is that "above the fold" varies enormously by device. A 27-inch monitor at full resolution shows a radically different amount of content than a 375px iPhone 14 screen. Design a hero for one and you've potentially designed a failure for the other. Your visitors don't exist at a fixed screen size.

Despite this variability, the core design challenge remains constant: the first screen is where visitors decide whether to keep reading or leave. Most people who leave, leave from the first screen. What you put there — and what you keep off it — determines whether you hold attention long enough to make your case.

What "Above the Fold" Actually Means in 2026

Before designing the hero, it's worth being precise about what you're designing for.

On a 1920x1080 desktop monitor with a standard browser chrome, you have roughly 900-950px of visible viewport height. On a 1440x900 laptop (extremely common for knowledge workers), you have around 800px. On a 14-inch MacBook Pro at its native resolution, you might have 700px of viewport after the browser and OS chrome.

On mobile, you have approximately 650-750px on modern iPhones, accounting for the browser address bar. Android varies even more.

What this means practically: there is no single "above the fold" boundary. You're designing for a range of approximately 650px (mobile) to 950px (large desktop). A hero that works at 950px will often not work at 650px.

The design implication: design the hero for the smallest common viewport first (around 700px on mobile), then enhance for larger screens. Content that needs to appear above the fold must fit in 650-700px of height on mobile — everything else is an enhancement, not a guarantee.

The Four Elements That Must Appear

Regardless of screen size, four things need to appear in your first screen without requiring a scroll. These aren't optional — their absence creates friction that costs conversions.

1. The Headline

The headline is the highest-leverage piece of content on your entire website. It's the first complete thought a visitor processes, and it determines whether they believe this page is worth their time.

The headline needs to communicate, at minimum:

• What the product does
• Who it's for (or what problem it solves)
• The scale or nature of the value

It does not need to be clever. Clever headlines sacrifice clarity for memorability, and clarity converts better than memorability at the top of the funnel. A visitor who immediately understands what you do will stay and read more. A visitor who smiles at a witty headline but can't immediately answer "what is this?" will leave.

"Reconcile revenue 3x faster — without spreadsheets" is a strong headline. "Financial clarity, finally." is not. Both might look good in a mockup. Only one tells visitors what they're looking at.

2. The Subheadline

The subheadline fills in what the headline couldn't cover at its required length. It typically names the product category more explicitly, adds a second dimension of specificity, or names the target customer more precisely.

If your headline is "Cut your customer onboarding from 3 weeks to 3 days," your subheadline might be: "An automated onboarding platform for B2B SaaS companies — configurable workflows, automated reminders, and a customer-facing progress portal."

Now the visitor knows: it's a SaaS platform, it's for B2B companies, and they can picture roughly what it does. The combination of headline and subheadline should leave visitors with a clear, accurate picture of the product's core value.

The subheadline should be visible and readable without requiring the visitor to squint or zoom. Common mistakes: making it too small, making it the same size as body text and therefore easy to skip, or using low-contrast gray text on a white background.

3. The Primary CTA

One call to action. Not two. Not three. Not a primary and secondary option with equal visual weight.

The CTA needs to be:

• Visible: High contrast, prominent button, not buried in a block of text
• Specific: "Start your free trial" beats "Get started." "Book a 20-minute demo" beats "Book a demo."
• Immediate: The button should respond to the question "what do I do now?" for a visitor who decides within the first 10 seconds that they want to move forward

If you have two actions you want visitors to take (sign up and book a demo), choose the primary action and make it the CTA. The secondary action can live elsewhere on the page — in the navigation, at the bottom, beside testimonials.

CTA placement: The CTA should be reachable without horizontal eye movement on desktop. It lives below the headline and subheadline, aligned to the same visual column. On mobile, it should be full-width or near-full-width, making it easy to tap.

4. A Trust Signal

Something in the first screen that reduces the visitor's skepticism — before they've scrolled.

Trust signals that work above the fold:

• Customer logos (if recognizable)
• A user count or review summary ("4.8/5 from 400 reviews on G2")
• Press mentions ("As seen in TechCrunch, Forbes")
• A single, very strong, specific testimonial from a named person at a named company
• Security certifications (SOC 2, GDPR) for products where security is a primary concern

Trust signals that don't work above the fold:

• Generic testimonials with no names ("Great product! — A happy customer")
• Awards from obscure organizations the visitor won't recognize
• Badges that require context to understand

The trust signal doesn't need to be large. It can be a simple logo strip, a five-star rating, or a one-line quote. Its job is to signal legitimacy in the first screen, giving visitors a reason to continue reading rather than bouncing.

What to Remove From Your Hero Section

Most hero sections have too much in them. Every element that isn't serving the four core requirements is potentially diluting them.

Navigation with too many links: A full site navigation with 8-10 items gives visitors 8-10 reasons to leave the landing page before converting. For landing pages specifically (not your main site homepage), consider removing navigation entirely or keeping only a logo and a single CTA. For marketing homepages, keep navigation but limit it to 4-5 high-value links.

Secondary CTAs with equal weight: Two buttons with equal size and color create a decision problem. Visitors who have to choose between "Start free trial" and "Watch a demo" often do neither. Make one primary (filled button) and one secondary (outlined or text link) if you must have both.

Long, dense copy blocks: The hero is not the place for three paragraphs explaining how the product works. That's what the rest of the page is for. The hero needs one clear sentence (the headline) and one supporting sentence (the subhead). Everything else pushes the CTA down and dilutes the message.

Unnecessary decorative elements: Gradient overlays, floating UI cards, animated blobs, and abstract illustrations that don't communicate product value take space without adding information. Every visual element in the hero should earn its place by either helping the visitor understand the product or reducing their skepticism.

Full-page videos that autoplay: Video backgrounds in the hero are a high-risk choice. The visual interest they add is frequently outweighed by load time, accessibility issues, and the cognitive distraction of motion when the visitor is trying to read a headline. If you use video, make sure the headline remains legible over the video at all times and that the video adds meaningful context rather than just being decorative.

How to Write Hero Headlines That Convert

The two failure modes in hero headline writing: too vague (generic claims that could apply to any product) and too clever (memorable but confusing).

The specificity test: Replace your headline with a generic competitor and see if it works equally well. "The all-in-one solution for growing teams" passes this test (and therefore fails as a headline) because any product could use it. "The only revenue reconciliation tool that handles multi-currency subscriptions automatically" fails this test — which means it's working.

Frameworks that produce specific headlines:

Outcome + mechanism: "Close your books 3x faster with automated reconciliation." What outcome does the user get, and how?

Problem + resolution: "End the spreadsheet chaos in your revenue operations." Name the painful current state and imply the resolution.

Who + what + so that: "For B2B finance teams: automated revenue matching so that your month-end close takes hours, not days." Explicit about audience, explicit about function, explicit about outcome.

Avoid: metaphors ("Transform the way you work"), vague adjectives ("powerful," "seamless," "intelligent"), and generic superlatives ("the best," "the fastest"). These are placeholders for a real value statement.

Write at least 10 headline options: The first headline you write is almost never the best one. Write 10, then apply the specificity test to each. Share the top 3 with customers and potential customers and ask which one most accurately describes what they'd get from the product. Their answer will often surprise you.

Visual Hierarchy in the Hero

Visual hierarchy is the order in which a visitor's eye is naturally drawn through the page. In the hero, you're designing this sequence: headline first, subheadline second, CTA third, supporting visual fourth (or simultaneously with the headline if the visual is strong enough to reinforce the message).

Size and weight: Your headline should be the largest text on the page. Your CTA button should be the most visually prominent interactive element. Nothing else in the hero should compete with these two for visual weight.

Color: Use your primary brand color for the CTA button. Everything else in the hero should be at lower color intensity. If your background is colorful, ensure the headline text has sufficient contrast (minimum 4.5:1 for normal text, 3:1 for large text per WCAG guidelines).

Whitespace: Dense hero sections feel cluttered and are harder to scan. Each element needs breathing room — especially between the headline and subheadline, and between the subheadline and the CTA. Whitespace isn't wasted space; it's how you make each element feel important.

The product visual: A product screenshot, illustration, or mockup in the hero should reinforce the headline. If your headline says "Close your books faster," the visual should show the product doing that — not a generic dashboard. If the visual doesn't directly support the headline, it's taking space without adding information.

Animation and Video in Hero Sections: The Tradeoffs

Animation and video are common choices in SaaS hero sections, and they come with specific tradeoffs that most founders don't fully consider before implementing them.

The case for animation: A subtle animation (elements fading in, a UI component appearing in sequence) can make the product feel alive and modern. Well-executed product animations communicate how the product works more efficiently than static screenshots. Motion draws the eye and keeps visitors engaged in the hero longer.

The case against animation: Every animation adds load time. Animations that trigger on scroll require JavaScript that may not execute correctly on all devices. Animations that loop can be distracting when the visitor is trying to read the headline. And animations designed at desktop scale often don't translate to mobile — they either look broken or get stripped out, leaving an empty space where the hero was supposed to impress.

The specific risks of background video: Autoplay video in the hero is the highest-risk visual choice. Load time is significant (even with modern video compression). The moving background competes visually with the headline — visitors can't read and watch simultaneously. Many mobile browsers handle autoplay differently (some won't autoplay without user interaction). Users with motion sensitivity can have a poor experience.

The practical guideline: If you use animation, it should be purposeful — communicating something about the product — and tested on mobile and on slow connections. If the hero still works when the animation fails to load or run, the animation is additive. If the hero depends on the animation to communicate its value, you have a fragility problem.

---

Frequently Asked Questions