Above the fold is the area of a web page visible without scrolling. On a standard desktop monitor, this is approximately the top 600–800 pixels of the page. On a mobile device, it is the top 300–500 pixels. Research by Nielsen Norman Group found that 80% of user attention is concentrated above the fold — the content below the fold receives only 20% of total attention. This means every design decision in the above-fold zone — the headline, the visual, the CTA placement, the trust signal — carries 4× the weight of any equivalent decision below the fold.
This guide covers what must appear above the fold, how to structure the hero section, and the specific design decisions that make the first screen your visitors see convert effectively.
What Is "Above the Fold" in Web Design?
The term "above the fold" originated in newspaper design — the top half of a folded newspaper, visible without unfolding it, carried the most important story. In web design, it refers to the portion of a page visible without scrolling.
The exact dimensions vary:
- Desktop (1920×1080): approximately 900–1000px of page height visible
- Laptop (1366×768): approximately 600–700px visible (subtracting browser chrome)
- Mobile (390px wide): approximately 600–700px visible
Because screen sizes vary, designing "above the fold" means designing for the common viewport — typically ensuring all critical information is visible on a 1366×768 laptop screen and on a 390×844 mobile screen.
What Must Appear Above the Fold?
The above-fold zone must answer three questions a visitor has within seconds of arrival:
- What is this? — The headline, clearly stating who you are or what you do
- Is this for me? — The subheadline or descriptor, clarifying who you serve
- What should I do next? — The primary CTA, visible and prominent
Additionally:
A trust signal: One element that establishes credibility without requiring the visitor to scroll — a client logo, a review score, a credential, or a specific metric.
A supporting visual: An image, illustration, or video that reinforces the headline. Not a decoration — a communication tool that shows the product, the outcome, or the person delivering the service.
Brand identity: The logo, the brand colours, and the typography that tells the visitor they are in the right place. This is typically handled by the header, which is always above the fold.
How Should the Hero Headline Be Written?
The hero headline is the most important text on the page. It is the first text a visitor reads and the strongest signal about whether the page is relevant to their needs.
What a strong hero headline does:
- States who you help or what you do in specific terms ("Brand and web design for professional services firms")
- Communicates a specific benefit or outcome ("Generate 15+ qualified leads per month from your website")
- Creates immediate recognition in the right visitor ("For mid-career professionals ready for their first director role")
What a weak hero headline does:
- Uses abstract language without specific meaning ("Transforming businesses through creative excellence")
- States what you are rather than what you do for the visitor ("We are a full-service design agency")
- Uses clichés that could belong to any company ("Where innovation meets design")
In A/B tests across hundreds of business websites, specific headlines consistently outperform abstract ones by 15–40% on conversion rate. The specificity creates recognition in the right visitor while pre-qualifying out the wrong visitors — both are valuable outcomes.
Where Should the CTA Button Be Positioned Above the Fold?
The primary CTA button must be:
- Visible above the fold on all primary screen sizes — desktop, laptop, and mobile
- Visually distinct from surrounding elements — typically through contrasting colour, size, and spacing
- Positioned after the headline — typically bottom-right on desktop, centred below the headline/subheadline on mobile
- Large enough to tap comfortably on mobile — minimum 44px height, preferably 52–56px for primary CTAs
The CTA should use action language that specifies what happens next: "Book a Free Discovery Call", "Get My Free Audit", "Start a Project" — not generic labels like "Learn More", "Click Here", or "Submit."
See call to action design guide for the complete CTA design framework.
What Are the Most Common Above-Fold Design Mistakes?
Mistake 1: The headline that communicates nothing. "Welcome to [Company Name]" is not a headline — it states the obvious and communicates no value. Every visitor already knows they are on your website. Use the headline to communicate value, not acknowledgement.
Mistake 2: The CTA below the fold. A hero section with a full-screen background image, a short headline, and no CTA above the fold requires visitors to scroll before they can act. Even highly interested visitors sometimes do not scroll — they need the action pathway visible immediately.
Mistake 3: Competing visual elements. A hero section with three CTAs, two banner announcements, a chat widget, and a cookie consent popup has too many competing visual demands. Visitors who cannot immediately identify the primary action take no action.
Mistake 4: Auto-playing video that delays content. A loading video or animation sequence that plays before the page content is visible creates frustration and increases bounce rate. If video is used, it should load as a background element while text and CTAs are immediately visible.
Mistake 5: No mobile-specific above-fold design. A desktop hero that works beautifully becomes a broken experience on mobile when the headline is too large to fit, the CTA drops below the fold, or the background image obscures the text. See mobile-first web design for mobile-specific above-fold standards.
How Does Above-Fold Design Differ by Page Type?
Homepage above the fold: Communicates the brand's overall positioning. Serves a wide variety of visitor types. Must be clear enough for first-time visitors and compelling enough for informed prospects. See website homepage design guide.
Landing page above the fold: Communicates the specific offer to a specific audience arriving from a specific source. Message must match the ad or email that sent them here. See landing page design guide.
Product page above the fold: Shows the product image prominently, states the product name and price, and shows the primary purchase action ("Add to Cart") — all visible without scrolling. See web design for ecommerce.
Service page above the fold: States the specific service, who it is for, and a single CTA to enquire or book. Often includes a specific outcome or case study reference.
What Visual Hierarchy Principles Apply to Above-Fold Design?
Visual hierarchy — the order in which a visitor's eye moves across the design — determines what information is perceived first, second, and third. For above-fold sections, the intended hierarchy is:
- Hero image or visual (draws the eye first)
- Headline (largest text, highest contrast)
- Subheadline (secondary text, smaller size)
- CTA button (high contrast, distinct from text)
- Trust signal (smaller, supporting)
Designing against this hierarchy — placing the trust signal before the headline, or making the subheadline larger than the headline — produces visual confusion that visitors resolve by leaving.
See website conversion rate optimisation for how above-fold design connects to overall site conversion strategy.
Your Above-Fold Section Should Convert More Visitors
We design hero sections and landing pages that communicate clearly, establish trust immediately, and convert — for businesses in the US, UK, Canada, and Australia.
Above the fold refers to the portion of a web page visible without scrolling. It originates from newspaper design, where the top half of a folded paper carried the most important content. In web design, this is approximately the top 600–900px of a page on a laptop or desktop, and 600–700px on a mobile device. Nielsen Norman Group research found that 80% of user attention is concentrated in this zone, making it the highest-value area on any page.
Above the fold must include: a specific headline (who you help or what you do), a supporting subheadline, a primary CTA button, a hero visual that reinforces the headline, and at least one trust signal (client logo, review count, or credential). All five elements should be visible without scrolling on both laptop and mobile viewports. The CTA button in particular must be above the fold — visitors who must scroll to find the action pathway often do not scroll.
Yes — more than ever. While modern users are comfortable scrolling, they only scroll if they decide the page is worth exploring. That decision is made within the first 5 seconds, based entirely on what is above the fold. A compelling above-fold section that communicates relevance and value immediately increases scroll depth. An unclear or unengaging above-fold section produces a bounce — and that bounce happens before the visitor ever sees the content below.
The three highest-impact improvements for hero sections: rewrite the headline to be specific and outcome-focused rather than generic or abstract; ensure the CTA button is above the fold on both desktop and mobile with a contrasting colour; and add a trust signal (client logo or review count) visible without scrolling. These three changes together typically produce a 20–40% improvement in hero section engagement and conversion.
A background image works well when it shows the product, service outcome, or team in context — reinforcing the headline rather than decorating around it. Background videos are effective for atmosphere (restaurants, hospitality, lifestyle brands) but must load quickly and not delay text rendering. In both cases, ensure sufficient contrast between the background and the headline text — a text readability failure in the hero section is a conversion-critical error.