Below the fold
What is below the fold?
The term ‘below the fold’ refers to the portion of a webpage that a user must scroll to see. A holdover from newspaper publishing, the term ‘below the fold’ was coined when there was an actual physical fold in the middle of the page. ‘Above the fold’ was anything on the top half and ‘below the fold’ was anything underneath.
The content that was deemed less important was traditionally placed below the fold, since it was mostly invisible when displayed on a newsstand.
In the 1990s as publishing moved onto the web, the term ‘below the fold’ remained. Still used in web design today, the term now refers to content located below the bottom of a browser window, or approximately 600 pixels from the top of the page.
Why is below the fold important?
Placement of content on a webpage affect how many users interact and engage with it. Below the fold content is hidden to the user when the page first loads and if they leave the page before scrolling, they will never see it.
Data indicates that the placement of ads and content below the fold on a webpage dramatically reduces its likelihood of being viewed.
According to a popular Google study, advertisements above the fold had about 73% viewability, whereas ads located below the fold had 44% viewability. In the advertising world, an ad that is considered a ‘viewable impression’ if at least 50% of its pixels appear on a user’s screen for at least one second.
Because of its decreased visibility, ads that are placed below the fold typically generate less ad revenue than ads that appear at the top of the page. Companies that sell advertising on their websites typically charge a discounted price for placement below the fold because of its lower visibility.
How is below the fold measured?
It is impossible to define an exact placement for the fold on a webpage, because its precise location can change according to screen resolution, as well as browser and screen sizes for thousands of phones, tablets and computer monitors.
When determining an average fold placement, most web designers still agree that the fold line is at approximately 1,000 pixels wide and 600 pixels tall.
This is the best-case scenario for the most common monitor/browser combination of 1024x786 pixels, with the browser window maximized and no installed toolbars at the top, pushing the content down.
Your website’s audience analytics will indicate the most common screen dimensions for your site’s visitors.
Considerations for mobile
For many years, the most common dimension was 1024x768. With the rise of mobile devices in popularity, new dimensions are becoming increasingly common, such as 320x568 and 360x640.
The increasing usage of mobile devices for web browsing has further complicated the concept of designing for the fold.
Mobile devices offer a huge variety of screen sizes, and the user needs for each of these devices and screen dimensions has its own unique set of requirements and limitations.
An additional consideration is that users on phones generally browse in portrait mode rather than in landscape mode, while users on tablets and computers generally browse in horizontal mode.
With so many people accessing webpages across such a variety of devices, current web design practices entail using responsive design: making use of flexible layouts, images and cascading style sheets.
With responsive design, there is no fixed layout for a page, and content reflows to a screen of any size. Responsive webpages react or “respond” to the environment in which they are consumed or browsed.
While the important content still needs to be higher on the page, nowadays, the pages should be designed to entice users to scroll so that they don’t miss important content.
Studies have shown that mobile users are more likely to scroll than desktop users, but as mobile usage has grown some of the mobile scrolling behavior has carried over to desktop as well, and many modern website designs incorporate “infinite scrolling” features.
Tracking website usage
Because of the impact on engagement and conversions that content placement can have, it is important to monitor how users interact with your website.
Analytics platforms such as Google Analytics can provide information about what percentage of your visitors are using desktop vs mobile devices, as well as the average screen size of your users.
Heat map programs such as CrazyEgg can be useful in determining scroll-depth (how far down your page users scroll) as well as where your users are clicking on a page.
Once you understand how users are navigating your site, you can then begin A/B testing and experiment with different layouts in order to improve your user experience and maximize your conversion goals.
