Landing Page FAQ: What is "Below The Fold" and Why Does it Matter?
“Below the fold” is a term used to describe content below the scroll window on a website. This term comes from the print days when everyone read newspapers that arrived folded in half. Everything written on the bottom half was below the fold, so editors need catchy bold headlines to grab a reader's attention.
When you land on a website, all the content seen once you begin scrolling downwards is the content “below the fold”.
For the complete answer to "What is ‘Below the Fold’ and why is it important?" check out our article 5 Opt-in Page Examples That Work.
Why does "below the fold" matter?**
This matters because the content above the fold must be good enough to entice a reader to scroll. If the content above the fold is boring or not what the user is looking for, then they might leave the page.
It only takes a few seconds on average for a user to decide if your website contains the content they’re looking for. Obviously, any inconsistencies in their expectations or misinformation will not make them scroll below the fold.
The fold size varies between devices, mobile, desktop, or tablet, so what content is displayed will differ amongst devices.
How can we design for this?
Put the important stuff at the top of your page of course!
On a landing page this includes your call to action, headline, subheadline, and your lead magnet or offer. Whatever you want the visitor to see and notice first should be at the top of your landing page.
Let’s look at an example from Aweber:
This landing page came via a Facebook Ad. The offer is to learn how to grow your business with email marketing. All the information you need to know along with a fancy image is above the fold. Below the fold there is a customer testimonial, contact information, and social media links.
Aweber was smart to keep the information concise and simple. The call to action is precise and action oriented. Note the tiny live chat button on the right hand side for people who want to ask question immediately. Because Aweber has a moderate amount of information, they chose to keep the design simple as to not crowd the space above the fold.
To get started building a landing page just like AWeber's above, click here
When designing your landing pages keep in mind your information hierarchy. If you have a lot of important information, try to keep things simple and not overwhelm the visitor. Start with putting the most important information at the top and don’t forget to continually test what works best. If the visitor doesn’t see what they came for they are likely to bounce faster. It would be wise to present the most important information as quick as possible and use the content below the fold to get your point further across.