Above the fold
‘Above the Fold’ refers to the area of a website that is visible immediately after it loads, without users having to scroll. The content that appears there can influence the first impression, as well as navigation and user guidance.
This is not a strictly defined area with a specific pixel height. Depending on screen size, browser window, device and page layout, the so-called ‘fold’ is located at a different position. The term therefore always describes the currently visible section of a website.
The essentials of ‘above the fold’ at a glance
- 'Above the Fold' is the area of a website that is visible without scrolling.
- The term originally comes from the newspaper industry.
- There is no fixed ‘fold’ in pixels, as screen sizes and viewports vary.
- Key content such as the headline, page context and navigation should be comprehensible as early as possible.
- For SEO, ‘Above the Fold’ is not an isolated ranking factor, but it can be relevant in the context of user experience, accessibility and performance.
What is ‘above the fold’?
The English term ‘Above the Fold’ essentially means ‘above the fold’. In web design, it refers to the part of a website that visitors see immediately upon loading the page. Anything that only becomes visible after scrolling is, accordingly, ‘below the fold’.
For websites, this distinction is particularly relevant because the first visible area provides the initial orientation to the content. Users can see there which page they are on, what topic or offer is being covered, and what further content they can expect.
‘Above the Fold’ is not a single design element, but an area of the current viewport. It may, for example, contain a navigation bar, a heading, explanatory text, an image or a call to action.
Where does the term ‘above the fold’ come from?
The term originally comes from the newspaper industry. Folded newspapers are often laid out or presented in such a way that only the top half of the front page is visible. Important headlines and images were therefore typically placed above this fold. This principle was later applied to websites. Here, too, the immediately visible area receives special attention. Whilst the fold of a newspaper is physically fixed, the fold of a website varies depending on the device and the respective viewport.
Above the Fold and Below the Fold – what’s the difference?
‘Above the Fold’ and ‘Below the Fold’ do not refer to different types of content, but rather to its position within a page.
- ‘Above the Fold’ refers to everything that users see when the page first loads, without having to scroll.
- ‘Below the Fold’ begins where further content only becomes visible after scrolling.
Important information does not necessarily have to be confined to the initial viewport. Extensive texts, product details, testimonials or FAQs usually require more space. What is crucial is that the opening section provides sufficient guidance and that the rest of the page’s content follows on logically.
Why is the ‘above-the-fold’ area important?
The first visible section influences how quickly visitors can grasp the content of a website. It should become clear within a short space of time what the page is about and what purpose it serves. This does not mean that the ‘above the fold’ area should contain as much information as possible. Too much text, too many buttons, images or navigation elements can make it difficult to find one’s way around. The selection and prioritisation of content is therefore more important than its sheer volume.
Attention and first impressions
The ‘above the fold’ area often serves as the visual and content-based introduction to a website. The design, headline, navigation and imagery already convey a first impression of the page’s theme and structure. However, a large hero section does not automatically fulfil this role. A visually striking image is no substitute for a clear message. If an image takes up a lot of space without providing any additional context, the content that is actually relevant may be pushed further down the page.
Orientation and conversion
On landing pages or service pages, the first viewport can also be relevant for conversion. A clear headline, a comprehensible value proposition and, where appropriate, a suitable call-to-action can help users identify possible next steps. However, a button does not necessarily have to be fully visible ‘above the fold’ on every website. For more complex offers or those requiring further explanation, additional context may be needed initially. The most appropriate position therefore depends on the page type, content and usage context.
What should be included in the ‘above the fold’ section of a website?
The content that makes sense to include in the first viewport depends on the type of page and the specific search or usage intent. A glossary entry requires a different introduction to an online shop, a B2B services page or a campaign landing page. Typically, a clear headline should make it obvious early on which topic or offer the page covers. In addition, a short explanatory text, navigation elements or a call to action may be useful.
Headline and value proposition
The headline is often one of the most important text elements in the first viewport. It should state as specifically as possible what visitors can expect on the page.
On commercial pages, supplementary text can help to contextualise the offer or its benefits more precisely. Above all, it is important that the message remains understandable and does not have to be deduced from several design elements.
Call to Action
A call-to-action can be useful ‘above the fold’ if users already have enough information at this point to take action. This may be the case, for example, with clearly defined enquiries, well-known offers or focused landing pages.
For content that requires explanation, however, an immediate call to action is not necessarily required. A visible button is not a universal hallmark of a good ‘above the fold’ area.
Other possible elements
Depending on the website, reviews, certificates, client logos or other navigational elements may appear in the first viewport. However, they are not a necessary component of the ‘above the fold’ area and should not overshadow the page’s central message.
Images and graphics can also help engage visitors. However, a hero image is not a prerequisite either. A visual element is particularly useful when it complements the content, showcases a product or helps make a point clearer more quickly.
How big is the ‘above-the-fold’ area?
There is no universally applicable height in pixels for the ‘above the fold’ area. Even just two desktop users may see different sections of the same website due to variations in monitor size, screen resolution or browser window size. In addition, browser toolbars, headers, cookie notices and other interface elements affect the actual available space. A universal value such as ‘600 pixels is above the fold’ cannot therefore be meaningfully applied to all websites and devices.
Larger desktop screens usually offer more horizontal and vertical space. However, not all visitors use the same resolution or browser window size.
The fold is therefore variable on the desktop too. Responsive layouts adapt content and layout to suit different viewports.
On smartphones, the available space is narrower. At the same time, browser toolbars, cookie notices or extensive headers can take up part of the visible viewport.
As a result, large images or multi-line navigation elements, for example, can mean that key content only appears after scrolling. On small viewports, therefore, it is essential to prioritise content particularly clearly.
Is ‘above the fold’ important for SEO?
‘Above the Fold’ is not an isolated SEO ranking factor that can improve rankings solely through the positioning of specific content. Search engines take the entire page into account, not just the first visible section. Nevertheless, there are links to other quality aspects. Main content should be easily accessible and not overshadowed by distracting elements. Loading speed and visual stability can also influence a page’s user experience. Particularly large images or other media within the initial viewport may be technically significant if they take a long time to load. In this context, the Core Web Vitals metric ‘Largest Contentful Paint’ (LCP), amongst others, can play a role.
For SEO, therefore, it is not crucial whether a specific keyword or button is positioned ‘above the fold’. What matters is that key content is presented in a way that is clear, accessible and technically reliable.
Common mistakes in the ‘above-the-fold’ area
- Unclear key message: Visitors see an elaborately designed landing page, but are unable to clearly identify the topic or what is on offer.
- Very large hero area: An image or video takes up a large proportion of the viewport and pushes key information further down the page.
- Too many elements of equal importance: Several buttons, notes or messages compete for attention.
- Designed only for large screens: On smaller viewports, the order or visibility of important content changes significantly.
- Lack of prioritisation: Navigation, images, notes and text are given similar visual weight, even though they fulfil different functions.
Not every one of these patterns is inherently problematic. Whether a design works depends on the content, the page type and the context of use.
What features might be relevant in terms of ‘above the fold’?
Which elements are appropriate for the first visible area depends on the type of page, the content and the context of use. There is therefore no universal checklist that applies equally to every website. However, certain characteristics can help to define the ‘above-the-fold’ area. These include, in particular:
- Clarity of the topic or offer: Users should be able to grasp what the page is about as quickly as possible.
- Clarity of the main heading: The heading should clearly state the central theme or content of the page.
- Visual hierarchy: Headings, text, images and other elements should be arranged in such a way that their respective importance remains clear.
- Function of images and graphics: Visual elements can support the content, but should not unnecessarily overshadow key information.
- Display on different devices: As the visible area varies depending on the viewport, the same page may appear differently on a desktop and a smartphone.
- Accessibility of key content: Important content should be accessible without unnecessary visual or technical barriers.
- Loading behaviour within the initial viewport: Large images, videos or other media can affect how quickly the visible area is fully displayed.
These characteristics are not fixed quality criteria. The appropriate weighting depends on the function of the page in question. A glossary article places different demands on the first viewport than, for example, a landing page, an online shop or an editorial homepage.
Conclusion: Above the Fold is primarily about helping users find their way around
‘Above the Fold’ describes the first visible area of a website and is therefore a key part of the user experience. Its purpose is not to fit as much content as possible into view without scrolling, but to prioritise key information in a clear and understandable way.
A clear headline, a coherent page context and a recognisable visual hierarchy are generally more important than the rigid placement of individual elements. At the same time, the layout must work across different devices, as there is no universal ‘fold’.
For SEO, ‘Above the Fold’ is not a direct ranking factor. Nevertheless, the design of the initial viewport can be relevant for user guidance, conversion and technical performance. A clear ‘above the fold’ area primarily answers three questions: Where am I, what is this page about, and what can I do next?
Frequently asked questions about ‘Above the Fold’
On websites, “above the fold” refers to the area that is visible after the page loads without scrolling.
That depends on the type of page. As a general rule, the page’s topic, offer, or purpose should be clear as quickly as possible. That’s why a clear headline and brief explanatory text are often included.
“Above the Fold” is not a standalone ranking factor. However, good accessibility of the main content, user experience, and technical performance can all be relevant to a website's overall quality.
There is no fixed pixel value. Screen size, browser window, device, and responsive design determine which part of a website is visible without scrolling.
No. A CTA can be useful there, but it isn't always necessary. For content that requires explanation, additional context may be needed first.
No. The hero section is a design element located at the top of a website. “Above the fold,” on the other hand, refers to the entire visible portion of the viewport. A hero section can fill this area completely or only partially.
