In the world of web design and online advertising, the term “below the fold” refers to the portion of a webpage that users must scroll down to see. Originating from the days of newspaper publishing, where a physical fold divided the page, “above the fold” referred to the visible content on the top half, while “below the fold” contained the content that was hidden from view until the page was unfolded.
The Evolution of Below the Fold
With the transition from print to the digital realm in the 1990s, the term “below the fold” made its way onto the web. Today, it denotes the content located below the bottom of a browser window, approximately 600 pixels from the top of the page. As users navigate websites, they often encounter this below-the-fold content after the initial page load.
The Importance of Below the Fold
The placement of content on a webpage has a significant impact on how users interact and engage with it. Below the fold content remains hidden when the page first loads. If users leave the page without scrolling, they may never see this valuable information.
Studies indicate that content and advertisements located below the fold experience reduced viewability. A well-known Google study showed that ads above the fold had a viewability rate of approximately 73%, while those placed below the fold only achieved 44% viewability. In the advertising world, a “viewable impression” requires at least 50% of the ad’s pixels to appear on a user’s screen for a minimum of one second.
Due to decreased visibility, ads positioned below the fold typically generate less revenue than those at the top of the page. Consequently, websites that sell advertising space often offer discounted prices for below-the-fold placement.
Measuring Below the Fold
Determining an exact placement for the fold on a webpage is challenging, given the variations in screen resolutions, browser sizes, and screen dimensions across devices. However, most web designers agree that a common fold line lies at approximately 1,000 pixels wide and 600 pixels tall.
To optimize your webpage for the most common screen dimensions of your visitors, analyze your website’s audience analytics. This will provide insights into the devices and screen sizes most frequently used by your audience.
Considerations for Mobile Devices
With the increasing popularity of mobile devices, new screen dimensions such as 320×568 and 360×640 have become common. Designing for the fold has become more complicated due to the wide variety of screen sizes and user preferences.
Responsive design has emerged as a solution to this challenge. By employing flexible layouts, images, and cascading style sheets, webpages can adapt and reflow to fit any screen size. This responsive behavior allows content to be accessible regardless of the device being used.
Encouraging User Engagement
While it remains essential to place critical content higher on the page, modern website design aims to entice users to scroll. Research has shown that mobile users are more inclined to scroll than desktop users. As a result, the concept of “infinite scrolling” has become prevalent, allowing users to continue discovering content as they scroll down the page.
Tracking Website Usage
Given the impact of content placement on user engagement and conversions, it is vital to monitor how users interact with your website. Google Analytics and other analytics platforms can provide valuable information about the percentage of visitors using desktop versus mobile devices, as well as their average screen sizes.
Heat map programs like CrazyEgg are useful in determining scroll-depth and identifying areas where users frequently click on a page. Armed with this knowledge, you can begin A/B testing and experiment with various layouts to enhance user experience and optimize your conversion goals.
Understanding the concept of “below the fold” is crucial for effective web design and online advertising. By strategically placing valuable content and advertisements above the fold, you can significantly increase their viewability and engagement. Embracing responsive design and considering the various screen dimensions across devices ensures that your content reaches a broader audience.
What is “below the fold”?
“Below the fold” refers to the portion of a webpage that users must scroll down to see, traditionally associated with hidden content below the visible area of a newspaper’s front page.
How does content placement affect user engagement?
Content placed above the fold is more likely to be viewed by users immediately upon page load, while below-the-fold content may go unnoticed if users don’t scroll.
Why is below-the-fold advertising less effective?
Ads placed below the fold have reduced viewability, leading to lower engagement and revenue compared to ads placed above the fold.
How can I measure the “fold” on my webpage?
While an exact fold location may vary, most designers consider an average fold line at approximately 1,000 pixels wide and 600 pixels tall.
How can I optimize my website for various devices?
Implement responsive design, which adapts and reflows content to fit any screen size, ensuring accessibility across different devices.