Clockwork Active Media Systems

How many times have you been asked to move something "above the fold" on the homepage of a website? In this post we'll start with a definition of the "fold" term itself, look at some of the web design principles we can extract from this print term, and then give some recommendations on how to handle the situation should it ever arise.

There were a couple links passed around Clockwork last month sparking further discussion about "the Fold." The first was Google Browser Size, which lets you type in a url and see an overlay of statistics relating to browser size. The second was http://www.thereisnopagefold.com/ where the url pretty much sums it up.

Both sites are interesting and useful in their own way, but neither provides the context you might need when discussing the fold issue with a client. The Browser Size tool implies that a "donate now" button must be at the top of your page, while the other link could be a bit too cynical to send to a client. So let's begin with a definitition of the fold.

Definition of the Fold

The "Fold" is a graphic design term that refers to the crease in a newspaper, dividing the front page into upper and lower halves. Since newspapers are displayed folded up in a stand, only the top half is visible. This means the most important information, or what the editors believe will help sell the newspaper, is placed "above the fold."

In web design, this term has been adapted to mean the portion of the web page that can be viewed without scrolling. The fold then is the bottom of a web user's browser window.

Newspapers and Websites: We're Similar!

A website is a lot like a newspaper, so it's a good analogy to have. At a high level, we can learn the following from the "above the fold" rule:

1. Just like the front page of a newspaper, a website homepage needs to present different chunks of information to pique the reader's interest. (Pushing readers to internal pages for more detail on a particular subject.)
2. A website homepage should have a clear visual hierarchy, and since we read from top to bottom, the most important information should generally be at the top.
3. Readers will quickly decide whether they're going to stay or leave based on their initial impression.

But Really, We're Different

Unfortunately though, a newspaper and a website are fundamentally different and we shouldn't be so literal as to assume the following:

1. Just like the front page of a newspaper, there is a specific line at which the homepage will be cut off for every reader.
2. All important information needs to be above this line.
3. Visitors will not scroll.

Discussing the Fold with a Client

These last three points are where web designers often find ourselves scratching our heads. We know that the fold is a moving target, and really it's a moot point if you've done your job creating a clear information hierarchy. But regardless, it still comes up and it's our job to educate any client asking us to make changes based on the fold. Here are some things to point out:

1. It's a Moving Target  - While the fold of a newspaper is at a measurable location, the fold of a website depends on many factors: the most commonly discussed are screen resolution and browser size. However, many statistics make the assumption that someone on a 1024x768 screen, for example, will keep their browser fully expanded. We also need to consider the amount of toolbars or add-ons that are affecting the view port. And beyond that, every site has a different set of visitors so tools like Google's Browser Size might not give an accurate picture.
2. Clear Information Hierarchy - Don't waste too much time arguing the existence or location of the fold, instead focus on the information hierarchy. Here's your chance to explain why the information is displayed the way it is, and why you believe that visitors to the site will find what they are are looking for. If you've done your job well, then it's ok if some things are cut off because the number one call to action should be visible.
3. Let the Browser do its Job - Web users know how to scroll, and they will do so if they're interested. I like to think of website presentation as a joint effort between two teammates: the browser, and the website itself. Just as in any teamwork situation, you can't constantly second guess your partner. You have to let them do their job. As web designers we've gotten past putting "back" buttons on every single page or automatically resizing the window on page load, because we know the browser can handle this. Similarly, we need to trust that scrollbar can and will be used.

Conclusion

There are some great things to learn from the "above the fold" rule, but if taken too literally the user experience will actually suffer. This is not print design, and there is no specific pixel number that divides the top of the page from the bottom. Even if you pick an arbitrary location for the fold, not all of the information needs to be above it. Unlike someone walking by a newspaper folded up on a stand, web users have chosen (in some fashion) to view your homepage, and they will interact with content that interests them. Instead of focusing on the fold itself, make sure your designs have clear information hierarchy and that the homepage captures and communicates your key message.

Sources

Above the Fold -http://en.wikipedia.org/wiki/Above_the_fold