Above The Fold Is So Passé. Or Is It?

Since the early days of the Internet, the mantra has been that all the important sections of a website, including the call-to-action, must be placed “above the fold,” the most valuable piece of web real estate. And anything falling below the fold would be lost in the abyss of no-scroll, no-man’s land.

Things have changed since 1999, however. Most people are familiar with using web browsers now, and the availability of smartphones and tablets has got the average Internet user scrolling and swiping along with the best of them.
Accordingly, web design has evolved to now incorporate aspects like mobile optimization and better accommodate a multi-screen, multi-device world, which then begs the question: Does “above the folder” still matter?

Before we get into that, however, let’s go over the origin of “above the fold.”

From Print To Web: What Does Above The Fold Mean?

The term “above the fold” got its start in the print industry where papers are typically presented folded in half and laying flat, making the top half of the first page especially important in terms of increasing readership and enticing people to buy. As a result, the headlines, stories, and photos displayed in the area above where the newspaper is folded in half have to be truly compelling and attention-grabbing, thus giving rise to the concept of “above the fold.”

newspaper

Image Source

Since the advent of the Internet, the concept has also been applied to web content and design, as elements visible within the parameters of the homepage screen (around 800 X 600 pixels), were equated with those visible on the top half of a newspaper.

“When the web was young…newcomers didn’t understand how a browser worked, monitors were small, and the worldwide web was not ubiquitous,” says William Levins. “So back in 1999, something visible within the 800 x 600-pixel dimensions of the home page was more likely to be seen, read, and clicked on.”

The “above the fold” concept was further ingrained because at the time AOL’s standard interface was limited to the same 800 X 600 dimensions. So if your copy took up any more space, visitors had to click through to the next page to continue reading. Consequently, it’s unsurprising that the general consensus became that both your call-to-action and most important copy must be placed above the fold because visitors were less likely to browse beyond that.

But that was then.

In the constantly evolving world of web design and ecommerce, how much does above the fold still count today? Let’s find out…

Does “Above The Fold” Still Matter In 2016?

The short answer is yes. Above the fold does still matter but not in the way that was previously thought. Let’s take a look at some examples of websites that are still designing for the fold and ones that are saying, “Let ’em scroll!”

Above the Fold Example 

michael_hyatt

Image Source

MichaelHyatt.com places his call-to-action just above the fold, but the overall site design creates a “false bottom,” making it appear as though the site stops there and visitors have no reason to scroll.

Above the Fold Example 2

optimizelyarrow

Image Source

Optimizely also places its call-to-action above the fold, but the snippet of text: “Deliver the best experiences for every customer across desktop, mobile…,” which is visible at the bottom of the screen, eliminates the “false bottom” effect and lets visitors know they should continue scrolling to learn more.

Below the Fold Example 1

james_clear

Image Source

In order to signup to receive James Clear’s free guide, users have to scroll past the fold, first reading about who James is as a person and what his weekly emails entail. Since James’ business is his personal brand, his goal is to familiarize visitors with his mission before asking them to take action.

Below the Fold Example 2

gary

Image Source

By watching an above-the-fold video, Gary Vaynerchuk also wants visitors to get a flavor for what he and his personal brand are all about before he asks them to complete one of several calls-to-action, all of which can be found below the fold.

Proper Motivation Is Key

According to Conversion Rate Optimization Consultant Bnonn Tennett, the digital fold is actually a red herring, which bears no real weight on call-to-action conversion rates. To illustrate this point, Bnonn presents an example involving two versions of a signup page from The Boston Globe. 

As you can see in the first version, the call-to-action is above the fold (this version was also used as the control treatment).

boston globe 1

Image Source

Whereas in the second version, the call-to-action falls below the fold.

boston globe 2

Image Source

Keeping in mind that the rest of the copy is exactly the same—the only difference is the location of the call-to-action—which signup page, or treatment, do you think performed better?

daniegl burstein 1Daniel Burstein“Well, here’s the kicker. There was no significant difference between any of the treatments. The Boston Globe audience is highly motivated, and putting a button above or below the fold didn’t matter as much as the newspaper’s respected journalism.”

So rather than focusing on whether to place your call-to-action and other crucial information above or below the fold, instead ask yourself the following question:

How motivated are my prospects to take action (i.e. scroll)? 

The fold is more of a concept than an actual measurement, representing the point at which visitors will lose interest in taking action and spending additional time on your site, or they will be incited to scroll to read more. In a nutshell, higher conversion rates have little to do with whether or not the information, button, or form are placed above the fold and much more to do with whether they are placed below the right prompts and most compelling copy.

Other studies further corroborate this conclusion.

milissaMilissa Tarquini: “On the AOL Money & Finance homepage, users find and use the modules for recent quotes and their personalized portfolios even when these modules are placed well beneath the 1024×768 fold.

