That Pesky Fold
Scrolling behavior is a given, but being strategic with the fold still pays off
Why is it called a fold? This isn’t paper!
Back in the day — when people read news in, well, newspapers rather than on the web — the upper half of the front page of a newspaper was considered primo real estate. Because papers were often displayed folded in newsstands, the content above the fold would be facing up and be the perfect spot for breaking news, eye-catching headlines, and scintillating stories. The region was also greatly preferred by advertisers. Pedestrians, passing by the neighborhood newsstand, knew that any features above the fold were that day’s major headlines. And, although newspaper dimensions varied substantially across different publications, each individual publication knew its dimensions. Thus day after day, print after print, the above-the-fold space designated as “important stuff goes here” was consistent and predictable.
Okay, so why do we care now?
As virtual eventually began replacing the tangible, the term just sort of stuck. So that now, on webpages, the portion of the page visible without scrolling is also referred to as above the fold. Unfortunately, factoring in a multi-screen world, defining the above-the-fold spaces is more complicated. Recent data from W3C and DeviceAtlas identify 8 common tablet and PC display sizes and 12 smartphone resolutions. Translating to 20 different popular breakpoints amongst the most widely used web-viewing devices, which doesn’t begin to consider the myriad of other possible dimensions used by not-so-popular viewports. Now, that pesky fold could be anywhere and everywhere, making that “important stuff goes here” space that much harder to find.
That sounds complicated. What am I supposed to tell my team?
Don’t worry! There are plenty of resources available to find the most popular screen resolutions by geographic location, which will help establish initial parameters. Adopt a strategic mobile-first approach and narrow down to truly valuable content. Remember, a design should work for both portrait and landscape views on mobile devices. Also, don’t forget that people scroll, so utilize the space below the fold as well.
Ah, so people scroll. Does this fold thing even matter then?
Excellent question. Eye-tracking and usability studies conducted by Nielsen Norman Group (NNG) found that, while the percent of viewing time above the fold has been on a downward trajectory, attention span after the fold still sharply decreases for each subsequent screenful of content. Although the pervasiveness of mobile experiences and long-scroll pages has created a learned behavior with users — in fact, longer-scrolling pages may even increase conversions — relying on dwindling down-screen eyeballs for critical messaging is foolish.
NNG also hit the nail on the head when they said “the fold is a concept. The fold matters because what appears at the top of your page matters.” In other words, don’t cram everything above the fold, but don’t discount its importance either. Be strategic about what you show in that space.
Strategy, got it. How about a checklist of what I should probably put there?
When determining what to show above the fold for your particular website, consider usage patterns and ubiquitous visual vernaculars. Above the fold, users expect to see:
- value proposition (what your site or service offers)
- main navigation
- primary functions or access to primary tasks
- something interesting that will encourage scrolling
After all, as Amy Schade notes,
“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.”
Alright, you’ve convinced me to be strategic about what goes above the fold. But how do I convince my clients who want to cram everything there?
First, bust that myth about users not scrolling by providing them with cold, hard numbers. For starters, this one: 66% of attention on a normal page is spent below the fold. Or perhaps this is more your taste: people use the scrollbar on 76% of pages. Counter with an explanation of the purpose of the fold and a strategic vision of how the space can be effectively used to introduce the user to the rest of the site. Remind your client that much of design is storytelling, and that which entices someone to read further is a tantalizing hook, not a hodgepodge of clutter. Users scroll for a purpose; the fold should give them one.
Additional reading:
