Below the fold – everything you need to know
First impressions play a crucial role in our culture. This is why it has become a key factor in website design and content layout. What is “below the fold,” how does it differ from “above the fold,” and what function does it serve in UX design? We explain.
What is below the fold?
Below the fold refers to the section of a webpage that becomes visible only after scrolling.
It usually contains less important content, serving as a supplement to the main message. It is the opposite of above the fold – which refers to the always visible, top part of a webpage.
The term “below the fold” comes from journalistic jargon, in which folding a newspaper in half divided the sheet into the “above the fold” and “below the fold” parts. The upper part of the newspaper has always been used to place information that is intended to be emphasized in the message.
This division has also found its application on websites. It is precisely in the above the fold section that menus, advertisements, slogans, contact information, and call to action (CTA) most frequently appear.
What is the difference between below the fold and above the fold?
We can distinguish several significant differences between below and above the fold.
Visibility
The main difference between below the fold and above the fold lies in the visibility of these two sections. Above the fold appears right after the page is loaded, while only engaged viewers who want to familiarize themselves with the entire website reach the below the fold section.
Resolution
Due to various types of devices that users use, below the fold and above the fold also differ in resolution. This factor is of great importance in designing responsive websites.
Positioning
Content placed above the fold will also rank better in search results than content placed below the fold. A good solution is to introduce an H1 header with a keyword and a so-called breadcrumb – an extended path to access the location of the viewed element.
Attention recipient
Many studies confirm that the above the fold section captures more attention from recipients than below the fold because it does not require any additional actions. The well-known principle of the inverted pyramid states that the most important information should be placed at the beginning.
However, one should not exaggerate with the number of advertising links in the above the fold section. Since 2012, Google has limited visibility to pages that contain too much advertising material in the top part of the page.
See also
What does “below the fold” mean?
The content below the fold, despite seemingly less importance, also influences the overall image of the entire page. A viewer who takes the effort to thoroughly browse the website will seek consistency in every element of it.
In the case of a lack of balance between what is visible and what is hidden, the user may, at best, give up further browsing of the website. This will impact website engagement statistics such as average session duration, unique views, or bounce rate.
Despite being placed in the background below the fold, there is still space for conveying information. Depending on the needs, the remaining part of the page can include additional information about products and services, present user reviews, and even serve as an advertising function.
To assess how users react to a specific content layout, A/B tests or heatmap programs like Hotjar, CrazyEgg, Smartlook, or Mouseflow are often used.
Elements below the fold
The layout below the fold is only limited by the effect we want to achieve.
It will accommodate both text, graphics, and videos. The main challenge remains establishing contact with the recipient and maintaining their engagement. Here are a few elements that can make the layout of the page more attractive.
Clear content layout
Regardless of how many types of content are found in the below the fold section, it is worth ensuring its accessibility. Clear layout, space for each element, and catering to user needs are just a few criteria that can be taken into account.
Important information
Some information, especially those resulting from user experience, can provide invaluable knowledge about a product or service. Including a few user recommendations, customer reviews, or frequently asked questions (FAQ) sections encourages many people to stay longer on the website, which in turn leads to future conversions.
Interactive elements
The diversity of information assimilation styles is associated with different user needs in this area. For many people, textual content may be inaccessible or not engaging enough. Below the fold is the perfect place for interactive forms of communication, such as short videos, infographics, or social media news plugins. Technological advancements provide increasingly more possibilities in this regard.
Summary
- Below the fold is a part of a webpage that is accessible after scrolling down the page.
- The size of the below the fold and above the fold sections depends on the device and screen resolution.
- Content above the fold is better positioned in search results.
- A well-designed below the fold contributes to the overall consistency of the webpage and translates into better user experiences.
- To ensure high-quality below the fold, it is worth including important information for the user, maintaining a clear layout of content, and using interactive content.
Leave a Reply