When we navigate to the homepage of a new website, we expect our browser window to be filled with beautiful, well-designed content. That first view a visitor gets of your website (before scrolling) is the above-the-fold section, and it’s your chance to make a great first impression.
When designing your website, it’s crucial to think about the people who will be viewing it. You’ll end up losing traffic if you put more information above the fold than the average human attention span can handle.
On the flip side, websites without anything interesting above the fold won’t make an impression.
In this article, we’ll go over the ins and outs of designing the above-the-fold section of your web page.
Let’s get started!
What is above the fold?
The term “above the fold” comes from the early days of publishing in the 1700s. Back then, presses printed on large sheets of paper which were too large to be displayed on a newspaper stand. They folded them, so only the top half of the front-page content was visible.
This is still part of the newspaper industry: when you buy a newspaper from a stall, only the upper half of the paper is visible.
That’s why all the most important news of the day is printed above the fold. Publishers want to grab attention and entice people to buy their paper!
Similarly, advertisers prefer this section of the paper for displaying ads because everyone will see it, even when the newspaper is simply sitting on a stand.
The “above the fold” methodology is part of designing websites, too.
In the digital world, “above the fold” refers to the visible section of the web page that users see before scrolling. The end goal is to encourage visitors to check out the rest of the page’s content.
This practice is not as crucial as it once was, because most web users today prefer browsing on smartphone screens. This means they’re accustomed to scrolling in order to see all the vital information.
Above-the-fold website design best practices
Visitors land on your web page with an attention span that’s surprisingly short—around 8 seconds.
See why it’s so critical to focus on grabbing their attention as quickly as possible?
You need to make sure there’s engaging content above the fold of your website, whether that’s an eye-catching photo or video, an interesting headline, or some combination of these.
Most web designers and SEO professionals recommend adding the most valuable pieces of information above the fold, while others claim that there are other factors to focus on.
There have been plenty of heated discussions about this topic, especially now that mobile users have eclipsed desktop users in terms of browsing volume. Data tells us that mobile users are willing to scroll to get the information they’re looking for.
In fact, a MOVR report concluded that 11% of mobile users start scrolling within four seconds when the web page has finished loading. If the page has not finished loading, 9% have started scrolling within four seconds anyway.
But no matter what device your visitors are using, it’s essential to show them immediately why your site is worthy of their attention!
Here are three suggestions to help make your above-the-fold content more powerful:
1. Make your web design responsive
The importance of responsive web design goes beyond aesthetics or following the “hottest web design trends.”
A responsive website has a positive impact on overall visitor experience, engagement, and ultimately, conversions. When your website design is fluid and flexible, it will look great on any screen and any device your visitors are using.
When it looks great anywhere, visitors are more likely to stay on your website longer, interact with your content more, and purchase from you. This also makes your omnichannel marketing efforts a lot more effective as your messaging is tailored to device and screen size.
2. Add important calls to action
Adding a call to action (CTA) above the fold directly impacts conversion rates and can encourage visitors to take the action you want them to take, sooner. You can redirect them to a different page of your website that contains detailed instructions, take them to a specific category or product page, or encourage them to sign up.
There are eight different types of CTAs, but the most important ones are:
- Lead Generation
- “Read More” Button
- Product Discovery
A compelling call to action can give you spectacular results and intensify visitors’ interest. In short, adding a CTA in the right place above the fold is the best way to get your visitors to do what you want!
3. Place important content above the fold
The above-the-fold content is the first thing the users see when they land on any page of your website, so it’s essential to add intriguing headlines, CTAs, or other vital info here.
Remember to get straight to the point: if you don’t clearly show visitors what the page is about, you know very well what their next action will be!
Big banners, for example, are beautiful to look at, but they don’t relay important information to the visitor. This can ruin conversion rates.
What to avoid in your above-the-fold content?
Users are looking for information that’s relevant to their search queries.
You might think that means you should go all out and give detailed information above the fold, but that’s actually a bad idea. Remember, the above-the-fold content should grab users’ attention and make them scroll down to dig deeper. Don’t overwhelm them!
Cramming a lot of information above the fold will also make your website look substandard and chaotic.
Adding ambiguous info, advertisements, or anything else that might disrupt the visitors’ focus won’t do you any good.
Plus, if you place too many ads in this section, it’s only a matter of time until you find trouble knocking at your door—Google will penalize your website, and you’ll see less and less traffic.
How is above-the-fold content related to SEO?
If a user isn’t enticed by your above-the-fold content, the chances of that user sticking around plummet. They’ll likely bounce in a few seconds.
But wait, how is that bad for SEO?
Well, search engines record the average time spent by users on a page, and if the algorithms don’t see enough user engagement, they slowly diminish your webpage’s rank in the search engine results page.
The above-the-fold content is the best place to focus if you want to lower your bounce rates, but this certainly doesn’t mean that the content below the fold doesn’t matter.
The real work of SEO begins below the fold: this is the place for your keywords and great headers. If above-the-fold content makes your users scroll, make sure they find what they’re expecting to see below the fold.
10 great above-the-fold content examples
Here are some examples of above-the-fold sections from top ecommerce brands. Hopefully, you’ll find some inspiration for your own above-the-fold design!
These compelling images will make any visitor stop and pay attention to what’s on the screen. Even better, the clever rhyming headline copy goes incredibly well with the images.
They also have a clickable button for both “Shop Men” and “Shop Women,” helping users find what they’re looking for in no time.
Sephora focuses on highlighting their best-selling products above the fold. The images below the navigation bar direct customers to different product categories quickly and easily.
3. King Arthur Flour
King Arthur Flour’s beautifully designed website promotes their top-notch content.
In addition to viewing recent posts, website visitors can also immediately search for recipes. Once again, the above-the-fold design is focused on creating a user-friendly experience.
4. Warby Parker
Warby Parker uses the prime real estate above the fold to grab users’ attention with a great deal. Using only a few words and keeping their design simple, they explain their unique selling point.
They include three calls to action: “Shop Women,” “Shop Men,” and (most interestingly) “Try five at home for free.”
You can tell that Shopify is pursuing higher conversion rates because they put the signup field for a free trial above the fold.
As soon as a potential customer hits their landing page, their attention is directed to the action that Shopify wants them to take.
Like Shopify, OptiMonk’s above-the-fold content is intended to convince visitors to sign up for a free account.
OptiMonk highlights the main promise (“the most powerful ecommerce popups”) and social proof in the form of awards and Shopify reviews.
Ahrefs’ web design eschews using images in favor of bold color and short copy to deliver a simple message: their product is all you need to “rank higher” and “get more traffic.”
The fact that there’s so little above the fold helps focus customers’ attention on the most important content.
8. Then I Met You
This page from Then I Met You is one of the best-designed landing pages on this list.
The clever emphasis on brand colors with ample white space, the short, attention-grabbing headline copy, and the singular “Shop Now” CTA combine to give the visitor a great start to their shopping experience.
9. Happy Box Store
The above-the-fold design of the Happy Box Store is intended to introduce new visitors to the brand. Their call-to-action button leads to more detail about their core product: customizable gift packages.
Kotn’s website visitors immediately see two beautiful photos that introduce the look and feel of the brand. After getting excited about the brand, visitors will naturally want to follow their call to action and start shopping.
So what goes below the fold?
Now that we’ve discussed the above-the-fold section and seen some examples, it’s time to talk about the area below the fold for a second.
“Below the fold” is everything on a page that can only be seen if a user scrolls. Remember, this content will only be seen if the above-the-fold content triggers the user to scroll. Otherwise, it will remain hidden, and the user will move on to a different website.
Your main blocks of text will need to go below the fold… aim for digestible sections with great headlines. Most ads also belong below the fold: Google’s algorithms don’t allow placing too many ads above the fold.
Tips for responsive design
Today, a responsive website is imperative. It not only lessens maintenance costs but also drastically increases conversion rates. In short, it enhances the user experience, which results in lower bounce rates.
The benefits don’t end there: with responsive design, the pages of your site will load faster. And you won’t need to create separate websites for all devices, which means no duplicate content.
In 2022 and beyond, more than half of traffic to your website will come from mobile devices. This means you need to have a responsive site that looks amazing on any screen size and any device.
Below are some of the most common screen resolutions that web designers use for responsive web pages:
Note: There’s no one-size-fits-all approach, so utilize screen sizes after knowing your breakpoints.
Standard website resolutions for mobile screens:
Standard website resolutions for tablet screens:
Standard website resolutions for laptop screens:
The first impression is the key to success here. You want to provide the best possible browsing experience for regulars and first-time visitors. If they’re forced to do a lot of zooming to read the contents of your page, they’ll most likely abandon it and go looking for a more user-friendly site.
If you have too much content on a page (especially above the fold), try to reduce it and focus on the most important information. If you follow these steps precisely, you’ll be well on your way to providing your users with a flawless, responsive experience!
Your above-the-fold content should pique visitors’ interest. Therefore, it’s essential to add your most engaging content and an emphatic call to action there. Using strategic CTAs will help guide visitors through the selling/signup process.
Responsive web design will ensure every user gets to enjoy the best experience on your site, which begins with a beautiful above-the-fold section.
Remember that placing ads above the fold will tank your website’s reputation and result in SEO penalties that are a pain to deal with. Avoid adding too many ads in this section, and make sure you’re following all of Google’s guidelines.
There you have it! By now, you should have a good handle on the above-the-fold section and how to make the most of it. Good luck!