For decades, people believed that when visitors landed on a website, they would only view the top section, or what is called ‘above the fold’. Hence, there is a tendency to place as much information as possible there. 

Above The Fold vs Below The Fold: Does It Still Matter In 2022? 

The problem is, imagine if you put every piece of information, every story, all at once in one place. It would be too chaotic and too much to digest for visitors, who only need around 10 seconds* to make a judgement about our websites.

Therefore, even though some may think that the idea of differentiating ‘above the fold’ and ‘below the fold’ is not as important as it once was, it’s still relevant to present only clear and engaging information above the fold. 

Hooking Visitors Like a Song

Above the Fold
Source: https://watchthem.live/below-the-fold-web-design-tips/

First impressions matter a lot. This is why we need to create the “above the fold” content that can instantly win over the visitors’ hearts and encourage them to check out the rest of the page’s content. 

"Above the fold" is the visible section of the web page that visitors view for the first time before they scroll down.

Just like when we play a random playlist, a song with a catchy opening would make us more likely to listen to the whole song. Or else, we would’ve skipped it.

Why is ‘Above the Fold’ Content Important?

Let's go back in time to the early days of the printing press, when the term "above the fold" first originated. Back then, newspapers were folded, and the part that was displayed on newspaper stands was only the top half above the fold. 

Above the fold
Source: https://freshmail.com/blog/above-the-fold-in-email-design-p2/

That’s why, publishers tried their best to capture people’s attention by putting the most important news of the day above. Mind you, they only put the headline news instead of cramming all the news in the ‘above the fold’ part.

The same thing goes on in today's digital world. We don’t need to squeeze everything at the top, as people are willingly scrolling to get the information they need or when they get hooked. 

Instead, we must decide wisely what should be placed above the fold before the visitors deep dive into our website. 

Above the fold
Source: https://focus7international.com/2020/05/12/above-the-fold-and-other-web-design-myths-to-ignore-in-2020/

What Should be Shown Above the Fold?

Unique selling point

Now imagine a visitor who has just landed on our homepage for the first time. They must want to know directly what we are offering and how they will benefit from exploring our website further. 

To fulfill their needs, one vital element to be shown is our unique selling point. We need copywriting that highlights our product and differentiates it from competitors. 

Here’s one example of a copy that do so:

Above the fold

This is what visitors will first see when they land on Kargo, an Indonesian logistic company’s homepage. Just by looking at the header, they will know that Kargo is offering efficient truck shipping services at great prices. It’s concise and informative.  When someone types "truck shipping services" into a search engine and ends up on Kargo's website, they will know right away that they are in the right place.

A Call-to-Action (CTA)

Now that visitors already know what we are offering, we obviously want them to stay. But the question is, how? 

One way to do it is by putting a visible call to action button at the top. We should ask a question, “What action do we want them to take?." The calls to action we put in can vary. It can invite visitors to order, join a campaign, subscribe to our newsletter, learn more about our product, and many more.

From the Kargo’s headers, visitors can know immediately that they are offering great prices for their services. The next question— how to quickly capture the value?  At that point, Kargo invites visitors to instantly click the "Check Shipment Prices" button. Other calls to action are also there, allowing visitors to contact the company and order the service right away. 

Above the fold

Help users navigate the site easily

After enticing visitors with our headers, let us ensure that they have a pleasant experience while exploring our website. 

Above the fold
The existence of a navigation bar at the top will surely help a lot, as it is the roadmap that will guide visitors to where they should go next. To avoid confusing the visitors, keep it simple and give each of the category items short titles.

Things We Need to Pay Attention to When Designing Above the Fold Content

Remove any unnecessary elements

If there is too much going on, our "above the fold" content can become overwhelming and load slowly. 

Above the fold
Source: https://ucmarketing.co.uk/above-the-fold/

What's worse, it could turn users away from our page. Avoid combining sale banners, advertisements, videos, photographs, and texts all together. Keep it simple, yet catchy.

Ensure the usability of the elements we put in

While great visuals are important, usability is even more crucial. Make sure that everything we've placed at the top functions properly. 

If we include a video, we must make sure the sound is clear and won't interfere with the visitors' experience. If we put the call to action buttons, it should redirect them to the correct page.

Therefore, if there’s a question, is the "above the fold" concept  still relevant and something we should give careful consideration to, the answer is yes. Put in more effort creating a strong heading by including our unique selling point, calls to action, and navigation bar, which are all wrapped in an eye-catching visual and user-friendly manner.

Have a project in mind?
Call Us!

Help you figure out how to approach your problems.
Help answer questions related to services provided by Natuno.
Get timeline and cost estimation for your projects.