What Is Above the Fold? A Practical Web Design Guide

What is above the fold?

Above the fold is the part of a web page that visitors see without scrolling. It is the first screen that appears after the page loads. The term comes from newspapers, where editors put the strongest headline on the top half of the folded front page.

On the web, the fold is not a physical line. It moves with screen size, browser toolbars and device type. So there is no single "correct" pixel value. What matters is what your visitor sees in the first second.

Our team starts every project with one question. Can a visitor tell where they are, what you offer and what to do next, without scrolling? If the answer is yes, your first screen is doing its job. If not, polishing the lower sections will not fix the problem.

In this guide we cover the definition, mobile behavior, hero content and CTA placement. We also turn the research into a table and a checklist. For the wider picture, see our complete web design guide.

Why does above the fold still matter?

Nielsen Norman Group (NN/g) ran an eyetracking study in 2018 and found that desktop users spent about 57% of their viewing time above the fold. The first two screenfuls took 74% of the time. Source: the NN/g article "Scrolling and Attention".

NN/g measured 80% above the fold in 2010. So people scroll more today. Still, NN/g notes that the sharp drop in attention after the fold looked the same in 2018 as in 2010. Therefore you cannot conclude that the fold no longer matters.

Another NN/g article, "The Fold Manifesto", frames the fold as an interaction cost. Visible content costs almost nothing to reach. Hidden content needs an extra action, and nobody scrolls without a reason.

You should also know the limits of this data. The study used desktop eyetracking, and it will not mirror your audience exactly. So treat the numbers as a test hypothesis, not a rule. Your own measurements always beat a general statistic.

Where does the fold line start on different screens?

The fold line moves. On a desktop monitor the visible area often falls somewhere between 600 and 900 pixels. On a phone it is much shorter. Browser toolbars, cookie banners and sticky menus shrink it further.

NN/g stresses that the fold exists on every screen size. So the problem is not only old, small monitors. Even on a wide screen, content gets cut off somewhere. You need to plan for that point in your design.

Here is a practical method. Pull the three most common device sizes from your analytics. Then open the page on each one without scrolling and take a screenshot. What you see is your real above the fold area.

For example, our team often works from three sizes: a 1366x768 laptop, a 1920x1080 desktop and a 390-pixel-wide phone. That way the value proposition stays on screen even on the tightest device. Device simulation in your browser tools is enough for this.

How does above the fold work on mobile?

On mobile, the visible area is small, yet users scroll more readily. NN/g notes that small screens force more scrolling, but people still expect valuable content that justifies the effort.

So you should prioritize three things on mobile: a clear headline, one primary action and a visual cue that invites scrolling. A long menu, a big logo and a cookie banner can fill the first screen. Then your real content drops below the fold.

• Keep the logo and menu compact, ideally under a fifth of the first screen.
• Finish the headline in two or three lines and state the value clearly.
• Place the primary CTA button within easy thumb reach.
• Shrink the cookie banner or move it to the bottom edge.
• Scale the hero image so it does not push content down.

We explain the approach in detail in our mobile-first design article. To check your own pages quickly, try the mobile friendly test tool.

What should a good hero section include?

The hero section is the main block at the top of the page, and it forms the core of your first screen content. A good hero answers five questions within seconds. Who are you, what do you offer, who is it for, why should they choose you and what is the next step?

• Headline: it states the value and tells visitors what they gain.
• Subheadline: it explains the headline in one sentence.
• Primary CTA: one clear call to action.
• Trust signal: a client logo, a rating or a certificate that visitors can verify.
• Visual: an image that shows the product, service or outcome.

None of these five has to be huge. However, none of them should be missing. For instance, a hero with only a stylish photo and a brand slogan looks nice but gives no direction.

The weights change by sector. Service businesses lean on trust signals, e-commerce on product images and price, and B2B sites on a headline that names the problem. We detail this in our B2B landing page guide.

How do you write an above the fold headline?

A top-of-page headline should make visitors think, "I am in the right place." So you write a concrete benefit, not an abstract slogan. "Designing the future" says nothing. "A website that books appointments for dental clinics" tells people who you serve and what you do.

