The Comprehensive List of What Needs to Be Above the Fold on Your Homepage

The Comprehensive List of What Needs to Be Above the Fold on Your Homepage
The majority of people have the attention span shorter than a goldfish. When it comes to your website, it’s probably hurting you. According to HubSpot, “55% of visitors spend fewer than 15 seconds on your website.” You’d better grab their attention in a hurry. But how do you do that? By placing the most important information above the fold. It’s one of the most tried-and-true web design best practices. And it’s one that has received…

The majority of people have the attention span shorter than a goldfish.

When it comes to your website, it’s probably hurting you.

According to HubSpot, “55% of visitors spend fewer than 15 seconds on your website.”

You’d better grab their attention in a hurry.

But how do you do that?

By placing the most important information above the fold.

6d6c70f0a5b0413b953c0a8d27a17c2d

It’s one of the most tried-and-true web design best practices.

And it’s one that has received a lot of debate.

I’ve heard some people say you need to follow the original formula religiously and keep key information above the fold.

I’ve also heard other people say that it doesn’t really matter because most people are willing to scroll.

And this makes more sense as of late, considering the number of people using mobile devices.

Everyone has their own opinion, and that’s okay.

But in this post, I’ll share my take on what needs to be above the fold on your homepage.

I’m going to cover the key elements and absolute essentials and condense them into a comprehensive list so you’ll know precisely what to include.

What exactly does “above the fold” mean?

Before I dive in, allow me to give you a formal definition of “above the fold” so that we’re on the same page.

According to Tech Target,

above the fold is the portion of a web page that is visible in a browser window when the page first loads.

In others words, it’s what visitors first see without scrolling.

Although we usually think of websites when referencing “above the fold,” this term actually originated with traditional print publications.

It was simply the upper half of the front page of a newspaper where the top story was printed.

Like this:

folded newspaper

Why is above the fold so important?

It’s simple.

  • It’s what people see first.
  • It’s what attracts the most attention.
  • It’s where visitors spend the bulk of their time.

A 2011 eyetracking study from Jakob Nielsen found that visitors spend 80% of their time above the fold.

website content writing statistics

It’s easy to see why people make such a big fuss about deciding what to include above the fold.

While there will always be some debate as to how important placing content above the fold is, there’s no denying that it is important.

And the way I see it, there are a handful of vital elements that need to be included.

Unique selling proposition (USP)

Here’s a screenshot of the definition of a USP from Tech Target:

2d724039844b4e6da3f697edb56068d4

It’s absolutely essential that you include this above the fold.

Your USP is the way visitors get their bearings after landing on your site.

It’s your way of instantly showing them what you’re offering and how they’ll benefit by exploring your website further.

Here’s the USP for Quick Sprout:

b6902f71209b42298e1f52ce24e0f3cd

Bam! Visitors instantly know what’s up.

It doesn’t matter what industry you’re part of or what niche you specialize in, a clear, well-crafted USP is a vital element of your above-the-fold content.

Some “explainer” copy

So, your USP provides visitors with an initial orientation.

But it doesn’t usually explain all the details.

This is why you need to include a bit of “explainer” copy that tells first-timers what your product does.

Here’s a great example from the Ahrefs homepage:

33b25b9902c3465584d09135f46a0c90

It’s brief and concise, but visitors can quickly tell what they can accomplish by using Ahrefs.

In this case, they can learn what’s helping competitors rank high and what steps they can take to outrank them.

Notice that it doesn’t drone on paragraph after paragraph with long-winded copy.

It matter-of-factly elaborates upon the USP and explains what the product does.

In turn, this should raise the interest level of visitors and encourage them to keep exploring the website further.

Your brand logo

This is a biggie.

In a world with super-saturated industries, where companies often have to scratch and claw their way to the top, brand recognition is of the utmost importance.

That’s why you want to establish consistent branding across the board and take every opportunity to reinforce your brand identity.

Take a look at the homepage of any major company, and I can pretty much guarantee they’ve included their brand logo above the fold.

Below are just a couple of examples.

Here’s HubSpot’s homepage:

f2f99de94c1940e3bec167e4fb6eb0e0

And here’s Dropbox’s homepage:

