Newspaper editors figured this out long before the web existed. The story worth reading goes above the physical fold. Everything below it competes against the decision to flip past. On a website, the same principle applies to the first viewport a visitor sees before they scroll.
Above the fold refers to the portion of a web page visible in the browser window when the page first loads, before the visitor scrolls at all. It is the only section of the page every single visitor sees. Everything below it has to earn the scroll. The term carries over from print: a newspaper folded in half on a newsstand shows only the top half of the front page. That top half had to earn attention. The above the fold area on a website works the same way.
What is above the fold varies depending on the device, screen size, and browser of each visitor. A large desktop monitor shows far more content above the fold than a phone held in portrait mode. Designing for the fold means thinking across all of them, not just the version you see on your own screen.
Why does above the fold content matter?
Research on reading behavior consistently shows that visitors spend more time with content near the top of a page. The further down content sits, the fewer visitors reach it. This is not a failure of attention. It is a rational response to finite time. Visitors make a quick judgment about whether a page is worth reading, and that judgment happens in the first visible section.
Above the fold is where you answer the visitor's first question: am I in the right place? If the headline, image, and first few lines of copy make the answer clear, visitors scroll. If they are confused or unsure, most do not give the rest of the page a chance.
What should go above the fold?
The above the fold area has limited space and high stakes. Every element that appears there should earn its position by serving the visitor or advancing the page's goal.
A clear headline that states what the page is about or what the visitor gets from it. A supporting sentence or subheading that adds context or specificity. A visual that reinforces the message rather than simply decorating around it. A call to action that gives the visitor a clear next step if they are already convinced.
Navigation belongs above the fold. Visitors expect to find a way to explore the rest of the site at the top of the page, and a menu that is buried or hidden creates friction immediately. The article on what website navigation is covers how to design menus that work well across all devices.
What does not belong above the fold is anything that takes up space without contributing to the visitor's understanding or decision. Large decorative images with no informational value, rotating banners that delay loading, or blocks of introductory text that the visitor has to scroll through before reaching the point all waste the most valuable real estate on the page.
How does above the fold differ on mobile?
On mobile, the above the fold area is significantly smaller than on desktop. A phone screen in portrait mode shows roughly 600 to 800 pixels of height. A desktop monitor might show 900 to 1200 pixels. The same design can reveal two or three sections above the fold on desktop while showing only a headline and an image on mobile.
The practical consequence is that mobile visitors make their stay-or-scroll decision with far less information than desktop visitors see at first glance. Whatever matters most needs to fit in a smaller window. Hero sections with large background images and minimal text are a common problem: they look striking on desktop but fill the entire mobile screen with very little content before the visitor has to scroll.
Testing above the fold on a real phone matters because browser previews and desktop simulations do not accurately represent what mobile visitors see. For a full checklist of mobile considerations, the article on how to make a website mobile friendly covers what to check before going live.
Does above the fold affect page speed?
Directly. The above the fold area is the first thing the browser renders, so any resource that delays its display hurts perceived load time even if the rest of the page loads quickly.
Large hero images, web fonts that need to load before text displays, and scripts that run before the page renders all push above the fold content down. From the visitor's perspective, the page loads slowly even if the technical load time is reasonable. A blank or partially loaded above the fold area while the rest of the page catches up is one of the most common causes of high bounce rates on otherwise well-designed pages.
Keeping the hero image optimized, prioritizing above the fold resource loading, and deferring non-essential scripts are the most effective fixes. The article on what website speed is covers the technical side of loading performance and what affects it most.
Does above the fold affect SEO?
Above the fold content is a signal search engines use when evaluating page quality. Pages that load heavy advertising or low-quality content above the fold while pushing the main content down are penalized. This was a specific algorithm update targeting sites that buried useful content below large blocks of ads.
Beyond that specific penalty, above the fold affects SEO indirectly through behavior signals. Visitors who land on a page and leave immediately because the above the fold area did not give them a reason to stay generate high bounce rates and low dwell time. Over time, these signals communicate to search engines that the page did not serve the intent behind the search.
Good above the fold design also supports better heading structure. A clear headline visible above the fold, supported by a logical page structure below it, helps both visitors and search engines understand the page quickly. The article on what web design is covers how layout decisions like heading hierarchy shape the visitor experience. For the full picture on search rankings, the article on what SEO is covers the technical and content factors that matter most.
How WEMASY handles above the fold design
WEMASY's website builder templates are built with the above the fold area in mind. Hero sections are optimized for fast loading, and the visual editor lets you preview how each section appears at different screen sizes before publishing. The mobile preview shows exactly what visitors see on a phone before they scroll, so you can adjust content and layout without guessing.
See what is included at the WEMASY website builder or review plans on the pricing page.
Frequently asked questions
Is above the fold still relevant with modern scrolling behavior?
Yes. Visitors scroll more readily than they did a decade ago, but the above the fold area still carries disproportionate weight. Visitors spend more time with content near the top of a page regardless of how much they scroll. The above the fold area is where the stay-or-leave decision happens. Making it clear, fast, and compelling is as important now as it has always been. With WEMASY's website builder, you can set this up directly on your website.
How tall should a hero section be?
A hero section should reveal enough content above the fold to communicate the page's purpose without consuming the entire viewport. On desktop, a hero that fills the full screen height with only a headline and image can feel striking, but it also delays the visitor's access to actual content. A better approach is a hero tall enough to make a strong first impression while still showing a hint of content below, signaling to visitors that there is more to see if they scroll.
What is a call to action above the fold?
A call to action above the fold is a button or link placed in the first visible section of a page, giving visitors who are already convinced a way to act immediately without scrolling. Common examples include "Get started," "Book a call," or "See pricing." Not every visitor above the fold is ready to act, which is why the rest of the page exists, but having a clear action available early reduces friction for those who are.
Does every page need a strong above the fold section?
Yes, but what "strong" means varies by page type. A homepage above the fold needs to establish who you are and what you offer. A blog article above the fold needs to confirm the reader is on the right article and give them a reason to keep reading. A product page above the fold needs to show the product clearly and make pricing accessible. The principle is the same across page types: the first viewport should answer the visitor's most immediate question.
How do I test what appears above the fold on different devices?
The most accurate way is to check your own pages on real devices. Use a desktop monitor, a tablet, and a phone held in both portrait and landscape mode. Browser developer tools have a device simulation mode that gives a reasonable approximation but does not account for browser toolbars, address bars, and notification areas that reduce visible screen height on real phones. What looks fine in a browser preview often has a noticeably different fold cutoff on an actual device.