“A” is for: Above the Fold

What is “above the fold”?

Anybody who knows me knows that I’m a fan-with-a-capital-F of the musical Newsies. I tend to quote lines at will, complete with my attempt at a New York accent. (Even now, as I type this, I’m engaging in a rousing mental sing-a-long of “The World Will Know”.) Newsies tells the story of a ragged bunch of orphans and runaways that had to earn a living selling newspapers on the streets of New York in the late 1800s. When forced to pay an additional “ten cent a hun’ned!” to distribute papers, these newsboys organized a strike against newspaper tycoons Joseph Pulitzer and William Randolph Hearst for implementing the cost hike. I won’t spoil the ending for you; you’ll just need to watch it for yourself! I But I bring it up because it fits right in with today’s topic.

Pulitzer and Hearst, in their ruthless circulation wars, understood the importance of “the fold” in their industry. So much so that they made it a habit to sensationalize their headlines in an attempt to increase profits and outsell the other. Whatever was on the top half of the front page —above the fold— of their newspapers was paramount. It’s what enticed readers to buy their papers. It’s what put money in their pockets.

Keeping with its humble newspaper origins, “above the fold” in web design references the area of a web page that is initially visible without scrolling. Web designers and marketing experts alike have long touted the importance of keeping elements above the fold, or on the top part of the screen, because “people just don’t scroll.”

The yellow journalism of Pulitzer and Hearst had its day back in the 1890’s. But this is the 21st century. Is the importance of “above the fold” applicable to modern day web? Do we still need to hang on to an antiquated print concept from the 1800s? It all depends.

Where exactly is “the fold” in a web design?

Ah-ha, bit of a trick question. Unlike a printed newspaper, where the size of a sheet of newsprint is standard and predictable, the fold online is not a set height. On average, it can vary from 500 to 800 pixels down, because it depends on the monitor resolution and browser window that the page is viewed on. When designing, this makes adhering to somebody’s fixed notion of “the fold” a bit arbitrary.

The most popular browser resolution at the time of this writing is 1366 x 768px. Which puts the fold on a desktop of that resolution liberally around 700px in the best case scenario. However, there are still people that view on smaller screens, and people who don’t view at full screen, and people with browser toolbars taking up extra space; and therefore, their fold is different from your fold.

If you’re curious about your own website, use this online tool to type in your website address and view results of “the fold” at various screen sizes. You may be surprised at what you see! If you’re using Google Analytics on your site, it also has a feature to show you how much your audience can see of your web page based on their browser size.

Is above the fold better for conversion?

Nope, not necessarily. It completely depends on your audience and your “ask”. What are you asking your visitors to do? If you’re wanting too much of a commitment upfront, then you could experience low conversions from having your call to action too high up. You’re asking them to commit before they’re comfortable doing so. This can actually have negative consequences, as it introduces confusion or resentment into their decision-making process, which projects onto your brand. The best place for your call to action isn’t always above the fold. It’s at the point where your visitor is ready to take an action. Sure, that could be at the top of the page… or it could just as easily be at the bottom.

As a rule, the bigger the commitment, the more copy you’ll need first to talk them into it. In contrast, receiving a free white paper in exchange for their email address shouldn’t take as much convincing. The only way you’ll know for sure is to test your own page. Don’t rely on buzzwords and generic advice. Don’t take Joe Schmo the Marketing Pro only at his word. Don’t even take mine. Just test – the data doesn’t lie. There is no way to give general advice that accounts for all the different variables among businesses and websites.

So is the fold irrelevant?

The desire to “put everything important” above 500px is what I’m referring to here. I’ve gotten that request time and time again, and I push back against it each time. Trying to do too much above the fold can unfortunately result in poor design, and more importantly, poor conversion. But don’t take that to mean that the “above the fold” quest is irrelevant. Quite the opposite — this area serves as the introduction or first impression that someone has of your website. There is no doubt that the content above the fold will get the most attention simply because it’s there. So that area is crucial in you laying out your case. It is where readers will decide if your page is worth staying on. Ideally, that area should clarify what the page is and what the value proposition is. It should answer the immediate questions the visitor would have, or entice them to continue on to find out. The area above the fold is still very, very much relevant.

