Brad Frost Tweeted out a seemingly innocent link to thereisnopagefold.com, and I stepped right into his trap. The “fold” as we like to refer to it is a holdover from our print brethren. Newspapers were folded, stacked in piles, and sold at outlets where the top half of the paper, which is all that was visible, had to have a headline that could grab someone’s attention and initiate a purchase decision within seconds. Upon purchase, you unfolded the newspaper, and arguably less important stories ensued on the bottom half. Though, presumably, the paper was always unfolded and reviewed.

Modern day... a website is created and a certain amount of real estate, pixels or browser space is visible at load. That space is important. It serves the same purpose as the top half of that old hand-soiling, dirty newsprint. It must get our attention and provide information in a limited amount of space. But here’s where the game changes – we can scroll on that space, unfold the newspaper per se. But do we have to scroll? Or perhaps can something grab our attention immediately and cause us to navigate away, hence never seeing what lies beyond the fold?

The Fold is Contextual

On Frost’s example site, my desktop browser displayed this:

But what if I had seen this?

A subtle difference, the comma becomes a period. In both cases I had a visible scroll bar, but contextually I was being told two entirely different things. I surmise that on the second site, the one with the period, Google analytics would show significantly shorter time on page coupled with higher bounce rates. One invites me to scroll, and one does not. Certainly these are examples of different contexts.

The Fold is Device Specific and Contextual

I’ll also look at the site Frost used as an example for mobile. On the left, you see the true representation on an iPhone 4 – an obvious invitation to scroll, again done contextually through the comma and the cut-off word. However, one major change from desktop to mobile, the missing scroll bars, now provide one less hint at more content. Removing the comma creates an entirely different experience (on the right). Is there more content? Hard to tell.

But how much of any user’s time do we have, mobile or desktop? Studies say likely just seconds. In one example, we’ve successfully indicated we have more information to share. In the other, we’ve failed. What do both examples prove? We have a finite amount of space and time to convey our message. So we better make sure we use that space and time wisely.

The Fold is Device Specific, Contextual & Individual

The inherency to scroll can be attributed to individual circumstance and personality. I liken it to the right brain/left brain, frontend/backend or designer/developer types of makeups. Some people immediately look for an easy way to navigate or find information and other users take more time. If you were to form a focus group, I would wager that half would find things on an initial page load that would be what they think is important or might be looking for and navigate away. Whereas the other half might spend more time perusing, and yes, even scrolling.

On Twitter, Cennydd Bowles asked “Do you listen to the entire album if the first three songs suck?” Interesting analogy. Some of us bail after two or three crappy songs. Others will listen through the entire album regardless of suckiness, some listen to the first part of every song hoping to find that beat that draws you in, a few might even listen over and over until they convince themselves they like it. Different people do different things. However, if the first song is phenomenal, the second song is far more likely to get a listen, and if the second is good, the third is heard... and on, and on.

Designing above the fold fits into the album analogy really well. Why do we all make different decisions when listening to see if an album is good or not? I submit it’s the same reason we all make contrasting decisions when we get to the viewable area, the space above the fold, on a website. That’s why good content in that limited space is paramount. Enticing someone to listen to that second song is like encouraging a user to scroll.

Using NFL.com as an example – on the left you have what appears to be all of the important information for any fan – scores, fantasy and team info. I may, as a rabid fantasy player, opt immediately toward the fantasy link. However, only a more engaged fan might scroll to see that the NFL season was cancelled (fictitious example on right). Now let’s argue with news that profound, the NFL would have most likely reprioritized the viewable portion of the site. But wouldn’t that in itself be evidence that the fold does indeed exist?

Let’s make use of these two examples beyond content, to advertising. When you look at the example on the left, you’ll notice an ad for GMC. When I scroll, that ad is gone. Why does GMC view that space as premium, more important... more valuable? Because it is, it lies above the fold! It’s in an immediately viewable screen area. Not every user will scroll, not every user has to scroll, but every user will see that ad. That’s why GMC places more value on that space.

The “fold” is that spot, location or imaginary line on any screen where information is no longer visible without an action or a contextual suggestion. Don’t want to call it a fold? I don’t care, call it visible pixels upon load, the TIPLoVeS (The Initial Page Load Viewport Space) or the viewable homepage. For me, the “fold” is just simpler to say, and most understand the concept from the newspaper days.

If you’re working with that one donkey boss or client who thinks the fold is only that single, stationary line on his/her desktop computer that delineates what they can see, make them read this. Then smack them upside the head for me. We can’t help those people.

One carryover word I don’t mind keeping from traditional print is fold. After all, we only have a few seconds to sell a newspaper, an advertisement, a headline or the content of our entire site. So you better make sure that shit is above the damned fold.

Special thanks to the Twitter peeps that got me off my lazy ass to write this – @Brad_Frost, @nstop, @cennydd, @stuRobson, & all the others. Follow “us” on Twitter @BDConf and follow “me” @ThreeLakesWI.