What is the fold?

I’ve had numerous ocasions when clients insist on everything is above the fold. What is the fold?

I believe the term comes from the print world which makes it all the more bizarre. I don’t intend to post all my thoughts on this matter right now but feel compelled to share with you an email I got from a fellow designer Haraldur Þorleifsson. This is what he had to say:

1. First of, what is the fold?

– around 20% of users on a desktop computer in the US have 1024×768 which is normally defined as the lowest resolution designed for.

– on a 1024x768px display the fold for a full screen browser is 578px. Many people see this as the fold.

2. What is your target audience?

– the around 20% of the users that have 1024×768 displays are by definition not likely to be high spending individuals – so even though the website should definitely be usable on that resolution it is questionable if those users should be a high priority.

– Around 4 in 5 of your users will have larger displays. And those individuals are much more likely to be big spenders.

3. What other people are doing:

– Almost no website has nothing below the fold (google.com is probably the only real example)

– Based on this, people are not just used to scrolling down for their content, you could argue that they expect it.

Apple.com (probably the most widely cited example of a well designed website):
– every product overview page is basically the same (see iphone.com as example). It has a menubar, logo, CTA button and a large image/text area. With the image, this takes up around 750px, which means about 170px higher than the fold cited for 1024x768px.
– This area is purely marketing, almost purely look-n-feel.
– The reason for the large image area is not that nobody has seen their products, on the contrary, their products are almost ubiquitous . The reason (in my opinion) is that when it comes to actually buying something (or signing up) a strong visual message is key for that final kick over the line. That visual message will be much more effective than not having to scroll down.

-If you add in the first few lines of the boxes below this area you can add about 150px giving it a total of around 900px high. All “real information” is below this area and the complete site can be up to a few thousand pixels high if the content demands it.

4. Questions?
– If you still want to aim for the fold, what px height should you go for? Should it be the 578px? Should it be the Apple 750-900 px high line?
– and once that px height has been set, what information should necessarily be in that area? Should it be a visual message or hardcore data?
– These are not minute details. The answer to these questions will probably significantly improve the impact of your website.