The notion of “the fold” itself, however, as a fixed line that separates “all the important stuff” from “the rest of it”, should be re-examined in your own context. Today, advances in technology and more modern websites have taught us that people also evolve, and so do their browsing habits. In the early days of the web, scrolling was a less understood concept. Now, users are used to scrolling and expect to do so. User behavior adapts in response to changes in technology, past experience, and new devices.

In our age of modern devices, we are able to “scroll” with a simple swish of our fingers, whether on a laptop trackpad or the surface of a tablet. Minimizing the need to click, hold, and drag a scrollbar around with a mouse has freed us up to be more exploratory. Adding to that the popularity of responsive design, “the fold” is especially ambiguous because it can be wildly different depending on what device you are on. Even a single device, say a tablet, will have a different “fold” depending on whether you are holding it horizontally or vertically. To try and account for every single fold there is nowadays is an exercise in futility and would be a colossal waste of time and resources.

What you should do instead of focusing on the fold:

The fold is not a bad thing. You just may need to shift your perspective in how you relate to it. The area above the fold is like the store window of a clothing shop. You don’t see Macy’s trying to cram their entire inventory into a window display simply because each piece has the potential to bring in money. Instead, they focus on showcasing a couple of mannequins that they have impeccably dressed, intentionally designed to entice you to walk through their door.

• So, just — be enticing! Focus on what you want your first impression to be, and what would entice people to stay interested. Simply focus on placing information that is most important and most engaging to your visitor at the top of the page. That’s it. Just start there.
• Keep above the fold simple. Moving content below the fold increases clarity by decreasing clutter. It becomes much easier to get your point across. So, as you’re being enticing at the top of the page, don’t worry so much about where the fold is, just keep it simple. If you do this, you’ll likely end up staying above the fold anyway. See what we’re doing here? Yes, the fold is important, but it needs to be a secondary focus to your actual communication. Communicate effectively, and “the fold” will fall into place. If your content is compelling enough, users will scroll.
• Use visual cues so that people know there is more. Even while the Nielsen Norman Group determined that 80% of users’ attention remains above the fold, they also found that pages designed to scroll did in fact encourage users to scroll. This was in 2010. In just the few years since then, we’ve seen an explosive rise of long homepages, often with a parallax (animated) effect that makes scrolling fun, more interactive. People will actually scroll very far down a page if the layout encourages scanning and if the information they do see interests them enough to keep reading.
• Focus on flow. Figure out how much information your users need before they are willing to take the action you want them to. Test to find out the best flow of information and place your call-to-action accordingly. Don’t just assume it will perform best above the fold.

“Headlines don’t sell papes. Newsies sell papes.”

Browsing habits change — people do scroll. So don’t be afraid of below the fold. The thing to keep in mind is that human nature is basically unchanging — we still need to get something in exchange for giving our time and attention. If you want your users to scroll, you have to give them reason to do so. Don’t be lazy and point at “the fold” as an excuse, as if it is an impenetrable barrier. You can’t simply rely on cramming things “above the fold” as a foolproof formula; you’ve got to make sure you’re doing a good job of convincing people to continue. Invest in a copywriter, a good designer, a good photographer, UX testing, whatever it is that you need in order communicate better with your audience and encourage them along. In essence, that’s the underlying point made by newsboy Jack Kelly (Christian Bale) when asked what to do when there’s a bad newspaper headline. Rather than falling back on convention, he understood the importance of actively persuading. I’ll leave you to ponder his wise and immortal words: “Headlines don’t sell papes. Newsies sell papes.” Amen, Jack.