Web Design and 'The Fold' - Is It Still Important?

My thoughts on why the fold is no longer a matter of pixels, but a matter of first impression and motivation.

"The Fold" In Print Design

If you're unfamiliar with the concept of the fold, just think of a newspaper. The main article of a newspaper is placed on the front page, with a big, bold headline that grabs your attention. When folded in half, that headline is still visible, along with the article's photo (or most of it), and maybe even the first few sentences of the article. And so when placed in a news stand among competing newspapers and magazines, what lies above the fold becomes that much more significant. It may mean the difference between a customer deciding to buy that newspaper, or grab the one sitting next to it.

"The Fold" In Web Design

We want the same thing for our websites, right? If someone is surfing the web, you need to grab their attention and keep them on the site. If they lose interest, the likelihood of them ever returning is pretty slim. And so the idea of "the fold" in web design typically refers to what is immediately visible to the user once they arrive at your website. You can think of it as "above the scroll" if you want. But what makes a website different than a newspaper? There are no fixed dimensions. A basic HTML site with no CSS applied to it is fluid by default, meaning it's layout will change as the browser window is resized. And that's the way it should be. Good responsive design allows us to change the layout and information presented to the user no matter what device or screen size they use to access our websites. Thus, the fold - in terms of what's immediately in the viewport - is a moving target.

The Myth of the Fold

In the early days when the fold was first adopted in web design, the idea was to cram all of the most important information above the first 600 vertical pixels. But as mentioned earlier, the web has no fixed dimensions. And neither do screen sizes. Take a look at this screenshot from the brilliantly simple website, I Am The Fold:

Screenshot - I Am The Fold (www.iamthefold.com)

The author, Iestyn Williams, adds a line to the website that represents the viewport height of each visitor. The brighter the line is, the more visitors share that same viewport height. This visualization perfectly captures the problem that faces web designers when dealing with the so-called fold of the web. There is no magic number. When it comes to pixels - there is no fold. But does that mean the fold is dead? Not really.

So How Do We Approach the Fold Going Forward?

The fold - in terms of an arbitrary pixel count that all important content needs to be above - is an outdated approach. And it's not really something we need to concern ourselves with anymore. Instead, when we talk about the fold (or more accurately, when clients ask us about the fold), the conversation needs to shift toward what the end user experiences when they first arrive on the website. Don't worry about whether or not the call to action is visible or not. The focus needs to be on motivating the user to spend more time on your site - on motivating them to make that first click, tap, scroll, or swipe that will keep them on the site and engaged. And since all well-designed websites are responsive, the experience you create will change and adapt depending on screen size or device. If that becomes the focus, the fold becomes less about pixels, and more about creating an experience that motivates the user to engage with your content.

Creating Motivation Above The Fold

So how exactly do you do that? Using arrows for example provide not-so-subtle queues to the user to perform a wide range of actions. So if you want a user to scroll down, add a simple down arrow to your design. Another strategy is to only show part of an image. In both cases, it's hard to resist the urge to scroll because you have motivated them to do so. And of course the call-to-action button (when used correctly) is always a good standby. Here are some websites that implement some of these strategies "above the fold":

Scroll Motivation - Example 1: Chris Niedenthal
Scroll Motivation - Example 2: Goran Factory
Scroll Motivation - Example 3: Lunar Gravity
Scroll Motivation - Example 4: Like There Is No Tomorrow

All of the examples above motivate the user to scroll with the use of a simple down arrow, or by showing only the top portion of the main image. In this way, these websites utilize "above the fold" space to create motivation. These are simple tricks, but they can be effective. And keep in mind: a call to action can go anywhere on the site, as long as you motivate the user to get there. Above the fold or not.

What Are Your Thoughts On The Fold?

Does the fold still play a key role in your design process? Do you still follow the 600px rule? How do you motivate users to scroll? Tell me your thoughts in the comments below.

comments powered by Disqus