Above the fold

In web design as well as online marketing, the term above the fold describes the area of a website that is displayed to the visitor at first glance, i.e., it does not become visible only by scrolling.

Detailed explanation:

Websites can be divided into the categories above the fold and below the fold based on their graphic design. Above the fold refers to the part of the page that is visible immediately after it is called up. Below the fold is the part that the user reaches by scrolling down.

These two areas play an important role in page design and communication. Many designers and marketers assume, or assumed, that above-the-fold content has much greater visibility because users don’t scroll to the bottom of a page, or only to a limited extent. They therefore try(ed) to place the most important content and elements of the page as high up as possible.

There are different opinions about whether and how much users actually scroll. Studies such as those by Chartbeat repeatedly come to different conclusions. In addition, user behavior changes over time, as usability guru Jakob Nielsen noted in 1997. Users learn new behaviors, react to new usability concepts and change their usage habits, not least due to technical changes such as touchscreens or smartphones.

How much and which content should be placed above the fold also depends on the content and type of website. There are different approaches as to what a blog article, a landing page or the product page of an online store should display above and below the fold.

Today, the great importance of content above the fold seems to have diminished. Many websites now use one-pagers, for example, where users are presented with different content in small chunks on a single page, but have to scroll down further to see it.

Origin of the name Above the fold

The term above the fold originates from the print industry and means “above the fold”. The term thus describes the part of a classic newspaper that lies above the fold, i.e. the horizontal crease of the newspaper. Customers usually notice this part of the newspaper shelf first. This is where the content should be placed that arouses the potential customer’s curiosity and thus tempts him to make a purchase. The above-the-fold principle has been transferred to websites and also describes the part of the page that is visible first.
Means of user guidance

Users have become accustomed to one-pagers and scrolling. Nevertheless, many experts still believe that the visibility of content decreases the further down it is placed. To ensure that users really see all the content on a website, designers and layouters therefore resort to a few tricks:

Engage the reader at first glance

Arguably, the best way to get users to scroll is to get them in the best possible mood for the rest of the page with content at the top of the site. Thus, the content should not only give an overview of what awaits the user further down, but also pique their curiosity or interest at the same time.
Clues to the following content: Clear hints about what follows next on the page can help entice the reader to scroll. Arrows pointing down or teasers announcing the next paragraph make it obvious to users that the page will continue and with what.
Table of contents/anchor buttons at the top of the page: Hints at the top of the page can also include tables of contents or other anchor links that lead the reader to content below the fold. One-page websites in particular use their navigation to map the various content on the page at the top of the page and direct the user to the desired location at the click of a button.
Overlapping content: Overlapping content – content that obviously extends beyond the edge of the screen – indicates to a reader that a website offers additional content that they can reach by scrolling. Ideally, the content is chosen to arouse the reader’s curiosity. For example, photos that run across the fold can pique a user’s interest by initially obscuring a crucial image message. Similarly, text that is partially below the visible area can encourage scrolling. Many websites also use multiple columns that are staggered to get the user to scroll further and further.

Website Hubspot with graphic that runs across the fold

Hubspot’s website entices the reader to scroll by merely cropping the graphic at the bottom of the screen.

Pagination: pagination is not actually a method of showing a reader the content of aWebsite, as it splits the content into different pages. Nevertheless, by splitting the content, cleverly announcing it at the beginning (for example, with a table of contents), and linking it appropriately, it is possible to get a user to notice a larger portion of a website’s content. Some publishers distribute their blog articles over several pages in this way. The advantage of this is that several pages can also contain more advertising or further content. However, pagination usually also increases the risk of users bouncing before the end of the page.

How to determine the visible area

Usually, the designer of a website defines which area is visible on which device. As a rule, this is determined by precise pixel specifications: For example, on the monitor of a desktop PC, the user sees the area of 1280 x 720 px, while on the tablet the image is adjusted to 1024 x 768 px. In addition, design elements can be used to influence eye tracking. With the help of colors, shapes or movement, webmasters can try to get users to pay more attention to specific content on a page.

However, only tests can determine where a visitor’s attention is actually directed and how users perceive and use a website. With the help of various methods, website operators can measure user behavior. These include:

Heatmaps/clickmaps: Heatmaps and clickmaps make it visible to which positions on a page the user moves his mouse or which places he clicks. The fact that many users also move the mouse unconsciously makes the interpretation of the data more difficult, but also allows further conclusions to be drawn. With the help of heat or click maps, it is possible to determine, among other things, where a user expects a button to be or where he or she mistakenly assumes that there is a button at that location.

Scrollmaps: Scroll maps show, for example, how far a user scrolls down a page and where he stays and for how long. Using a scroll map, website operators can determine, for example, whether content needs to be optimized or moved further up the page.
Eye tracking: With eye tracking, the eye movement of the website visitor is recorded and localized on the page. This makes it possible to determine what a user looks at on a website, how often and for how long. Eye tracking methods are relatively complex, but generally allow more conclusions to be drawn than heat maps or scroll maps, as they can measure user behavior in a more unfiltered way.

All methods for measuring website usage bring with them various challenges, from correct implementation to data protection regulations to correct interpretation. In the meantime, various providers such as CrazyEGG or Mouseflow have specialized in these areas and offer the appropriate services.
Above and below the fold: Which content belongs where?

Every website is built differently: it has a different structure, a different target group, different access options and differs from other sites in dozens of other ways. Although some basic rules of usability and design exist, it is difficult to make a general statement about the right content Above and Below the fold. There is still a lot of evidence to suggest that important content should be at the top, but one-pagers and longer sites also work great for many websites. It is therefore difficult to make a firm statement about exactly which content belongs in which position.

Therefore, the following applies to every website: test, measure, analyze. Because only with the help of a well thought-out optimization process can it be ensured that a user finds the right content and is offered the best possible usability. And good content and perfect usability are two of the foundations for achieving your own conversion goals. Conversion optimization is therefore one of the most important prerequisites for a successful website.

An optimization strategy includes the analysis, measurement and optimization of a website in a recurring cycle. The website operator analyzes the content and structure of a page, derives theses from this, adapts the page and tests which variant works better. This procedure applies to both above and below the fold content.

Above the fold from the SEO point of view

Above the fold also plays an important role in successful search engine optimization. On the one hand, Google is committed to high usability and valuable content. The search engine provider tends to react negatively to (too much) advertising that is displayed above the fold, and tends to rate corresponding pages worse.

On the other hand, the first impression of a website often determines whether a user stays on the page or jumps back to the SERP. The content and design above the fold are therefore very important, as a negative back-to-SERP or bounce rate sends negative signals to Google. How exactly the content above the fold looks, however, cannot be generalized here either.

Above the fold is an important principle in web design. It describes the part of a website that can be seen directly after the page is called up, even before it is scrolled down. Even though most research now assumes that users are used to scrolling (to a certain degree), many marketers are convinced that important content belongs further up the page. But more and more sites are also moving to one-pagers, where content is presented on one long web page that a reader scrolls along or targets through anchor links.

It’s hard to say across the board which content belongs above and which below the fold. Instead, website operators must test and optimize in order to place the right content in the appropriate places.


SEO-CONTENT ✔️ Blog Content ✔️ SEO Content Writing ✔️ Article Writing ✔️