Above the Fold vs. Below the Fold: How To Encourage Scrolling (and Converting)

Quick! How many CRO “best practices” can you name off of the top of your head? I’m willing to bet the number is quite high.

I believe best practices are merely common practices [Tweet it!], which is why I’m putting another “tried and true” concept to the test. (If you recall, I also explored whether social proof is really that important.)

This time, let’s look at the space above the fold. How important is it to have your call to action above the fold? Is it true that no one scrolls below the fold?

What is above the fold?

Above the fold refers to the content that displays on a site without needing to scroll. This concept originated from the world of print, as it was the upper half of the front page of the newspaper where the top story is typically placed.

The idea is that the story above the fold gets the most attention. While Sarah might not read the entire paper to find out what’s on page 8, she will likely read the front page story (or, at least, the headline).

The best practice states that your call to action must be above the fold because visitors do not typically scroll beyond the fold.

Let’s look at some examples of sites designing for the fold…

Now let’s look at some examples of sites completely ignoring the fold…

What the experts said

So, what have some of the top CRO experts said on the subject? Joanna Wiebe, Oli Gardner, and Brian Massey have all spoken out on the best practice…

Joanna Wiebe, Copy Hackers & Airstory:

“Don’t cram everything above the fold. Countless tests and scroll- / click-tracking studies have shown that visitors are willing to scroll… as long as they know there’s something to scroll down for. (So don’t create a false-bottom.) Don’t prevent people from exploring your content by making assumptions about their use behaviors.” (via Copy Hackers)

Oli Gardner, Unbounce:

“Placing your CTA above the fold is the most common placement choice. However, this can be expecting too much of someone who has just arrived at your page.

A solution to this is to create a mini landing page experience that contains the critical elements of your page packaged up into a block of content above the fold. Then any supporting content can appear below for those who need to read it to be convinced of your page’s purpose.” (via The Unbounce Landing Page Course)

Brian Massey, Conversion Sciences:

“It is a best practice. So the most important parts of the page will usually do best above the fold. Now the exception is when you’re bringing somebody to take action. So you’ll see the longer forms, sales letter and actually you’re going to see a lot of pages that are long form.

Home pages essentially acting as landing pages. And in these situations, it’s okay to save the call to action until you’ve made some key points. So if you’re not well known, or if you’re in a new industry and you need to do a little bit of education first. You could test that, but in general we’ll see a bump if we can move that first call to action to the top.” (via Business of Software)

So, it would seem that the experts are in agreement: the fold really does matter, but as with most concepts in CRO, it is not an absolute.

What the data said

A few years ago, Google released a study, The Importance of Being Seen: Viewability Insights for Digital Marketers and Publishers, that demonstrates the impact of the fold.

The study found that, with viewability defined as 50% of the ad’s pixels being on-screen for one second, ads just above the fold had 73% viewability, whereas ads just below the fold only had 44% viewability.

Nielsen Norman Group concluded that, “what appears at the top of the page vs. what’s hidden will always influence the user experience—regardless of screen size.” In fact, they found that the average difference in how users treat info above vs. below the fold is 84%.

To summarize Nielsen Norman Group’s findings: “Users do scroll, but only if what’s above the fold is promising enough. What is visible on the page without requiring any action is what encourages us to scroll.”

Once again, the fold does matter. However, it matters because it sets the stage for future content and provides quality expectations, not because of some arbitrary, absolute rule.

When is “below the fold” ok?

So, the content above the fold is viewed more often (duh), but it seems that doesn’t necessarily mean that your call to action must, without a doubt, be above it. In what cases is “below the fold” acceptable?

The content above the fold has two tasks: clearly explain the value proposition and signal that there is more valuable content below the fold.

If your value proposition is crystal clear above the fold, put the call(s) to action where it makes the most logical sense.

In some cases (e.g., Toggl and Optimizely), the one-line value proposition is clear (and convicing) enough to warrant an immediate ask (e.g., “Sign up”).

In other cases (e.g., Lewis Howes and Tiny Habits), more copy and creative is required to create a clear (and convincing) value proposition, meaning the ask will be delayed (i.e. below the fold).

Consider the fact that there are only three types of visitors landing on your site…

1. Certain visitors

These visitors are familiar with your brand, they know what you offer and they know it solves a problem they have. They’re going to convert no matter what. As long as you don’t go out of your way to hide your call to action, these visitors will find a way to convert.

It’s most convenient if the call to action is above the fold, but if it’s not, they’ll be willing to scroll to find it.

2. Uncertain visitors, simple value proposition

These visitors aren’t familiar with your brand or your product or service. They aren’t convinced that your product or service is the best solution to their problem yet.

Let’s say you have a simple value proposition, like Skype…

If your value proposition is simple and clearly articulated, it likely doesn’t require much elaboration. How many questions does “Skype makes it easy to stay in touch. Talk. Chat. Collaborate.” raise?

Therefore, you can go ahead and place your call to action above the fold. It’s realistic that a new, uncertain visitor could be convinced and ready to download Skype without additional information.

3. Uncertain visitors, complicated value proposition

Similar to the previous group, these visitors aren’t familiar with your product or service and aren’t yet convinced that it’s the best solution to their problem.

This time, let’s say you have a more complicated value proposition, like Evergage…

Fewer people are familiar with (and convinced of) the benefits of real-time personalization than the benefits of talking to friends and family around the world for free.

Now, that doesn’t make Evergage’s value proposition less effective, but it does mean elaboration is required. A simple one-liner won’t suffice; visitors are bound to have questions about what real-time personalization is, how it works, how it can work for them, and so on.

Thus, placing an ask at the top of the page, above the fold, doesn’t make much sense. Visitors who are uncertain won’t be ready to take action just yet. They’ll need additional information.

Note the placement of Evergage’s first call to demo—at the very bottom of the homepage.

The average fold position

Technically speaking, the fold has become more complicated in recent years. First of all, we’re all using multiple devices.

With each device comes a unique screen size and resolution, meaning a unique fold position.

There’s also an easy way to view your site in multiple resolutions, just to ensure your content is being displayed correctly…

Step one: Open a Chrome window, right click and select “Inspect.”

Step two: Click the device icon in the top, left-hand corner of the “Inspect” window.

Step three: Choose a custom screen resolution or select a specific device from the dropdown menu.

Using this simple process, you can view your fold position on the most common devices to ensure you have all of the necessary content displayed.

Be sure to check all of the devices. Just because you don’t use a Nexus or a Pixel phone, and neither do any of your friends, doesn’t mean your visitors don’t.

Speaking of your visitors, it’s worthwhile to identify what devices they use most often so that you can optimize your design and content efforts for those screen resolutions in particular. Here’s the simple two step process…

Step one: Open Google Analytics and within “Audience”, select “Technology,” then “Browser & OS.”

Step two: Just below the graph, you’ll see “Primary Dimension.” Select “Screen Resolution.”

There you have it! And that’s just the top 10 resolutions. There are dozens more, all of which need to be accounted for.

So, we know it’s not the 90s anymore and that people can (and will) scroll down the page. But is there a limit? How far down the page do people scroll on average? Is there a section of your site that will get next to no attention?

Let’s look at the facts…

A few years ago, Huge found that regardless of design cues, almost everyone (91-100%) scrolled beyond the fold.

In a MOVR report, it was concluded that 11% of mobile users start scrolling within four seconds when the page has finished loading. If the page has not finished loading, then 9% have still scrolled within four seconds.

If the page loads slowly and takes more than nine seconds, 21% of people have still scrolled. Of the people who scrolled at nine seconds, over 50% of them have scrolled down over 250 pixels.

Note: This means if your mobile site loads slowly, your above the fold content will actually be bypassed.

Tony Haile, CEO of Chartbeat, shared some interesting data with Time Magazine earlier this year. His team has found that 66% of attention on a normal media page is spent below the fold. Here’s the heatmap he shared…

There’s very little engagement at the top of the page, likely because we’re conditioned to know that only branding and navigational cues are located there. Engagement, according to Chartbeat’s research, is highest just above and just below the fold.

In summary, your visitors decide whether your value proposition is interesting to them quite quickly and then begin scrolling until they have enough information to take a next step (e.g., bounce, move to a new page, or convert).

Michael Aagaard is just one expert who has experimented with calls to action below the fold…

“So we all know the golden rule that your call-to-action should always be positioned above the fold. Well, let’s bust that myth right away with this example from a test I ran on a B2C landing page,” he wrote.

In the example, he placed the call to action at the bottom of a very long landing page and conversions increased 304%.

“There are several other things going on in the treatment. So the whole lift can’t be ascribed entirely to moving the CTA below the fold,” Michael notes.

“However, the fact remains that the treatment with the CTA way below the fold outperformed the control variant—something that simply shouldn’t be possible if you subscribe to the best practice rule that the CTA should always be above the fold in order to convert.”

Note that this is just one example to show that best practices are fallible and visitors do scroll. You shouldn’t assume that moving your call to action below the fold will increase conversions over 300%… or at all.

As with all things in CRO, you’ll have to test it for yourself and your audience. The takeaway here is to not be afraid of experimenting below the fold because the idea that visitors don’t scroll is a myth.

Most people will scroll on your page regardless of design or copy cues, but there are a few things you can do to marginally improve your scroll rate.

1. Craft compelling content

How do you ensure visitors want to read the content below your fold? Make the content above the fold awesome.

Sounds simple, right? There’s little replacement for just crafting genuinely compelling content.

Remember, what’s above the fold is what encourages your visitors to venture below it, so make your case compelling.

2. Avoid false bottoms

Remember the false bottoms we mentioned earlier? These are everywhere…

All I had to do to find those two examples was open AngelList and look at the top trending startups for this week.

When you have a false bottom, you don’t give visitors a reason to believe there is something below the fold. As a result, they will attempt to scroll less often.

Avoiding a false bottom is pretty easy…

3. Ask them to scroll

Sometimes, the best way to get someone to scroll is simply to tell them to scroll. Consider subtle directional cues…

And not-so-subtle directional cues…

It’s whatever you can do to make scrolling the obvious choice.

Conclusion

So, let’s get back to the original question: is above the fold really that important? Without a doubt, the answer is yes. However, the reasons why it is important are a little different than the best practice would have you believe.

The content above the fold…

1. Sets the stage for future content. Is this product or service interesting? Is there more content?
2. Sets a quality expectation. Is it worth reading? Will it be helpful to me?

Everything above the fold helps your visitors decide whether your site is worth reading at all. [Tweet it!]

Here’s what you need to remember about this particular best practice:

1. Put your most compelling content above the fold. What makes your product or service interesting and valuable?
2. Most people can and do scroll. Don’t be afraid to put content and even calls to action below the fold.
3. You can encourage visitors to scroll by avoiding false bottoms and making it obvious that there is more content below the fold.
4. Understand the certainty of your visitors and the complexity of your value proposition. Don’t go straight for the ask if your visitors need more information to make a decision.
5. Use Google Analytics to find out what screen resolutions your visitors use most often. Design for those resolutions (and check on all of the other resolutions using Chrome).
6. Different devices and screen sizes make it difficult to name an average fold position, but here at CXL, we use 600-700 pixels as a guideline.
7. Experiment for yourself. There’s weight to this best practice, but nothing is ever absolute in CRO. Test different call to action positions, test different content above the fold. You might just surprise yourself.