A good headline usually has three traits. First, it speaks the visitor's language. Second, it promises an outcome without exaggeration. Third, it matches the search query or the ad copy. If an ad visitor meets a different message, they leave fast.

Use the subheadline for detail. The headline answers "what", and the subheadline answers "how" and "for whom". Also keep it short; two lines is a good limit.

When you write the copy, the UX writing approach gives you a clear frame. In short, focus on making the visitor's decision easier, not on decorating the sentence.

Where should the CTA button go above the fold?

Place the primary CTA above the fold, right under or beside the headline and subheadline. NN/g also recommends keeping high-priority content and main calls to action above the fold. The button should stand out at first glance.

That said, the CTA does not carry the same weight on every page. On a product page with high purchase intent, "Add to cart" belongs above the fold. On an informational blog post, an aggressive button breaks the reading flow.

• Pick one primary CTA and make secondary CTAs visually quieter.
• Combine the action and the benefit in the label, such as "Get a free quote".
• Keep the contrast high, because a button that blends into the background is invisible.
• On mobile, leave the button wide enough to tap with ease.

For wording and design, see our CTA button examples. For color choices, the color contrast checker does the job.

How do content above and below the fold differ?

You need to distribute content on purpose. The top holds elements that help visitors decide. Below it, you place elements that persuade and add detail. This table sums up the split.

The split is not a strict rule. On a short landing page, everything can fit above the fold. On a long corporate page, repeating trust proof further down makes sense.

How do you encourage users to scroll past the fold?

The biggest trap NN/g warns about is the "false floor". If the top of the page looks finished, users assume nothing lies below and they do not scroll. A full-width image with a wide blank band beneath it creates this effect.

The fix is simple cues. Let the top edge of the next section peek above the fold. Add a small arrow or a prompt such as "How it works". Also use a color change between sections so the flow feels continuous.

Scroll behavior is its own topic. You will find the details in our scroll experience article, which covers progress indicators and section transitions.

In short, the first screen does not sell the page. It sells the step into the page. Your goal is to carry the visitor to the second screen, and once you do that, the rest of the content works.

How does above the fold affect page speed and LCP?

The largest element above the fold is often the LCP (Largest Contentful Paint) element. A hero image or a headline block usually plays that role. Google's web.dev guidance recommends an LCP of 2.5 seconds or less for a good experience.

So you need to prepare the hero image with care. Compress it, size it correctly and serve it in a modern format. Do not lazy load the image above the fold. Do lazy load images below it.

• Scale the hero image to the screen size.
• Prefer light formats such as WebP or AVIF.
• Load the critical CSS for the top of the page early.
• Avoid sliders and heavy video backgrounds.

For metric details, read our Core Web Vitals article, and for the search impact, our site speed and SEO article. Source: web.dev, Largest Contentful Paint.

Should the hero use a video, a slider or a large image?

Short answer: use one only if it helps the visitor decide. A decorative image takes space and slows loading. A product photo that shows the value proposition, or a short demo, can make a strong hero.

Sliders usually cause trouble. Visitors barely notice any slide after the first, and auto-rotation interrupts them. So a single strong message often works better. Confirm it with an A/B test on your own site.

If you use video, start it muted, keep it short and defer loading. Video can help conversion, although the effect varies by page. You can read more in our video and conversion rate article.

How do you design the fold for each page type?

The first question differs on every page type. So the first screen content changes with the job of the page. Below you see four common scenarios and what we prioritize in each.

• Landing page: one offer, one CTA and a limited menu. You remove distracting links.
• Corporate homepage: what you do, who you do it for and how to get in touch. You show trust signals early.
• E-commerce product page: product image, price, stock status and the add to cart button.
• Blog post: title, a short summary and a table of contents. Ads and pop-ups should not interrupt reading.

The gap between a homepage and a landing page is large. A homepage serves many visitor types, while a landing page aims at one audience and one goal. For the conversion angle, see our conversion focused web design article.

The fold matters most in e-commerce. If you hide price and delivery info lower down, shoppers may leave without an answer. So keep the facts that drive the purchase decision on the first screen.

