What does 'above the fold' really mean: decoding web design jargon [2023]

"Above the fold", what does it mean? The answer is simple: it refers to all content seen on a website without scrolling.

This crucial element of web design can make the difference between holding your audience's attention or losing it.

In this article, we'll explore this concept, its importance, how it works and how to optimize it to increase your conversion rates.

What is "above the fold"?

"Above the fold" refers to all the content that appears on the screen before the user has to scroll down.

It's the first thing your visitors see, so it's important to draw them in immediately.

To better understand its importance, think of your favorite song. It probably starts with a really catchy or intriguing melody. Otherwise, you wouldn't even have taken the time to listen to it the first time you heard it.

Your online content is your website's hook and, like any good banger, it has to make your visitors want to keep going.

What is the fold line?

Now you know what is "above the fold", let's talk about the fold line.

You might have already guess: it's essentially a virtual line that separates the visible part of the web page when it is first loaded from everything below it.

The idea dates back to the early days of publishing, before digital and e-commerce solutions were widely available, when newspapers were sold from newsstands on every street corner.

Newspapers were folded in half for display so that passers-by could only see the top half of the front page. What they saw had to catch their attention, or they would pass by and not buy the paper.

Publishers realized that the most eye-catching headlines had to be placed "above the fold" to ensure sales.

Although the concept of the fold line predates the existence of websites, its importance in web design and marketing remains crucial.

Why is this important?

Eight seconds. I know, it's not very long, but it's the average human attention span.

And if you're a marketer creating a website, you have about the same amount of time to capture your users' attention.

As you can see, first impressions are crucial. If you're losing traffic and failing to hold your website visitors' attention, it may be because your content above the fold line isn't eye-catching enough.

By moving your content so that the most relevant part is above the fold line, you increase your chances to improve your conversion rates.

Where is the fold line on a website?

The fold line on different devices

As you've probably understood by now, the fold line is the bottom of the page visible at first load. It's also the point from which the user must scroll down to see the content below.

But the fold line is not an exact science, especially given the variety of devices used to access the Internet today.

From cell phones to laptops to connected watches, screen sizes and resolutions are too varied to conclusively define the same fold line on each of these devices.

Trying to design the perfect website to fit all these options is a game you simply can't win.

You're probably asking yourself: "so why bother?".

Well, there's just one thing to remember: eye-catching content must be optimized and placed at the very top of the page. And why is that? Quite simply because it's where it all counts, and what's there can guide user behavior by encouraging them to scroll down the page.

70% of website traffic comes from mobile devices

Another element to take into account when determining the location of the fold line is the frequency with which people use certain mobile devices to browse the web in your industry.

Considering that on average 70% of website traffic comes from mobile devices, this doesn't help our situation.

Indeed, creating a responsive website can be more complex to achieve for content above the fold line.

But as you might have realized by now, the idea remains the same: important content should be placed at the top of the page.

Also, always keep in mind the visual hierarchy of the various elements when creating your website, as it helps guide the user experience and remains an essential tool in web design.

Finally, my last piece of advice: don't overcomplicate things. Keep your design simple so users know where to look first, and make sure your content is optimized for search engines (SEO).

Fold line: best practices for a high-performance website

Now that we've understood why to use it, let's try to understand how to apply best practices to optimize content above the fold line.

The rest of this guide presents 4 concrete recommendations for optimizing your content above the fold line.

1) Clear, convincing and concise value proposition

Your value proposition should be easy to understand and capture the attention of your visitors. It should clearly state what you offer and how it can benefit your customers.

Your potential customers need to be able to read your value proposition and know exactly what problem you're solving for them.

"We create remarkable websites that sell" is a simple example of how a value proposition can clearly communicate your service.

After presenting your strong message, create a description that shows customers you're the right solution for them.

Your content above the fold line should:

• Echo your brand voice;
• Include a call to action;
• And use headlines and text that arouse the user's curiosity and trust.

Stay consistent and professional, and stick to a simple statement that summarizes how your product is the solution for them.

2) With your call to action, tell users exactly what you want them to do

Your CTA should be visible and clearly state what you want your visitors to do next.

As well as being obvious, your CTA needs to be strategically placed, for example close to social proof to build trust and facilitate the move to action.

Use a color on your CTA button that contrasts well with the elements around it to once again more easily entice your visitors to call on your services.

3) Keep it simple

Don't overwhelm your users with information. Think about your user experience and what you like when you visit a website.

When it comes to navigation, less is more. Your website design should guide your visitor exactly where you want them to go. Too much information can lead to fatigue and confusion.

Make sure that navigation is visible and that the navigation bar redirects visitors to the important pages of your site, such as:

• the product or service you offer;
• the home page;
• and a contact page with a telephone number or e-mail address.

As a general rule, don't put more than 5 to 7 elements in the navigation bar.

If there's one thing people hate these days, it's waiting for a web page to load. A home page that takes too long to load can encourage visitors to leave your site before they've even seen it.

So make sure your page loading speeds are fast to allow more prospects to explore your website.

4) Remove background distractions

Always ask yourself the following question: That background content may be interesting, but does it distract from or enhance the value proposition?

You can use an attractive image or catchy text, but remove anything that distracts your user from the path you want them to take.

If there's too much at the top of your web page (text, photos, videos, pop-ups, sales banners), visitors are likely to feel lost and rush to leave your site.

Place your most relevant content at the top of the page, not all your content. Again, less is more.

In other words, don't try to put everything above the fold line, and keep your page organized, simple and accessible to users.

{{cta-service}}

Fold line examples

1) Shopify

Shopify invites the reader to explore content above the fold line and enables entrepreneurs to create their own online store, as evidenced by their "create your own online store" value proposition.

The description text reassures the customer with social proof, then highlights the call to action with a free, no-obligation 14-day trial offer. The CTA is visible and colorful.

2) SEMRush

SEMRush takes a slightly different approach to above-the-fold line content. SEMRush is a platform of online marketing tools for SEO, PPC, SMM and content marketing professionals.

The SEMRush homepage offers a free search for visitors as soon as they arrive. The aim here is to allow users to try the product before they buy.

Their value proposition clearly states what SEMRush does: "Boost your online visibility". A brief descriptive text explains what the platform is all about, and visitors are immediately invited to carry out a free search with the orange "Get Started" button. The CTA is therefore clear and clearly visible.

In short, SEMRush's home page encourages visitors to try out their tools immediately. SEMRush's approach is to show users how they can benefit from their product before they even sign up.

You'll also notice that companies who trust SEMRush are listed at the bottom, just before the fold line, to build confidence and encourage potential customers to take action.

Conclusion

Content above the fold is the first thing your visitors see when they arrive on your site, and it can have a considerable impact on the time they spend exploring your site and, ultimately, on their decision to buy your products or services.

You should bear in mind that the fold line varies according to the device used by the user. For this reason, design responsive website!

The aim is to capture visitors' attention and encourage them to continue exploring your site. To achieve this, you need to place your most attractive and relevant content above the fold line. And I did say, the most relevant content.

This doesn't mean you should overload this area with too much information. On the contrary, your approach should be to maintain a balance between providing enough information to engage visitors and avoiding overwhelming them.

With the right design, your content above the fold line can be a powerful tool for driving traffic to your site, retaining visitors and increasing your conversion rates.

So don't hesitate to explore and optimize it for the best possible results.

‍