Another example within AOL Money & Finance is a photo gallery entitled Top Tax Tips. Despite the fact that the gallery is almost 2500 pixels down the page, this gallery generates between 200,000 and 400,000 page views depending on [the] promotion of the Taxes page.”

below the fold AOL

Image Source

According to Amy Schade of the Nielsen Norman Group, “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. This is true on any size screen, be it mobile, tablet, or desktop: anything that’s hidden and that the user must uncover will only be seen if the user deems it worth the hassle.

It’s a simple matter of interaction cost:

  • Visi​ble without further action (i.e., above the fold) = low interaction cost to review
  • Invisible and requiring an action to be made visible (i.e., below the fold, or otherwise hidden) = higher interaction cost, consisting of (a) the mental effort of guessing that something is hidden and having to make the positive decision to reveal the content, and (b) the physical effort of doing what is required to see the content (e.g., scrolling the page).

We don’t go to a page, see useless and irrelevant content, and scroll out of the blind hope that something useful may be hidden 5 screens down.  What we find at the top of the page helps us decide to continue scrolling, navigate to another page, try another site, or abandon the task altogether. This is why long pages can benefit from signposts at the top of the page, via links or through content, that show users what is coming next.”

What Should Go Above The Fold?

Think of above the fold as in the spotlight, center stage. It’s the place where your unique value proposition (UVP) should go, clearly and concisely explaining what your page has to offer. Justin Christianson of Conversion Fanatics says, “We find that it is still vitally important to maximize above the fold of the page. Benefits. Proof. Strong Headline. What you do quickly. And [a] strong, clear call-to-action works better than not.”

But don’t stuff overwhelming amounts of information or signup forms into the above-the-fold area. People don’t have the patience to weed through tons of content or visuals anymore.

Moreover, when it comes to your call-to-action, while “placing your CTA above the fold is the most common placement choice,” Oli Gardner of Unbounce reports that “this can be expecting too much of someone who has just arrived at your page.”

Visitors may want to get a closer feel for you and your brand instead of being immediately encouraged to take action. So don’t just place your CTA above the fold because you think it’s what you should do. Make sure it’s a well-thought-out decision.

What’s Okay To Put Below The Fold?

The two primary purposes of the above-the-fold area are 1. to convey a strong UVP and 2. to compel visitors to scroll, so don’t be afraid to put important items, like your CTA, below the fold (as long as you’ve accomplished these two things).

Shanelle MullinShanelle Mullin“In some cases…the one-line value proposition is clear (and convincing) enough to warrant an immediate ask (e.g. ‘TRY DESK.COM FOR FREE’ and ‘Test it Out’).
In other cases…more copy and creative is required to create a clear (and convincing) value proposition, meaning [asking] will be delayed (i.e. below the fold).”
You also shouldn’t be afraid of working with long pages.

Conversion Rate Experts“As a rule of thumb, your page should contain at least as many words as you’d use when selling your product or service face to face. That’s because you don’t have the luxury of being able to ask for objections, so your page needs to address all of the most common objections. When Moz’s CEO, Rand Fishkin, told us that it takes him about nine minutes to sell Moz’s PRO service face to face, we realized that the landing page would have to be long. The winning page we designed for Moz was six times longer than the control, which it outperformed by 52%.”

How To Encourage Scrolling

Peep Laja of ConversionXL maintains that content placed above the fold grabs 80% of our attention, making it highly valuable to get visitors to take action right then and there or to continue scrolling to learn more.

Therefore, you want to place the most interesting, relevant, and compelling information at the top of your page to entice visitors to visit the bottom of your page as well.

It’s like the inverted pyramid metaphor used by journalists to illustrate the most effective way to structure and prioritize content.

inverted pyramid

Image Source

Amy Schade says, “Webpages need to build a solid story” and provide visitors with a reason to scroll. “Just like waiting for a page to load, flipping through a carousel, or opening an accordion to view text, scrolling adds an extra step that users must take to accomplish their goal,” and the more steps you require of visitors, the more likely they’ll be to abort the process.

So, in order to encourage scrolling on your site:

1. Create Compelling Content

This, of course, is easier said than done. But for starters, focus on the benefits (not the features) of your offer and use words that people can relate to (i.e. no fluff or industry jargon). The content you place above the fold is going to have the most sets of eyes on it, so it’s got to be engaging and persuasive.

2. Don’t Create A False Bottom

You see this all the time. The page may look nice and neat, framed perfectly within your browser with a clear endpoint (or so it seems). But having a false bottom on your page makes visitors believe they’ve seen everything you have to offer, rendering them less likely to scroll.

Earlier, we looked at an example of a site with a false bottom from MichaelHyatt.com. Here’s another example from AutoFi.

autofi