Which mistakes do teams make most often above the fold?

Most mistakes fall into two extremes: showing too much or showing nothing. A crowded page makes the decision harder, and an empty page raises no curiosity. Prioritization creates the balance.

• Abstract slogan: visitors cannot tell what you offer.
• Several equal CTAs: they cannot tell which one to press.
• Giant menu and cookie banner: the content drops below the fold.
• Low-contrast text: it disappears over the image.
• False floor: the first screen looks finished, so nobody scrolls.
• Heavy hero image: the LCP time grows and visitors will not wait.

A UX audit surfaces many of these mistakes quickly. We describe the process in our UX audit guide. We also collected the interface errors that hurt sales in a separate article.

How does the fold relate to bounce rate?

The above the fold area is where visitors decide within seconds whether to stay. If the first screen is unclear, they hit the back button. In analytics, that shows up as a high bounce rate. However, reading the number alone can mislead you.

For example, someone who wants a quick answer may find it in a blog post and leave. That is not a bad experience. On the other hand, if visitors on a service page never reach the CTA or the second section, the problem likely sits on the first screen.

So read bounce rate against the goal of the page. Combine it with scroll depth, CTA clicks and session time. That way you can tell whether the issue comes from the message, the speed or the wrong traffic.

Our team usually follows one order. We check the traffic source first, then the first screen message, and finally speed and device breakdown. This order prevents needless design changes.

How do you adapt the fold for visitors from ads?

A visitor from an ad wants to see the answer to the ad text they clicked. If the ad promises a free consultation and the page shows a generic company intro, trust drops. So the headline and the ad copy must speak the same language.

In practice, you can build a separate first screen for each ad group. Adapt the headline to the query and match the CTA label to the ad promise. Also remove needless menu items to cut distraction.

Ad management and page design look like separate jobs, yet the result depends on how well they fit. That is why we treat the landing page as part of the campaign in our Google Ads management service.

Without conversion tracking this work stays half done. Define your goals in advance so you can see which variant wins. We explain goal setting in our conversion goals article.

How do cookie banners, pop-ups and sticky headers hurt the fold?

These three elements eat the most valuable part of the first screen. A cookie banner takes the bottom edge, a sticky header takes the top edge, and a pop-up covers everything. On mobile, all three together leave very little room for real content.

First ask whether each element is really needed. A cookie notice may be a legal requirement, but you can shrink it. You can collapse the sticky header on scroll. Also, showing a pop-up after the visitor engages works better than showing it in the first seconds.

• Design the cookie banner as a thin strip.
• Limit the height of the sticky menu on mobile.
• Avoid full-screen pop-ups that open right on load.
• Make the close button obvious and easy to tap.

In short, give the first screen to content and pull helper elements to the side. Visitors should not have to pass three gates before they see what the page offers.

How does the fold shape first impressions?

A first impression comes from typography, color, spacing and imagery together. Visitors sense whether a page looks orderly and trustworthy before they read a word. So design details are a matter of trust, not only looks.

Color choice matters here. Use your brand color without hurting the contrast between the CTA and the background. We cover the emotional effect of color in our color psychology article.

The same logic applies to type. The headline should be large enough, and body text should stay comfortable to read. Also, short line lengths keep the eye relaxed. Whitespace then acts as an invisible tool that steers attention.

Finally, check consistency. If logo, colors and tone carry the same personality across the page, visitors remember the brand more easily. So do not design the hero apart from your brand identity.

Why do readability and accessibility matter above the fold?

An unreadable hero gives the same result as no hero. Light text over an image can vanish on a bright screen or for people with low vision. So contrast and font size deserve priority on the first screen.

Here is a practical rule: keep headline text away from the busiest part of the image. Add a semi-transparent layer if needed. Also test that the button label has enough contrast against its background.

• Leave enough contrast between text and background.
• Keep body text at a comfortable size on mobile.
• Do not convey information by color alone.
• Make touch targets wide enough for a finger.

