You have 8 seconds (probably less) to captivate and retain your audience. Every second and every scroll counts.
Your above the fold content needs to hook your visitors and motivate them to stay on the page. A great page with poor above the fold content is like a brilliant book with a terrible cover. Yeah, yeah—we all know you shouldn’t judge a book by its cover…but everyone still does it. And visitors will do the same thing with your email, landing page, or article.
Does your above the fold content need to be your #1 priority? Probably not. But with how much digital users jump between websites and devices, it’s important that your above the fold content encourages visitors to stay. That doesn’t necessarily mean the content needs to have a Buzzfeed-worthy headline or an irresistible CTA—but it does need to deliver on the promise that got visitors there in the first place.
What Does Above the Fold Mean?
Above the fold is the first content your visitors see without having to scroll. Anything that requires scrolling to view is considered below the fold.
Newspapers first popularized the term “above the fold.” On a newsstand, only the uppermost headlines and images would be visible, and these needed to attract a reader to pick up the paper to read more. Although there is no fold on your computer screen, there is the end of a browser window, and users need to scroll if they want to see more.
Depending on the device you’re using, while reading this article, you likely saw the featured image and headline (and maybe a snippet of text) above the fold. Other sites with large navigation bars and CTAs require you to scroll down to find the article. Imagine that experience at a newsstand—do you think the paper with only Home, About, Blog, and Contact Us visible is going to get picked up? I think not.
What’s Above the Fold for You Might Be Below the Fold for Them
Depending on how you view a piece of content (mobile, desktop, tablet, etc.), what’s viewable above the fold varies. For example, take a look at our recent Inspiration for Your 2020 Email Campaigns post. Here’s what it looks like on my IOS device:
And here’s what it looks like on my desktop:
In both versions, you can see the headline and featured image, but you can see more of the introductory text on the mobile device.
When designing content (whether that’s emails, blog posts, or landing pages), think about the experience on different devices. Varying screen sizes will impact what lands above the fold and what falls below the fold. On a phone, for example, the traditional page design is turned sideways for portrait mode.
It’s impossible to optimize your content for every device—that’s why it’s important to make responsive designs. All the emails in our free email template gallery are fully responsive so that users can create high-quality experiences, no matter what device their recipients are using.
Best Practices for Designing Above the Fold Content
You don’t need to reinvent the wheel to create great user experiences. While there’s no magic bullet to effective above the fold page content (sorry!), there are a few best practices you can keep in mind to improve your design:
- Deliver on your promises. If someone visits your page from an email, ad, or hyperlink, make sure your above the fold content sets the stage for what you’re going to deliver. For example, if your ad guarantees “the top 10 holiday sending hacks of 2019,” then your page better address that promise from the get-go.
- Don’t try to cram everything above the fold. Put your best content at the beginning—not all your content. Unless you’re Dr. Pepper and can somehow pack 23 flavors into a delicious drink, take a minimalist approach. Less is more. Use an image and some clever copy to entice your visitors to continue scrolling down the page.
- Encourage scrolling. Make it obvious that the next step the visitor should take is to scroll down. You can do that with visual cues (like downward facing arrows) or by being clear with your copy: “Continue reading.”
4 Impressive Above the Fold Content Examples
Enough talk—let’s look at some real-life samples. I found a few awesome examples of websites, articles, emails, and more from brands that nailed their above the fold design. Here’s what you can learn from them.
SPI’s Above the Fold Website
The Smart Passive Income Blog achieves great above the fold balance with this web design. Here’s what they do right:
- The homepage above the fold content is clean, uncluttered, and has plenty of white space.
- The premise of the entire site is outlined well in just 4 lines of copy, and it also has a simple, conspicuous CTA: “Get Started.”
- Social proof is visible right from the get-go with big brand names adding credibility to the site.
One thing the page doesn’t do well is it creates a “false bottom.” As you can see from the screenshot, the above the fold content looks like the only content, since the section ends level with the bottom of the browser. This gives the vibes that there’s nothing more on the page.
By adding a visual cue or making the above the fold content not perfectly flush with the bottom of the browser, it’d be obvious to a website visitor that more content is accessible by scrolling.
Frontier’s Above the Fold Email
This email from Frontier checks all the right boxes when it comes to above the fold content. It features an appealing hero image (how can you not love an owl in a Santa hat?), witty copy, and powerful deals coupled with simple CTAs—all above the fold.
Frontier could have taken it one step further by pushing up the “Book Now!” buttons that are currently sitting below the fold. But all-in-all, this email gets the above the fold element right.
Trello’s Above the Fold Blog Design
I’m a huge fan of Trello and an even bigger fan of their blog. Their article design gives you a perfect above the fold view of the piece you’re going to read. You can see the title, author, hero image, and even a snippet of text that has the opportunity to suck you in.
Where it falls short is simplicity. With the above the fold view, you’re surrounded by several distractions: “Sign Up,” “Get Started,” “Follow Us,” “Recent Posts,” etc. Remember to keep your above the fold content uncomplicated to move users smoothly through the experience.
Easton Training Center’s Above the Fold Facebook Ad
Be mindful of your above the fold content, even on social media. Ads have character limits, but if you use all the allotted characters, viewers will likely not be able to see the entirety of your message.
Keep it short and simple. Easton Training Center got it right here with just two lines of text that appear “above the fold” (although the targeting may be a little bit off since I have no interest in martial arts). The Denver Nuggets, on the other hand, placed their ad’s primary message “below the fold.” I imagine it’s an opportunity to register for a chance to win that vehicle, but you can’t know for sure.
Be Above the Rest
And that’s all there is to it. No, optimizing your content for above the fold isn’t going to magically double your conversion rates overnight, but it will improve your users’ experiences.
Give it a try and see what happens. If you really want to get nitty-gritty and focus on conversion optimization, read What is CRO? Your Guide to Everything You Need to Know. It’ll help you learn how to make strategic changes that make a measurable impact.