Best Above The Fold Optimization Practices For 2019

The debate between putting content above or below the fold is still raging in 2019 – believe it or not!

So what are the best above the fold optimization practices to focus on? We must first ask this question –  how important is “above the fold” content?

With marketers everywhere trying to gauge interest in users within the first few seconds of entering the site…

The answer is simple really. Content being above the fold is more important than ever!

What most people fail to realize is that it’s all about WHAT content you put above the fold.

84% is the average difference between how above vs below the fold content is viewed and consumed.

So if you don’t get their attention quick – don’t expect them to scroll far.

Let’s dig deeper into what content you should be leaving above the fold and how to properly optimize that content.

We will also be talking about different circumstances where it’s OKAY to put content BELOW the fold.

The History Behind “Above The Fold”

Newspaper companies coined the term first due to the layout of their front pages and the literal fold in them.

Sound familiar?

Content above the fold tends to take in more engagement. The Page Fold Manifesto states that the first 100 pixels of a page are viewed 102% more than the 100 pixels below the fold.

Best above the fold optimization practices in 2019

The main headline could always be seen within the top half of the front page. The layout would leave the least important content below where it was less likely to be seen.

The same can be said when talking about website design.

Instead of the paper fold, we are talking about the bottom of the browser/screen.

“Above the Fold” as defined by TechTarget:Above the fold, as it applies to Web design, is the portion of a Web page that is visible in a browser window when the page first loads.  The portion of the page that requires scrolling in order to see content is called “below the fold.” ‘

The standard size of a screen changes from device to device. But most marketers use the average 1000 px wide X 600 px high consensus.

So let’s get into the nitty-gritty of website design and “above the fold” content.

As with anything in digital marketing, you should always test, test and test again to improve your conversions and garner more interest from your visitors.

Why Should I Keep Content Above The Fold?

It’s 2019, and the rate at which people consume content has reached an all time high!

Most people lack the attention span to spend more than 6 seconds on a topic.

In fact, if we look at ads these days… Huffington Post states that marketers are typically going for extremely short and snackable content in their ads which is around 4-6 seconds long for this very reason.

So how do we attract the attention of our visitors and keep it there?

To better answer this question – we need to understand what optimal “above the fold” content is.

Let’s look at one of my biggest inspirations and mentors: Neil Patel

Neil Patel and the fold

Neil is a master at driving conversions and sales through his website. He is also great at getting people to scroll through his content.

Let’s breakdown Neil’s formula for a great home/landing page.

Powerful Header

Neil quickly establishes his unique selling proposition (or USP), and gauges user interest so that they can follow up with his call-to-action or search for more information.

Your goal here is to show value to the consumer; and what better way to do this than through a big, powerful statement explaining to them what you are there for?

Informative Subheadings

After you have delivered your power statement, your next goal is to deliver an explanation that will reassure your consumers that this is the right place for them.

Neil’s subheading opens up a bit more on what leads he can generate for you, and then ends with a request for the users URL.

It’s very simple, elegant, and intelligent.

Classy Call-To-Actions

Keep your CTAs simple and non-intrusive. Guide your visitors to them.

Now let’s look at another example of this in action!

DigitalOcean above the fold example

DigitalOcean is a service where people can buy dedicated server space to host their applications and websites.

They do a fantastic job of telling users where their value lays, and has a simple sign-up form to bring in conversions.

Like Neil, they use a powerful headline with a descriptive subheading to detail their service.

This formula WORKS! And the sooner you start to adopt these trends… the more clicks and conversions you will start to get.

Banner Blindness

Banner Blindness is when a visitor of a website subconsciously avoids advertisements and misses key website information or calls-to-action instead.

There are a few ways to avoid Banner Blindness.

  1. Keep CTAs out of sidebars
  2. Make eye-popping CTAs

Tips For Creating Above The Fold Content

Tip #1) Avoid False Bottoms

  • False bottoms are created when you fill the entire width and height of a screen with your web page. This can create the illusion that the web page has already finished.
  • Leave a little bit of space for the next part to appear underneath the top section.
  • Or you could try creating “scroll now” buttons to direct the user.

Top #2) Keep Info Short & Sweet

  • Don’t try and condense a metric ton of copy into your header.
  • This clutters up the space and takes away from the key points you are trying to say.
  • Keep your headers short with an impact. Make a statement without several paragraphs to get your point across.

When Should I Put Content Below The Fold?

Putting content below the fold typically depends on the type of consumer you are trying to reach.

If they already know what they want by the time they get to your site – you won’t need to go into heavy detail about your product or service.

However, if your potential prospect is unsure about the product/service – you will need to lead that person into scrolling through the rest of your content.

When Is It Okay To Put My Call-To-Action Below The Fold?

The golden rule of the “Above The Fold” concept: To never put your call-to-actions underneath the fold!

Marketers have been saying this for what feels like a century. But it just isn’t true anymore.

You need to figure out where your clients should end up on your page.

Chartbeat has stated that 66% of users attention is spent below the fold. That’s IF you can get them there.

When you bring in prospects that require more information, you will rely on your header section to entice the individuals to learn more.

Then, get them to scroll through your content and check it out. Leave a call-to-action near the bottom and test, test, test!

Here is an example taken from one of our Services pages.

 

TSM Below the Fold example

Conclusion

Here is a quick summary of the points we covered in this article:

  • Raise the attention of your visitors by utilizing strong, powerful statements that leave an impact.
  • Backup those statements with descriptive subheadings.
  • Use classy and non-intrusive call-to-actions. Leave the amount of information you take in to a minimum.
  • Avoid false bottoms.
  • Keep information short & sweet.

And that’s everything you need to know about the Fold!

How important do you think the fold is? Can it make or break a web page?

Tell us in the comments below, and as always – thanks for reading!

Liam Abbott

Liam is a SEO/SEM Specialist & Web Designer from Calgary, Alberta. He maintains a passion for contemporary design and everything search engine related. He is an avid gamer, and enjoys collecting entertainment memorabilia.

If you have questions or inquires for Liam, feel free to contact him by email anytime liam@topshelfmedia.ca

Leave a Reply

Your email address will not be published. Required fields are marked *