These settings help everyone, not only users with disabilities. Someone using a phone in bright sun needs the same contrast. To measure contrast fast, try the color contrast checker.

What is the difference between above the fold and scroll behavior?

Above the fold is the content of the first screen, while scroll behavior is what the user does after that screen. The two feed each other. If the first screen sparks interest, users scroll, and once they scroll, the lower sections take over.

So optimizing each one alone is not enough. For example, if you build a perfect first screen but leave the second section empty, visitors scroll with curiosity and end up disappointed. Likewise, a strong second section will not rescue a weak hero.

That is why you should design the transitions between sections. Build a small bridge at the end of each one. Also set the page length by what the content needs; NN/g itself suggests testing the ideal length with real users.

In other words, the aim is not to force scrolling but to make scrolling worthwhile. When every screen offers new value, users keep going on their own.

Which metrics should you track for first screen work?

The metrics depend on the goal of the page, but the core set fits almost every site. First measure the speed of the first screen, then the reaction of users. After that, connect the result to conversion.

Read the metrics together, not one by one. For example, if LCP looks good but CTA clicks are low, the problem sits in the message, not the speed. If clicks are high but conversion is low, the form or the offer may be at fault.

Finally, keep the measurement window long enough. Weekday and weekend behavior differ. Also review campaign periods separately, because traffic quality changes the rates.

How do you test the above the fold area?

Measure first, then change. There are four core ways to test the top of a page: scroll depth tracking, heatmaps, user tests and A/B tests. Each one answers a different question.

• Scroll depth: shows what share of users reach the second screen.
• Heatmap: visualizes clicks and attention.
• User test: a five second test measures the first impression.
• A/B test: compares a headline or CTA variant with real traffic.

The five second test is simple but strong. Show the page to a few people for five seconds and ask, "What does this page offer?" If their answers differ from your headline, your message is not clear yet.

When you read results, remember that a small sample can mislead. Also test one variable at a time. To calculate the change in conversion, use the conversion rate calculator.

How do you read the effect of a fix with an example calculation?

The figures below do not belong to a real client. They form an example calculation that only shows the logic. Assume a service page gets 10,000 visitors a month with a 2% conversion rate. That equals 200 leads a month.

Now imagine you rework the hero area and lift the rate to 2.4%. If traffic stays the same, you get 240 leads. So you gain 40 leads a month without extra ad spend. However, this result is an assumption and not a guarantee.

Note that you only see the real result with your own data. In our field experience, a clear value proposition and a visible CTA improve results on many sites. Still, the size of the effect depends on the sector, the traffic source and the offer.

So instead of predicting the result, write a test plan. Decide in advance which metric you track, for how long and with what sample. That way you read the effect from data and not from opinion.

What should you check before launch? An above the fold checklist

Before you publish, run the list below on desktop, tablet and phone separately. Every item should get a yes. If one item gets a no, fix it first and then move on to other improvements.

1. Does the headline state what the visitor gains in one sentence?
2. Does the subheadline explain who you serve and how?
3. Is the primary CTA visible on the first screen without scrolling?
4. Does a trust signal sit above the fold?
5. On mobile, do the menu and cookie banner leave the content in place?
6. Is the hero image fast, with LCP under 2.5 seconds?
7. Is the fold line free of a false floor?
8. Does the headline match the ad or search message?

Do not run the list only once. Run it again each time the design, the content or the campaign changes. Even a small banner can push the CTA below the fold.

How does our team run above the fold work?

We split the process into four steps. First, we write down the single job of the target page. Next, we check the device mix of your audience and pick the critical screen sizes. Then we sketch the hero mobile first, and finally we test it.

In this flow, design, content and performance sit at the same table. The person who writes the headline and the person who prepares the image think about LCP together. So you do not have to choose between a pretty but slow hero and a fast but meaningless one.

If your first screen loses conversions, a professional review can help. In our web design service we handle the hero area, CTA placement and mobile experience together. Our goal is a first impression that works, not one that only looks fancy.

Our web design proposal guide also gives you criteria for the decision. We recommend reading the NN/g sources too: Scrolling and Attention and The Fold Manifesto.