Above the Fold

What is the fold?

The idea of designing 'above the fold’ goes back to newspaper design. In early web design it refered to the prime real estate of a page - that which your users see (on a standard sized desktop monitor) before having to use the vertical scroll bar.

But does this concept have any place in modern web design? What constitutes a 'standard sized screen' today? People browse the web on a vast array of different sized screens, from mobile phones up to 60" HDTVs. Even desktop monitors can vary wildly between 1024 to 1920 pixels wide - and beyond! But it's not just the resolution which varies, the aspect ratio too can differ enormously - often on the same device, for example every time you turn your smartphone from portrait to landscape.

Even when designing for a known audience of desktop users with broadly similiar monitors (perhaps a corporate intranet) there can still be variety: users can have differing amounts of toolbars and browser settings affecting their available screen size. Even with standard sized monitors they may set their resolution differently, depending on personal preference.

Content cramming

There is a persistent myth in web design that all important content must sit above the fold or else your users will miss it - because most of them will never bother to scroll. This idea goes back to the early days of the web, when it was a strange and unfamiliar place, which only a few tech-savvy people understood.

Whether or not this myth was ever truly the case is unclear, but web users today are a much more savvy and experienced bunch, and more often than not know how to navigate around a site to find what they want.

But this persistent myth results in the common mistake of trying to cram ALL information before the fold. Research shows that the more content is displayed on screen, the less people actually read:

It is usually better to break content down into more manageable, bite size chunks, allowing users to digest what they are seeing.

Choice paralysis and Simplicity

Trying to fit too much information into a small area is likely to result in choice paralysis - so many details are vying for the user's attention that they end up focusing on none of it. A small number of clear, simple calls to action tend to be much more effective.

You can read a real world research study here.

When is the fold important?

The fold does still serve some purpose though. When a user arrives on any given page they want to know two things:

• •    Am I in the right place?
• •    How do I get to the content I want?

As long as you can fulfil these needs somewhere above the fold, your users will happily scroll or navigate to their desired destination.

You can read more about the importance (or not) of the fold here.