Above the Fold

 

Above the fold: Short summary

In web design and online marketing, the term above the fold is used to describe the area of a website that a visitor can see at first sight without scrolling.

What is Above the fold: Detailed summary

Based on its graphic design, a website’s content can be divided into two categories: above the fold and below the fold. Above the fold refers to the part of the page visible immediately after the call to action. Below the fold is the area the user must scroll down to reach.

These two areas play an important role in page design as well as how the page communicates. Many designers and marketers believe or assume that content above the fold has a much greater visibility because most users generally do not scroll down to the bottom of a page. They therefore try to place the most important content and page elements as high up the page as possible.

In addition, there are different opinions about the actual scrolling behavior of users. Studies such as those by Chartbeat and eResult have arrived at different conclusions. In addition, as usability guru Jakob Nielsen noted in 1997, user behaviour also tends to change over time. Users will always acquire new behaviors, react to new usability concepts, and change their usage habits – not least as a result of technical innovations such as those offered by touchscreens or smartphones.

How much, and what type, of content should be placed above the fold is also dependent on the content itself and on the character of the website. Therefore, a blog article, a landing page or the product page of an online shop may all have different approaches to above and below the fold material.

Today, the relative importance of above the fold content seems to have diminished. Many websites now use the One-Pager approach, whereby users are incrementally presented with small amounts of different content on a single page but must scroll down further to access the remainder of the content.

The origins of the term ‘above the fold’

The phrase ‘above the fold’ comes from the print industry and literally does mean “above the fold”. It describes the section of a classic newspaper which lies above the fold – i.e. the horizontal bend in the newspaper. Generally, this is the first thing a customer will see when a newspaper is on the shelf. This area has traditionally been used to display content designed to make a potential customer curious, tempting him to purchase. This ‘above the fold’ principle has now been transferred to websites, where it also describes the first part of the page to become visible.

User management techniques

Users have become accustomed to One-Pager formats and scrolling. Nevertheless, many experts still believe the visibility of content decreases as it is placed further down the page. To ensure that users really do see all of the website content, designers and layout artists still resort to some well-worn tricks of the trade:

– Reaching the reader at first glance: The best way to encourage users to scroll is probably to include some hints about the rest of the page within the content at the top of your website. The initial content should not only give an overview of what the user can expect but also arouse interest and curiosity.

– Referencing the following: Clear references to what follows next on the page can help to induce the reader to scroll. Arrows pointing downwards, or teasers announcing the next paragraph, will make the page organization and navigation clear to the user.

– Table of contents/ Anchor links at the top: You can also include a table of contents or other anchor links at the top of the page to lead the reader to content below the fold. One-Pager websites in particular use their navigation to map various contents at the top of the page and guide users to the desired location at the push of a button.

– Overlapping content: Overlapping content – i.e. content which obviously extends beyond the visible portion – tells a reader that the website offers additional content that can be reached by scrolling. Ideally, the chosen content should make the reader curious. For example, photographs positioned above the fold can arouse the user’s interest by initially concealing a crucial image caption. Likewise, texts in which some of the content is below the visible range can also instigate scrolling. Many websites also use multiple columns arranged in an offset fashion to make the user scroll more and more.

The Hubspot website entices the reader to scroll by simply clipping the graphic at the bottom of the screen.

– Pagination: Pagination is actually not a method of displaying website content to the reader because it divides the content into different pages. Nevertheless, by splitting the content and inserting a clever announcement at the beginning (e.g. via a table of contents), an appropriate connection can be achieved by informing a user about the extra website content beyond what he can see. Some publishers distribute their blog articles across several pages, which has the advantage that these pages also contain more advertising and/or further content. However, pagination also increases the risk that users may bail out before accessing the rest of the site.

How to determine the visible range

Normally, it is the website designer who determines which areas are visible on what devices. Generally, this is precisely defined in terms of pixel data: For example, the user views an area of 1280×720 px on a desktop PC monitor while the corresponding tablet screen default size is 1024×768 px. In addition, design elements can also influence the available viewing area, so web operators can enlist the help of colors, shapes, and movement to try to make users more aware of specific page content.

However, what actually captures the attention of page visitors, and exactly how users perceive and use a website, can only be determined by testing. Website operators can access different tools to measure user behavior, including:

– Heatmaps/ Clickmaps: Heatmaps and Clickmaps reveal a user’s clicks and mouse moves. The fact that many users move the mouse unconsciously makes it more difficult to interpret this data, but it does allow some conclusions to be drawn. You can use heat- or clickmaps to identify where a user expects a button or any points where he incorrectly assumes a button might be.

– Scrollmaps: Scrollmaps show how far a user scrolls down a page and for how long this behavior occurs. Using a scrollmap, website operators can determine whether content requires optimization or just needs to be placed further up the page.

– Eye tracking: Eye tracking records a website visitor’s eye movements when viewing a page. This data reveals what a user views on a website, how often, and for how long. Though eye tracking is relatively complex, it generally produces more reliable evidence than heatmaps or scrollmaps since their tracking of user behavior is less discriminating.

Any methods used to measure web usage present various challenges, from correct implementation through to observance of data protection regulations and accurate interpretation. However, different providers such as CrazyEGG or Mouseflow are specialists in these areas and can offer appropriate services.

Above and below the fold: Which content belongs where?

Every website has its own parameters and priorities: It will have its own structure, target audience, and access options, all of which help to distinguish it from dozens of similar sites. Although there are some basic rules covering usability and design, it would be difficult to generalize about the right content for above and below the fold. Many still suggest that important content should be placed high, but one-pagers and longer sites also work well on many websites. There can be no categorical statement defining which content belongs where.

For each website, it’s therefore a matter of test, measure, and analyze. The right content and the best possible usability can only be identified via a well-thought-out optimization process. Furthermore, good content and perfect usability are two of the real fundamentals for achieving your conversion goals. In principle, conversion optimization is one of the most important prerequisites for a successful website.

An optimization strategy employs website analysis, measurement and optimization in recurring cycles. This allows the website operator to analyze the content and structure of a page, derive operating hypotheses, make page adjustments, and test which variant works best. This procedure is equally important for both above and below the fold content.

Above the fold from an SEO perspective

The above the fold area also plays an important role in successful search engine optimization. On the one hand, Google is committed to high usability and valuable content. This search engine therefore responds rather negatively to (excessive) advertising displayed above the fold and tends to downgrade the corresponding pages.

On the other hand, a website’s first impression often determines whether a user stays on the page or jumps back to the SERPs results. Content and design above the fold are very important because a negative back-to-SERPs or bounce rate likewise sends negative signals to Google. So how exactly the content above the fold should look is also not a matter for sweeping generalizations.

Conclusion

Above the fold is an important principle in web design. It describes the part of a website that can be seen directly under the page’s call to action. Even though most studies now assume that users (to a certain extent) are used to scrolling, many marketers are convinced that important content still belongs at the top. However, more and more websites are also turning into One-Pagers, where content is presented via a ‘longer’ website which a reader scrolls through or accesses via targeted anchor links.

It’s hard to generalize about what content belongs above and below the fold. Instead, website operators should test and optimize to locate the right content in the right places.