Above the Fold

What Is Above the Fold?

Above the fold refers to the portion of a web page visible in the browser viewport before any scrolling. The term originates from newspaper publishing, where the top half of the front page (visible when folded on a newsstand) had to sell the issue. On the web, the fold line varies by device, screen size, and browser chrome, but the concept remains essential: the above-the-fold region is where users decide whether your page deserves any further attention.

Also Known As - Marketing teams: hero section, first screen, landing viewport - Sales teams: initial impression area, opening view - Growth teams: first paint content, initial viewport - Product teams: hero area, top viewport, initial render

How It Works Imagine a B2B software landing page with a 42% bounce rate and 2.8% conversion rate. Eye-tracking research and heatmaps reveal that 91% of visitors see only the above-the-fold area, while just 34% scroll past the second section. The team redesigns the above-the-fold region: replaces a generic product shot with a specific screenshot showing the exact outcome users want, changes the headline from feature-focused ("AI-Powered Analytics Platform") to outcome-focused ("Know your churn risk 30 days before customers leave"), adds a customer logo strip, and moves the primary CTA up 200 pixels. Bounce rate drops to 31%, time on page rises 40%, and conversion rate climbs to 4.2%. The changes below the fold made no difference because most visitors never got there.

Best Practices - Do include the four essentials above the fold: clear headline, supporting subhead, relevant hero visual, and primary CTA. - Do design for the 1440x900 and 375x667 viewports (desktop and mobile), testing each separately. - Do measure what percentage of users scroll past your fold. If it is under 50%, your above-the-fold needs work. - Do not cram every value proposition above the fold. Clarity beats density. - Do not use autoplay hero videos with no static fallback. Users often leave before the video begins.

Common Mistakes - Using a beautiful but generic hero image that says nothing specific about what the product does. - Writing clever headlines that require the reader to figure out what the product is. Curiosity is not a substitute for clarity. - Ignoring mobile above-the-fold, where the viewport is dramatically smaller and horizontal space is precious.

Industry Context - SaaS/B2B: Above-the-fold should answer "what does this do, for whom, and what should I do next" in under 5 seconds. Customer logos and one-sentence outcomes work well. - Ecommerce/DTC: Hero product imagery, a clear headline, and either a product collection CTA or featured product are the norm. Promotional banners add urgency. - Lead gen/services: Above-the-fold should include a phone number (highly visible on mobile), a brief value proposition, and trust signals like credentials or testimonial count.

The Behavioral Science Connection The primacy effect, a well-documented memory phenomenon, shows that information presented first has outsized influence on evaluation and recall. On web pages, this means the above-the-fold content sets the frame for everything else. Nielsen Norman Group's eye-tracking research consistently finds that the top 20% of a page receives roughly 65-80% of viewing time. The aesthetic-usability effect, from Masaaki Kurosu and Kaori Kashimura's 1995 research, demonstrates that aesthetically pleasing designs are perceived as more usable and trustworthy, which means above-the-fold visual polish earns you credibility before the user reads anything.

Key Takeaway Above-the-fold is not a boundary but a filter: it decides who bothers to scroll, which means it carries disproportionate weight for the overall conversion rate of everything else on the page.