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.
- 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.