What Is Above the Fold?
Above the fold is the portion of a web page visible without scrolling, the first screen a visitor sees when the page loads. The term comes from newspapers, where the most important stories ran above the physical fold. On a website, this prime area typically holds the headline, main image, and primary call-to-action. For local businesses, what appears above the fold shapes first impressions in seconds and heavily influences whether a visitor stays, scrolls, or leaves.
- Origin
- Newspaper term for the top half visible on a folded front page
- Varies by device
- The 'fold' differs across phones, tablets, and desktops (no fixed pixel line)
- Typical contents
- Headline, hero image, key value proposition, and primary call-to-action
- Why it matters
- Visitors form first impressions in well under a second (industry-typical)
Where did the term 'above the fold' come from? #
The phrase predates the web by more than a century. Newspapers were sold folded in half, so only the top portion of the front page was visible on a newsstand. Editors put the biggest headline and most compelling photo there, above the fold, to grab attention and sell copies. When the web arrived, designers borrowed the term for the part of a page visible before you scroll. The idea carried over neatly: just as a newspaper's top half had to hook readers, a web page's first screen has to hook visitors. The concept remains central to how we approach /services/web-design, because the top of the page does a disproportionate share of the work. The difference online is that there is no single physical fold, the visible area changes with every device and browser window. That nuance trips up business owners who imagine a fixed line, but the underlying principle, lead with your strongest content, is as true on a website as it was on a printing press.
Why does above-the-fold content matter so much? #
Visitors judge a website almost instantly. Research consistently shows people form an impression of a page in a fraction of a second and decide within moments whether to stay. Above-the-fold content drives that snap judgment because it is what they see first, often the only thing they see if they bounce. If the top screen clearly answers 'what is this, is it for me, and what should I do,' visitors relax and keep going. If it is confusing, slow, or generic, they leave. For a local business, this is where you win or lose the click. A /web-design-for-plumbers site that shows 'Emergency Plumbing in Austin, Call Now' with a phone button above the fold converts far better than one that opens with a vague slogan. Studies of scroll behavior also show that while people do scroll, attention is heaviest at the top and drops as they go down. That makes the first screen your most valuable real estate, and it should carry your most important message and action.
Is there still a single 'fold' on modern websites? #
Not really, and this is where the old term gets tricky. In the newspaper era the fold was a fixed physical line. On the web, the visible area depends on the device, a large desktop monitor shows far more than a phone, and even two phones can differ. There is no universal pixel height where 'the fold' sits. Because of this, some designers argue the concept is outdated. But the principle survives even if the precise line does not: whatever a visitor sees first, before any scrolling, is disproportionately important, and that first screen varies by device. Thanks to /wiki/what-is-responsive-design, a well-built page adapts its layout so the key message and call-to-action stay visible up top on every screen size. So rather than chasing one magic fold, good designers ensure the top of the page works on the smallest common screens too. The takeaway is not 'cram everything into 600 pixels' but 'make sure the essentials are visible first, whatever device someone is using.'
What should you put above the fold? #
The first screen should answer three questions fast: what you offer, why it is worth their time, and what to do next. In practice that usually means a clear headline stating your core value, a supporting line or two, a relevant image (often the /wiki/what-is-a-hero-section), and one primary call-to-action, a 'Call Now,' 'Book Appointment,' or 'Get a Quote' button. For local businesses, adding your city or service area helps immediately, 'Trusted HVAC Repair in Denver' tells visitors they are in the right place. Trust signals like a rating, a years-in-business badge, or a recognizable certification can also earn their spot up top. What you should avoid is clutter: trying to fit everything above the fold buries the one message that matters. Focus beats density here. Our /services/conversion-optimization work frequently sharpens the above-the-fold area first, because improving that single screen often lifts results across the whole page. Decide the one thing you most want a visitor to understand and do, and lead with it clearly.
Should everything important be above the fold? #
No, and believing so is a common and costly mistake. The old fear was that anything below the fold never gets seen, so owners tried to cram every selling point, phone number, and offer into the first screen, producing a cluttered mess. Modern data tells a different story: users scroll readily, especially on mobile where scrolling is natural. Content below the fold absolutely gets viewed when the top screen gives people a reason to continue. The better strategy is to make the first screen compelling enough to invite scrolling, then unfold your story, services, proof, and details, in a logical sequence down the page. Think of above the fold as the hook, not the whole message. A focused hero with room to breathe, using good /wiki/what-is-white-space, outperforms a stuffed one. So put your single strongest message and action up top, and trust a well-designed page to carry the rest as visitors move down. Overloading the fold usually lowers conversions, not raises them.
How does above-the-fold content affect SEO and speed? #
Above-the-fold content matters technically, not just visually. Google measures how fast the visible part of a page renders through Core Web Vitals, especially Largest Contentful Paint, which tracks when the main above-the-fold element (often the hero image or headline) becomes visible. A heavy, slow-loading hero hurts this score and can drag down rankings, which is why we cover it in /wiki/website-speed-guide. If your big hero image is unoptimized, visitors stare at a blank screen while it loads, and many leave before it even appears. Optimizing above-the-fold assets, compressing the hero image, prioritizing its load, and avoiding layout shifts, improves both user experience and search performance. This is core to our /services/speed-optimization work. You can check how your current page's top-screen performance stacks up using our /tools/website-grader. So above the fold is doing double duty: it shapes the human first impression and it is exactly the region search engines scrutinize for speed, making it worth getting right on both fronts.
How do you design for the fold across devices? #
Because the fold varies, designers plan the top of the page to work on the smallest common screens first, an approach often called mobile-first. They ensure the headline and primary button appear without scrolling on a typical phone, then let the layout expand gracefully on larger screens where more fits naturally. They avoid oversized hero sections that push the call-to-action out of view on short screens, a frequent problem where a beautiful full-height image looks great on desktop but hides the button on a laptop or phone. Testing on real devices matters, because emulators do not always match reality. Designers also consider that browser toolbars eat into the visible area on mobile. Getting this right is part of every /services/web-design and /services/website-redesign project we take on. The goal is consistency: whatever device a local customer uses, the essential message and the way to contact you should be visible or nearly visible the moment the page loads, so nobody has to hunt for how to reach you.
Common above-the-fold mistakes local businesses make #
The most common mistake is a vague headline, a slogan or company name instead of a clear statement of what you do and where. A visitor should never have to guess whether they are on the right page. Another is hiding the call-to-action: no visible phone number or button up top, forcing people to scroll to figure out how to contact you. A third is the giant full-screen hero image that pushes everything below the fold, so the top screen is all picture and no substance. Slow-loading heroes are another killer, covered in our /services/speed-optimization work, because a blank first screen makes people leave before the page even appears. Cluttering the fold with too much is just as harmful as saying too little. Finally, many local sites forget to state their location, missing an easy trust and relevance win. Fixing these is usually straightforward, and it is often the highest-return improvement we make, which is why our /services/conversion-optimization projects almost always start by sharpening the first screen visitors see.
FAQ
Is there an exact pixel height for the fold?
No. The fold varies by device, browser, and window size, a desktop monitor shows far more than a phone, and even phones differ. There is no universal line. Instead of targeting a fixed height, designers ensure the key message and call-to-action stay visible on the smallest common screens, so the essentials appear first on any device.
Does content below the fold get seen?
Yes. Modern users scroll readily, especially on mobile, so below-the-fold content is viewed when the top screen gives them a reason to continue. The old belief that nothing below the fold matters is outdated. Make the first screen compelling, then unfold your services, proof, and details in a logical order down the page.
What should go above the fold on a local business site?
A clear headline stating what you offer and where, a supporting line, a relevant image, and one primary call-to-action like Call Now or Book Appointment. Including your city or service area helps instantly. Trust signals such as a rating or years in business can earn a spot too. Avoid clutter, focus beats density up top.
Does above-the-fold content affect SEO?
Yes, indirectly through speed. Google's Core Web Vitals measure how fast the main above-the-fold element renders via Largest Contentful Paint. A slow, heavy hero hurts that score and can affect rankings. Optimizing top-screen assets improves both user experience and search performance, which is part of our /services/speed-optimization work.
Should I cram everything important above the fold?
No. Overloading the first screen creates clutter and buries your key message. Put your single strongest message and one clear action up top, give it room to breathe, and let a well-designed page carry the rest as visitors scroll. Focused, uncluttered heroes consistently outperform stuffed ones for conversions.
Why do visitors decide so fast based on the fold?
People form impressions of a web page in a fraction of a second, and above-the-fold content is what they see first, often all they see before deciding to stay or leave. If that first screen clearly answers what you offer and what to do next, they stay. If it is confusing or generic, they bounce.
Was this helpful?