“The Fold” in Web Design, Explained Simply
- “The Fold” in Web Design, Explained Simply
- Get a Peek Into Your Site’s Usability
Inside the community of web designers, debunking the myths related to “the fold” has been a consistent labor of love for years now.
Most folks understand that the concept of “the fold” comes from print, and that there are different screen sizes, and that it doesn’t directly translate. There’s plenty of questions that start there, though.
- People are too impatient to scroll, right?
- Isn’t content above the fold more important?
- Doesn’t the call to action need to be above the fold?
Too often, these questions don’t get the explanations they deserve. These are totally valid questions that just need a little context and sorting. I’ll give you clear answers and link you to some of the best articles.
Do people scroll?
Yes. Stop worrying.
Scrolling is natural and common for users now. Think about it: would a Mac operating system opt to remove scrollbars entirely if it wasn’t a pretty common thing? I scroll, you scroll, we all scroll. There’s a bunch of articles that give you research to support it.
Now, you can encourage scrolling by making it obvious that there’s more content than is being shown on load. You don’t need to add arrows or text that says, “Scroll down”. Instead, you can make things look “cut off” to hint at the remaining content. This means little more than checking common viewport resolutions and ensuring none of them look totally complete on load.
Applying this research and logic, some of the newer designs that are full-screen on load with only text and a button in the middle would not encourage scrolling.
Is “above the fold” content more important?
Yes, but it’s easy to oversimplify the concept.
Content above the fold is obviously the first to be seen, and it’s definitely the most viewed part of the page. It encourages users to explore further, and it indicates what content is most important. But your content should always be organized by importance to the user, and should continue to be organized as you scroll down the page.
Here’s why: you’ve got about 10 seconds to make a value proposition to your visitor, as they’ll read about 20% of the text on a page—if they stick around after an initial reaction to design and loading speed.
For a pretty definitive understanding of the data behind this, the Nielsen Norman Group spells it out for you. They tested back in 2010, based on the then-common resolution of 1,024 x 768. The most popular now is 1,366 x 768—so, same height, but more width. In their eyetracking studies, they found user viewing time was distributed like so:
“Above the fold: 80.3%
Below the fold: 19.7%”
The biggest takeaway?
“People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.”
That’s crucial to understand, and leads well into the final point.
Should the call to action be above the fold?
Maybe. It definitely shouldn’t be hard to find, or appear after an extraordinary amount of boring copy.
To get the full experience, read one of KissMetrics’s posts on the topic. Definitive, exhaustive, or conclusive? Not necessarily, but it proves the larger point quite well with some data and common sense.
“Higher conversion rates have nothing to do with whether the button is above the fold, and everything to do with whether the button is below the right amount of good copy”
That’s the ticket. If folks are ready to convert when they get to you—or they don’t take much convincing—of course you should have a call to action above the fold. But, if folks generally need convincing, putting the call to action up there could actually hinder your conversions.
That’s the nuance that rarely gets explained: yes, the content above the fold is viewed dramatically more than the rest, on average, and is crucial to convincing your visitors to engage further—but that doesn’t mean you should put the most important calls to action there.
Think of human relationships: first impressions are really important, but you don’t start a conversation by asking for something.
Now that you’ve separated facts from common practices, you can make better decisions for your layout. You’ve ensured:
- Users know to scroll on load based on the design
- The content is good and is ordered properly
- The call to action is in the “right” place
And now, you can start testing and optimizing your way to more success!
Along the way, maybe you can help the next person better understand “the fold”.