06ad792abcc1471eb804fe01b51450e7

It’s your way of letting visitors know who you are, and it plays a role in your long-term brand building.

Simple navigation

Let’s say a visitor has just landed on your homepage for the first time.

After seeing your USP and explainer copy, they have a pretty good idea of what you’re offering.

And after seeing your brand logo, they associate it with you.

At this point, you’ve piqued their interest, and they want to learn more.

It’s your responsibility to provide them with the framework to explore your site in a streamlined, systematic fashion.

This, of course, is done through simple, intuitive navigation.

Allow me to provide you with a few examples of brands that do this really well.

First, there’s ConversionXL:

2d93ae1384494bbdaedec72deca8c351

Next, there’s Buffer:

20ab3f34436c48a797ca4fe5bbc1ee42

Finally, there’s Pat Flynn’s Smart Passive Income:

fb84a3103bc948f9ae2ec4569c048053

Pat’s homepage incorporates a feature that I’m a big fan of.

The “Start Here” page.

It’s not necessary for every website, but it’s a great way for some sites to give first-timers a quick and easy way to get acquainted with the site, providing them with the best content to accomplish that.

Notice that all three of these examples feature simple, easy-to-spot navigation.

This way visitors can quickly find what they’re looking for with minimal effort.

This is crucial for encouraging visitors to browse your site in-depth and for getting conversions.

Contact info

This element is more important than you may think.

According to a web usability report from KoMarketing,

51% of people think ‘thorough contact information’ is the most important element missing from many company websites.

On top of this,

64% of people want to see contact information on a vendor website homepage.

87bbcd32d11d4dd683b50f95174fabff

It’s especially important if you’re running an e-commerce store, selling online.

People want to be sure you’re a legitimate business and not a scam artist who’s going to take their money and run.

Having full contact information tends to put your visitors’ minds at ease once they land on your homepage.

Your CTA (sometimes)

The fact that I put the word sometimes in brackets may have made you raise an eyebrow.

I mean, why would you not include a CTA above the fold?

This is the absolute basics of homepage design, right?

But here’s the deal with CTAs.

Several studies have been done to determine the impact of CTAs placed above the fold versus below the fold.

One of the more interesting studies involved The Boston Globe.

The experiment was simple.

They ran an A/B test where the CTA was first placed above the fold on the homepage and then below the fold.

Here’s what the first homepage looked like with the CTA above the fold:

boston globe above fold

And here’s the second version, where the CTA was below the fold:

boston globe below fold

Conventional logic would suggest that the first version with the CTA above the fold would outperform the second version, right?

Not exactly.

In fact, the results were virtually the same, and there were no significant differences in conversions.

This tells us that maximizing conversions isn’t about simply placing your CTA above the fold.

Anyone can do that.

It’s more about nailing it with all the other elements and writing great copy.

If you pique the interest of visitors, many will make their way further down your homepage and ultimately stumble upon your CTA.

That being said, I generally recommend placing your CTA above the fold as long as it makes sense and flows with the rest of your content.

This tends to be the approach of most successful brands.

However, you never want to force it.

Your main priority is to motivate visitors and to write compelling copy.

Also, be sure you’re not overwhelming visitors by stuffing the page wtih several CTAs above the fold, e.g., signup forms, a link to your product, etc.

Instead, keep it simple, and focus on a single CTA.

Like this:

b3d8511ca3444373bc785f33a1e60c2e

Conclusion

The formula for what to include above the fold on your homepage is pretty straightforward.

Here’s a recap:

  • A well-written USP
  • Some brief explainer copy
  • Your branded logo
  • Simple, intuitive navigation
  • Contact info – especially important if you’re running an e-commerce store

The CTA is optional and doesn’t typically affect conversion rates as much as you may think.

But if you can incorporate it in a seamless, non-disruptive way, by all means, include your CTA above the fold.

While there are other elements you could include, these are the essentials.

By putting them all together, you should be able to entice a sizable portion of your readers to continue browsing and even go through your sales funnel.

What do you think the most important element to include above the fold on your homepage is?


Source: quicksprout

The Comprehensive List of What Needs to Be Above the Fold on Your Homepage