Above The Fold Optimization

Above The Fold Optimization

If you are looking to make your landing pages, products page, and overall store more effective, one of the first three areas you should optimize and pay attention to is your “Above The Fold,” especially on mobile.

Alongside page speed and your offer, the above the fold makes up the 20% of the landing page that will yield 80% of the results (if you use the 80/20 Pareto Principle).

What Is Above the Fold?

Above the fold is a term used to describe the content that is visible on a website or other digital platform without the need to scroll.

It comes from the newspaper industry, where the most important stories of the day were placed on the upper half of the front page, "above the fold" line that separates the top half of the page from the bottom half.

In a digital context, the content above the fold is important because it is the first thing that users see when they land on a page. As such, it can play a crucial role in determining whether users will stay on the page or move on to something else.

For this reason, it is important for website owners and designers to carefully consider what content should be placed above the fold, and to make sure that it is engaging and compelling enough to keep users interested.

Why Is It Important?

The Above the Fold of a landing page is important for many reasons, but there are two reasons that stand out from the rest:

1. It acts as the "first impression" for your brand.

2. 60%+ of people never even scroll down at all, and as such, the above the fold is the only thing they will see.

The content above the fold is important because it is the first thing that users see when they land on a page. As such, it can play a crucial role in determining whether users will stay on the page or move on to something else.

For this reason, it is important for website owners and designers to carefully consider what content should be placed above the fold, and to make sure that it is engaging and compelling enough to keep users interested.

Mobile vs. Desktop

When talking about the Above The Fold, a differentiation must be made between mobile and desktop.

For the most part, the Above The Fold on Desktop will be "optimized" by default because there is much more space on a desktop screen than there is on a mobile phone.

You have to screw up pretty bad to not have an optimized Above The Fold on desktop, pretty much "automatically."

However, on mobile, there is less screen space, and everything is stacked (as opposed to columns on desktop).

This means you have to be a lot more intentional with your space in order to have the most important elements and components of your page show Above The Fold.

What to Include ATF

When designing your above the fold on mobile, you should always aim to have the following things:

1. Product Image

2. Product Titles

3. Reviews

4. Price

5. Three or More Benefits

6. Call to Action Button

It is important that these things all show up on page load, without having to scroll at all.

Again, to summarize why, the Above The Fold:

1. Acts as the "first impression" for your brand.

2. 60%+ of people never even scroll down at all, and as such, the above the fold is the only thing they will see.

Take a look at some examples of a highly-optimized Above The Fold on mobile.

This is what it should look like when you view it on mobile.