Above the Fold
Winning the First Screen of Every Visit
Summary
Above the fold is the part of a web page that is visible without scrolling, as soon as the page loads. The term comes from newspapers, where the top half of the front page carried the stories most likely to sell the paper. On the web, this first screen sets expectations, earns the scroll, and often decides whether a visitor stays.
Above the fold describes everything a visitor sees on a web page before they scroll. Unlike a printed newspaper, the web has no single fold: the visible area changes with screen size, browser chrome, and device orientation. A laptop, a large monitor, and a phone each show a different amount of content. That is why modern teams treat above the fold as the first viewport on each key breakpoint rather than a fixed pixel line, and design it alongside responsive web design decisions.
In practice, the area above the fold usually overlaps with the hero section. It typically contains:
- A clear headline that states what you offer and for whom.
- A short supporting line that adds the key benefit or proof point.
- A primary action, such as a button or form, so motivated visitors can act immediately.
- A relevant visual that shows the product, the outcome, or the people it serves.
- Navigation and brand cues that tell visitors where they are and that they can trust the page.
Why Above the Fold Matters
- It shapes the first impression. Visitors decide quickly whether a page is relevant to them, and the first screen is the only content everyone sees.
- It earns the scroll. People do scroll, but only when the top of the page convinces them that more value is waiting below.
- It carries the main conversion path. Placing a visible call to action here serves visitors who arrive ready to act.
- It affects performance metrics. The largest element in the first viewport is often what Largest Contentful Paint measures, one of the Core Web Vitals.
Real-World Example of Above the Fold
Imagine a healthcare scheduling platform whose homepage opens with a full-screen abstract video and a vague slogan. Visitors on phones see only motion and a menu icon. A redesign replaces the video with a direct headline (“Book specialist appointments in minutes”), a one-line benefit for clinic managers, a product screenshot, and a “Request a demo” button. On mobile, the headline and button both fit in the first viewport. Nothing about the product changed, but visitors now understand the offer and the next step without hunting for it.
How to Design Above the Fold Content
Start with the message, not the layout. Write the headline and supporting line first, and test whether someone unfamiliar with your brand can explain your offer after reading only those two lines. Then decide on a single primary action and give it visual priority.
Next, check real viewports. Review your analytics for the most common screen sizes and preview the page on each. Make sure the headline and main action are visible on a typical phone without zooming or scrolling. Keep the hero image light, preload it when it is the largest element, and avoid layout shifts caused by late-loading fonts or banners.
Finally, avoid cramming. Trying to fit every message above the fold produces clutter and weakens the scroll. For a practical checklist, read our guide on what your hero section needs to convert leads fast.
Conclusion
Above the fold is less about a fixed line and more about priorities. The first screen should tell visitors what you do, why it matters to them, and what to do next, on every device, while loading fast enough to keep their attention.
Need Help With Your Above the Fold Design?
Artifact helps companies craft first screens that communicate clearly and convert, combining messaging strategy, product design, and fast Webflow builds. If your homepage or landing pages are not earning the scroll, Tell us about your project.