Above the Fold

What is above the fold in Web Design?

Above the Fold

The term ‘Above the fold’ comes from news papers and applies to the fold that news papers have as they are stacked on top of each other on shelves in news agents. Any information that is visible is ‘Above the fold’. Of course this is the most valuable space for news and advertisers because it is the first thing a casual browser sees, and it may determine whether or not they pick up the news paper and subsequently buy it.

The same theory applies to web sites.

With so many devices out there how do you know where the fold is?

Well it’s a tricky question and it will vary from site to site. You need to open up your web statistics and find out the various screen sizes that your visitors use. Then, and only then, will you be able to tailor your website to your audience. Otherwise you are just guessing.

A new web site

If you’re web site is new you have no information so you need to start with the lowest common denominator. Laptops typically have a screen resolution height of around 760 pixels, however with the increasing number of portable devices such as smart phones and tablets it is likely to be even less than that. And guess what, Google has a tool to show you what the fold is http://browsersize.googlelabs.com/ (this is for ALL screen resolutions visiting Google so is a good representation of the world-wide market). I was pretty surprised when I saw this myself because it shows that in order to target at least 90% of your visitors above the fold …

Your calls to action, messages and critical information need to be seen in the top 500 pixels of your screen

Responsive design

You can read about responsive design on my page here, because you also need to think about the fold when designing a responsive site since elements move around the page as the screen shrinks and you don’t want to push the critical information below the fold.

Trends

There is a current trend a having loooong pages which tell a story and then give you a message or sales pitch near the end of the page. These sites blow the idea of the fold out of the water. For example http://37signals.com/. Well good for them, but I, for one, am not going to risk that with my clients web site unless they pay me too because you will be scrolling forever on a smart phone ;-)