woman reading newspaper

Rethinking Above the Fold Web Design

I have been developing websites for  nearly 15 years now. I have seen many trends come and go, but one design trend that persists is the mythical “fold.”

So what is “the fold?” How do you go above or survive below it? As with many early web design concepts, “the fold” is rooted in print design:

Above the fold

Above the fold is the upper half of the front page of a newspaper where an important news story or photograph is often located. Source

The big story! The awesome photo! All on the front page when the newspaper is folded in half. All designed within a known height and width with the thought that all people passing by the newsstand will see it displayed exactly the same way.

The digital divergence

Most early web designers came from a print background, so it makes sense that many of the original practices of web design have roots in print layout. For websites, “above the fold” came to mean any parts of a webpage that could be seen without scrolling down. Source

So what does that mean today?

If you have any hand in web design, you have experienced this:

  • You design a website for a client. The design is rock solid. You know their brand, you know their story, you have chosen amazing graphics and the use of color kicks ass.
  • You load the site with all their content and choose the ideal typography.
  • You send your client a link for approval with confidence.

What happens next?

You get the following feedback: The design is awesome… BUT when they open the site on their computer they don’t see… [fill in the blank with multiple pieces of content] …without scrolling. Can we just move…[ fill in the blank with multiple pieces of content]… so all of our visitors can see it without scrolling?

Sigh. Goodbye clean design. Farewell sleek layout.

Webpage on laptop computerThe case against “the fold”

We have all gone to a website that we know is bad. It’s cluttered with information; there isn’t much space; call to actions are unclear. So what happens then? We leave. We had every relevant piece of data about this company “above the fold,” and it still couldn’t hold our attention.

That’s why we’re revising our thinking when it comes to designing for “the fold.” Unlike a newspaper editor, we have no idea how visitors will view our site. They may be using a super high resolution flat panel monitor or they may be sitting at grandma’s house rockin’ her Windows ’98 with a 500-lb., 15-inch monitor.

But monitor size is just one variable. Combine that with other factors – browser, resolution, extensions – and you’ll see the vast differences. (Don’t believe us? Download the latest versions of Google Chrome, Mozilla Firefox, Internet Explorer & Safari and see for yourself. “The Fold” will be a bit different on each one.) And we haven’t even opened up what is by far the biggest hornets’ nest in design: mobile. (See: iPhone (4, 4s, 5)?, iPads, (Mini too), Touchsmart, Yoga, Transformer, the entire Samsung Galaxy family.)

So what’s a developer to do?

The bottom line is we have no idea how much real estate we have “above the fold” for any visitor. But you know what we do have? A compelling story. Scrolling is the most natural movement we make, both on desktop and mobile devices. Recent studies indicate that many users are more comfortable with scrolling than with clicking to another page. Take advantage of all the real estate you’ve got, and trust that your readers will stick with the content.

After all, that’s what got you here, isn’t it?

If you want to dive deeper into “the fold,” visit: Life Below 600Unfolding the Fold and Blasting the Myth of the Fold.