Image Source

Nothing about this site says, “But wait, there’s more! Keep scrolling and you’ll see!” Fortunately, avoiding the false bottom effect is actually pretty easy to do: Avoid placing horizontal visuals near the fold, including lines, bars, and bands of white space, as they can mistakenly signify the end of the page.

Conversion Rate Experts“A simple way to remove all horizontals is to have page elements in each column end at different heights on the page. That way, at least one page element will straddle the fold, regardless of the user’s computer settings.

Ideally, the page elements that straddle the fold should be ones that have a well-known form, so it’s obvious when they are incomplete.”

comic

Image Source

Additionally, some sites attempt to break the false bottom effect by including visual cues, such as scroll arrows or animated images, to indicate there’s more content below.

design with an arrow

Image Source

According to Amy Schade, however, “Designs shouldn’t need an arrow to tell users to scroll.” But that’s far from a hard-and-fast rule, and we’re about to talk about how visual elements can actually be beneficial.

3. Include Visual Cues or Graphics

Huge, Inc. conducted a study to assess the extent to which visual cues influence visitors’ scrolling behavior. And based on their research, they suggest various factors designers should take into account when considering whether or not to incorporate scrolling cues into their sites’ design.

rebecca gordonRebecca Gordon“We tested four design versions:

  •  A control image, with no visual cues to scroll below the fold.
  •  A scroll arrow that cues users to scroll down.
  •  A short image, where users had to scroll to see above-the-fold content in entirety.
  •  An animated image with a moving element to lead viewers below the fold.

scrolling research

Almost all participants scrolled, no matter what.

Recommendations.

We learned that participants almost always scrolled, regardless of how they are cued to do so—and that’s liberating. While it’s hard to make universal recommendations, we’d suggest that designers use the cue that works best in its context.

Designers should choose cues for scrolling based on the content, the business category, and the overall design. Does the content feature block text, images or video? Is the site for ecommerce, editorial or news? How do visual cues integrate with existing design elements? All of these variables will affect the optimum placement and effectiveness of scrolling cues.”

Here’s an example of a site that’s subtly using a visual cue to get visitors to scroll…

suble cue

Image Source

And one that’s using a much more obvious graphic…

put things off

Image Source

As an alternative, you can add a visual cue to a “freestanding object that’s fixed to the bottom of users’ browser windows,” says Conversion Rate Experts. “The graphic will then appear at the bottom of their page regardless of what their screen resolution is. Advantages of objects like these are that they don’t disrupt the design and that you can add them by using a simple script.”

4. Make Your Graphics Operational

If you decide to use graphics to get visitors to scroll, why not go the extra mile and make them clickable? Follow these Javascript instructions to enable click-to-scroll functionality and even alter the speed with which the scrolling occurs.

With HTML, you can also link to specific locations within the same page, allowing users to click on an above-the-fold link and then jump down to the section they’re most interested in.

johnson box

Image Source

With So Many Devices and Screen Sizes, How Can You Find The Fold?

Given how we’re all using multiple devices with varying screen sizes and resolutions, the question of the fold’s location has become a tad more complicated in recent years. However, there’s a free tool you can use called Where is the fold?, which helps discern the amount of your content that appears above the fold on some of the most common devices and screen resolutions.

To view how your site looks in a variety of resolutions, follow these steps.

Shanelle MullinStep One: Open a Chrome window, right click and select ‘Inspect Element.’

Inspect Element
Step Two: Click the device icon in the top, left-hand corner of the ‘Inspect Element’ window.

Device View
Step Three: Choose a custom screen resolution or select a specific device from the drop-down menu.

Device Selection
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 Nokia phone, and neither do any of your friends, [that] doesn’t mean your visitors don’t.”

As another trick of the trade, it’s worth the extra effort to identify which resolutions your visitors are most often using to frequent your site, which you can do by following this simple two-step process:

  1. Using Google Analytics, go under “Audience,” choose “Technology,” and then select “Browser & OS.”
  2. Beneath the graph, look for where it says “Primary Dimension” and then choose “Screen Resolution.”

That’s it! You will now have the top ten resolutions that visitors are using to access your site.

Conclusion

In sum, does “above the fold” still matter in 2016? Absolutely. Does it matter the way we previously thought? Not exactly. According to Tony Haile, CEO of Chartbeat, “66% of attention on a normal media page is spent below the fold,” with the bulk of visitors focusing on content just above and just below the fold.chartbeat

Image Source

For your visitors, the content you place above the fold serves to establish the tone, quality, and perceived value of your future content. It also serves to indicate whether or not there is in fact any more content to come. The content above the fold helps your visitors decide if it’s worth their time and energy to continue scrolling—a decision that’s made quite quickly.

So remember, most people can and will scroll; they just have to be given proper motivation to do so.