Website Design & The Fold

Website Design & The Fold

May 7, 2010

’ve been asked a number of times by clients to make certain things appear “above the fold” and I thought that I should clear up a number of misconceptions about the term. The idea of the fold comes from the newspaper industry, where folded newspapers put their most interesting content above the fold in order to grab the attention of passers-by. While the same concept arguably still exists in the web industry, there are a number of key differences.

The fold varies

Your fold is not the same as mine. There are a number of things that contribute to what content a user can and can’t see on your website without scrolling, namely: the size of their monitor, the size of the window they have open, their video card settings and their web browser. So while content could only be either above or below the fold on a newspaper, content on websites is much more varied in its visibility.

We design for people with basic setups — basic, but not ancient. It’s incredibly important that all users are able to see your content, that’s why any good designer will make sure your site looks just as good in the ten-year-old Internet Explorer 6 as it does in a modern browser. At the same time, your visitors shouldn’t suffer because they have larger screens, and so a middle ground needs to be found.

Take a look. This handy tool will show you a general percentage of how many people will see the content of a webpage without scrolling. Here’s an example using

People Scroll

If they’re there, they will look around. You’re not trying to convince someone walking by to purchase your newspaper from a newsstand, if someone has made it to your website then they will take the time to look around. Hell, I somehow convinced you to scroll down here to read this, didn’t I?

It’s as if users arrive at a page with a certain amount of fuel in their tanks. As they “drive” down the page, they use up gas, and sooner or later they run dry. The amount of gas in the tank will vary, depending on each user’s inherent motivation and interest in each page’s specific topic. Also, the “gasoline” might evaporate or be topped up if content down the page is less or more relevant than the user expected.

Don’t drain the tank. This analogy (from the article referenced below) reinforces the importance of really knowing your audience and what motivates them. If you know all the different scenarios of why they are there, then you will know what will keep them reading, above or below the fold. This is why websites that target everyone can overwhelm users, drain the tank, and end up targeting no one.

Some numbers. Jakob Nielsen wrote an excellent article about the fold and conducted a study that tracked the eyes of people browsing websites and measured the amount of time spent at different levels. The result? Users spent 80% of their time looking above the fold (800px in this study) and 20% below.

Posted in Web Design