Above the fold on a website refers to the content visible without scrolling, typically the top 600 to 800 pixels on desktop and 500 to 700 pixels on mobile. The most effective above-the-fold design includes four elements: a specific headline that communicates what you do and who it is for, a subheadline that adds context or addresses the primary objection, a single clear CTA, and one trust signal (testimonial snippet, client count, or guarantee).
What "above the fold" actually means in 2026
The term "above the fold" comes from newspapers. The top half of the front page, the part visible when the paper is folded on a newsstand, had to contain the most compelling stories to make people pick it up. On the web, it refers to the content visible in the browser viewport before the visitor scrolls.
The problem with applying this concept to modern websites is that there is no single "fold." A visitor on a 27-inch iMac sees a very different initial viewport than someone on an iPhone 15. A laptop at 1366x768 resolution shows different content than a 4K monitor. The fold is not a fixed line. It is a range.
That range matters. If you design your above-the-fold content for a 1920x1080 desktop monitor, it may look great on your screen but lose critical elements on smaller viewports. The practical approach is to design for the most common viewport first and then verify on other sizes.
According to Statcounter's resolution data, the most common desktop resolutions in 2025 were 1920x1080 (roughly 22% of desktop users) and 1366x768 (roughly 15%). For mobile, the dominant viewport heights range from 640 to 850 pixels, depending on the device and browser chrome (address bar, navigation buttons).
A safe above-the-fold design target: assume 700 pixels of visible height on desktop (accounting for browser chrome on smaller monitors) and 550 pixels on mobile. If your critical content fits within these constraints, it will be visible to the vast majority of visitors without scrolling.
The 4 essential elements of above-the-fold website design
These four elements, and only these four, belong above the fold. Everything else can go below.
1. A specific headline
Your headline is the most important element on the page, and it must be visible immediately. "The most important" is not hyperbole. Research published by the Nielsen Norman Group found that on average, users read only 20% of a page's text. The headline is the one element you can reasonably assume most visitors will read.
A specific headline communicates three things in a single sentence: what you do, who it is for, and why it matters. "Marketing automation for B2B SaaS companies that reduces churn by 25%" is specific. "The Future of Marketing" is not. "Emergency Plumbing Repair in Austin, Available 24/7" is specific. "Quality Plumbing Services" is not.
The headline should be the visually dominant element above the fold. Largest font size on the page. Highest contrast against the background. If you run the blur test on your above-the-fold area, the headline should be the one element you can still identify.
2. A subheadline that adds context or handles the primary objection
The headline does the heavy lifting. The subheadline does the supporting work. Its job is either to add specificity that the headline could not contain, or to address the most common objection before it fully forms.
Adding context: If your headline is "Website teardowns that tell you exactly what to fix," the subheadline might be "Get a scored, prioritized report on your homepage's positioning, copy, design, and conversion architecture."
Handling the objection: If your headline is "Increase your conversion rate in 30 days," the most common objection is skepticism ("everyone says that"). The subheadline addresses it: "Based on a 127-point evaluation framework used by 500+ SaaS companies."
The subheadline should be visually secondary to the headline (smaller font, lighter weight, or lower contrast) but still clearly readable above the fold.
3. A single clear CTA
One primary action. Not two options. Not three buttons for different audience segments. One CTA above the fold. This is not a suggestion. It is backed by research. A study conducted by Ellie Mae (now ICE Mortgage Technology) and frequently cited in CRO literature found that reducing the number of choices on a landing page from four to one increased conversions by 266%.
Your above-the-fold CTA should be:
- Visible: A distinct color that contrasts with the background. If you cannot spot the button immediately, it is not prominent enough.
- Specific: "Start Your Free Trial" beats "Get Started." "Book a Free Consultation" beats "Learn More." The button text should communicate what happens after the click.
- Single: If you have both a "Start Free Trial" and a "See Pricing" button, pick the one that better serves your primary conversion goal and make the other one secondary (smaller, less prominent, or positioned below the fold).
4. One trust signal
The fourth element might surprise you. Many above-the-fold designs include only a headline, subheadline, and CTA. Adding one trust signal to the above-the-fold area reduces the initial risk perception before the visitor has even scrolled.
This does not need to be elaborate. A single line works:
- "Trusted by 2,000+ companies"
- "4.9/5 from 500+ reviews on G2"
- A small strip of three to five recognizable client logos
- "30-day money-back guarantee"
- A one-line testimonial snippet: "Best investment we made this year. -- Sarah Chen, VP Marketing at Acme Corp"
The key is restraint. One trust signal above the fold. Not a testimonial carousel. Not a wall of logos. One concise proof point.
For more on how to use trust signals effectively across your entire page, see our complete guide on trust signals for websites.
What does NOT belong above the fold
Just as important as knowing what to include is knowing what to exclude. Above-the-fold real estate is limited. Every element you add competes for attention with every other element. These common inclusions hurt more than they help.
Navigation-heavy headers. A navigation bar with eight links, a search bar, a language selector, and an account icon pushes your actual content down and distracts from the headline. Keep navigation minimal above the fold. On landing pages, consider removing it entirely.
Autoplay videos. A video that starts playing before the visitor has even read the headline is an interruption, not a feature. Videos belong below the fold, after the visitor understands what the page is about.
Generic hero images. A stock photo of people in a meeting, a city skyline, or abstract shapes adds no information. If the image does not directly support the headline's message, it is taking up space that the headline, subheadline, or CTA could use. Product screenshots, diagrams that explain the value proposition, or images that show the outcome of using your product are justified. Everything else is filler.
Feature lists. The above-the-fold area is for positioning and action. Features belong below the fold where visitors who are already interested go to learn more. Leading with features before establishing what the product does and who it is for is like listing ingredients before someone knows what dish you are serving.
Multiple CTAs for different audiences. "Are you a marketer? Click here. Are you a developer? Click here. Are you an enterprise buyer? Click here." This segmentation pushes the decision burden onto the visitor. Pick your primary audience and speak to them. Secondary audiences can be addressed further down the page.
Desktop vs mobile above-the-fold website design
The same four elements apply to both desktop and mobile, but the constraints are different.
Desktop has more horizontal space, which means your headline and CTA can sit side by side with an image or illustration. The danger on desktop is wasted space: large hero images that push content down, or so much whitespace that the CTA falls below the fold on smaller monitors.
Mobile has severe vertical constraints. The browser chrome (address bar, navigation buttons) consumes 100 to 150 pixels. A cookie banner or notification can consume another 100. That leaves you 300 to 400 pixels for your actual content. On mobile, every pixel matters.
Mobile-specific recommendations:
- Reduce headline length. If your desktop headline is two lines, it might be four lines on mobile, pushing everything else down.
- Make the CTA button full-width or nearly full-width. Small buttons are hard to tap and easy to miss.
- Move the trust signal directly below the CTA button rather than beside it.
- Eliminate any decorative elements that do not directly support the message. That gradient background or hero illustration may need to go on mobile.
- Test on an actual phone, not just by resizing your browser. The experience is genuinely different.
How to test your above-fold effectiveness
The blur test
Take a screenshot of your above-the-fold area and apply a Gaussian blur until you can barely make out shapes. Can you identify the headline? The CTA button? If both are still visible as distinct elements, your visual hierarchy is working. If everything blurs into a uniform gray, your hierarchy needs work. Our full blur test guide walks you through this in detail.
The 5-second test
Show your above-the-fold screenshot to someone who has never seen your website. After five seconds, take it away and ask three questions: What does this company do? Who is it for? What would you do next on this page? If they cannot answer all three, your above-the-fold content is not communicating clearly.
The squint test (variant of blur test)
Literally squint at your screen until the content blurs. This quick, no-tools version of the blur test reveals whether your visual hierarchy is strong enough to guide attention even without sharp focus.
Heatmap analysis
If you have a heatmap tool (Hotjar, Microsoft Clarity, or similar), check where visitors are actually clicking and how far they scroll. If most clicks happen below the fold, your above-the-fold content may not be engaging enough to prompt action at the top. If most visitors never scroll past the fold, your above-the-fold content is either satisfying their needs or failing to interest them enough to continue.
The connection between above-the-fold design and conversion
Your above-the-fold area is not just the first thing visitors see. For a significant percentage of visitors, it is the only thing they see. Data from Chartbeat's research on 2 billion page visits found that 66% of attention on a normal media page is spent below the fold, but this number drops dramatically on landing pages and homepages where the primary conversion action is above the fold.
The implication is clear: for conversion-focused pages, the above-the-fold design is where the conversion happens. Everything below the fold supports, reinforces, and provides detail, but the initial decision to engage or leave is made in that first viewport.
If you want a comprehensive approach to designing a homepage that converts, including but not limited to the above-the-fold section, see our guide on how to write a homepage that converts.
What a professional audit reveals about your above-the-fold design
The TeardownHQ Core report ($49) evaluates your above-the-fold area as part of the visual hierarchy and conversion architecture assessments. The Pro report ($149) compares your above-the-fold effectiveness against direct competitors, revealing whether your initial impression is stronger or weaker than the alternatives your visitors are also considering. The Plus report ($249) includes specific above-the-fold layout and copy recommendations.
Find out whether your above-the-fold area is doing its job. Get a teardown and receive specific, scored findings on your homepage's first impression.