Hero Section
Design & UXThe first section of a webpage — usually above the fold — that introduces who you are, what you offer, the proof that backs it up, and the single action you…
Design & UX
Above the Fold
Above-the-Fold Content
Lukas HorvathCo-founder
What is Above the Fold?
Above the fold refers to the part of a webpage a visitor sees before scrolling. The term comes from newspaper design, where the most important story ran on the top half of the front page — above the literal fold. On the web, above-the-fold content is whatever fits in the visitor's initial viewport, which varies by device. It's the area where the hero section, headline, value proposition, and primary call-to-action need to land.
Why it matters
Eye-tracking and analytics agree: most visitors decide whether to keep scrolling based on what they see above the fold. If the headline is vague or the page looks like every other site in the category, they're gone. The argument that "users scroll now, so it doesn't matter" misses the point — they only scroll if the top of the page earns it. The mistake is the opposite extreme: cramming six elements above the fold so nothing breathes. The right answer is one clear message, one clear action, and confidence that the visitor will scroll for the rest.
How it works
The designer maps the fold at common viewport sizes — typically around 600 to 700 pixels tall on a laptop, less on a phone, more on a large monitor. The headline, supporting line, and primary CTA are placed inside that visible area. A secondary visual (image, screenshot, video) reinforces the message without crowding it. On mobile, the fold is much tighter, so the team designs a stripped-down version that still delivers the core message. Analytics tools (PostHog, Hotjar) show how far visitors actually scroll, which the team uses to confirm the fold is doing its job — or to cut what isn't.
Related terms
Landing Page
MarketingA standalone page built for one job — convert visitors from a specific campaign or audience into a single action — with no main menu, no competing links, no…
Call-to-Action
MarketingThe line of copy or the button on a page that asks the visitor to do the next specific thing — book a demo, start a trial, download the guide. The hinge that…
Visual Hierarchy
Design & UXThe way a page guides the visitor's eye — through size, weight, color, contrast, and spacing — so the most important thing gets seen first and the rest gets…
Responsive Design
Design & UXDesigning a website so it adapts to every screen size — phone, tablet, laptop, ultrawide monitor — instead of forcing one fixed layout that breaks the moment a…
Mobile-First Design
Design & UXDesigning the phone version of a site first and scaling up to desktop — instead of designing for a big screen and squeezing it down — so the experience fits…
Conversion Rate Optimization
MarketingThe practice of systematically improving the percentage of website visitors who take a desired action — sign up, book a demo, buy — instead of just chasing…