What is below-the-fold website content?
“Below the fold” refers to the part of a website that can only be seen after scrolling down. This type of content appears below “above-the-fold” content, which is immediately visible to the user.
This terminology (rightly) suggests that the content below the fold is less important than above-the-fold content.
Below the fold: the history
The term “below the fold” originates in old-school print journalism.
Newspapers are so large that they’re always folded when on display at newsstands. Historically, editors would put the most important, eye-catching headlines and photos above the (literal) fold. It was a strategy used to capture the attention of passersby and get them to buy a copy of the paper.
In the era of the Internet, this terminology—and the idea behind it—have remained useful and influenced web design for decades.
Why does below-the-fold content matter?
As mentioned above, everyone puts emphasis on having great content above the fold.
This makes sense… as a website owner, you only have 8 seconds to catch your visitor’s attention. This means your above-the-fold content really has to “hook” your visitor, otherwise they’ll never scroll down to your below-the-fold content.
However, that doesn’t mean that you can slack with your below-the-fold content!
Instead, use this space to expand on what interests your visitors and make a longer pitch for your products. When people get below the fold, it means they’re interested in your products or offers on some level, so give them the additional information they need and keep it clear and digestible.
How do web designers measure what ends up below the fold?
The fold of the website is always drawn as the line at the bottom of the screen. However, exactly where the bottom of the screen lies depends on the device the visitor is using. Desktops, mobile devices, and tablets all have different screen sizes and resolutions, which means marketers and designers have to be careful about their content placement.
Generally, most web designers agree that the fold line is approximately 1,000 pixels wide and 600 pixels tall. This is the most common configuration for a monitor/browser combination of 1024 x 786 pixels.
However, you shouldn’t just use this line and forget about all other devices. For example, you don’t want your slogan or unique selling point to be cut off on mobile devices (with half above and half below the fold). Make sure to check how your website looks on lots of different devices.
Below-the-fold web design tips
Here are some tips and tricks for below-the-fold content.
1. Avoid too much content
Packing too much content into the below-the-fold section of your website can compromise the digital experience. Website visitors don’t want to have to pause to read big blocks of text or scroll through three different slideshows to find the relevant content they’re looking for.
Instead, you should focus on minimalism and elegant designs for your below-the-fold content. Make sure the primary focus of your content is always clear, and use responsive design to make navigation easy.
2. Hint that there’s more to discover
If you really want to increase the visibility of your below-the-fold content, you should provide a suggestion above the fold that indicates there’s important content below. The easiest way to do this is to place an arrow pointing downwards just above the fold line.
3. Don’t use a “false bottom”
A false bottom is a “fold line” that—usually as a result of layout/design choices—makes it appear that the user has reached the end of the page when in reality they haven’t. This means decreased visibility for whatever actually is down there, since the user won’t know to scroll down.
If one or more of your calls-to-action is below the fold, this will hurt your conversion rates.
