Above The Fold v Below The Fold In Website Design

The term ‘above the fold’ is an age old design concept and historically related to content that would appear on the upper-half of the front page of a newspaper. Newspaper editors would place compelling content (headlines, imagery etc) in this space, in order to maximise interest, and therefore sales. Content of less interest would appear ‘below the fold’, eg on the bottom half of the newspaper where it was hidden from view until the newspaper was unfolded.

This concept has moved into the digital age where web designers and website owners now need to consider information hierarchy carefully in order to ensure visitors to a webpage are quickly presented with the most important content. For a website, ‘above the fold’ or ‘above the scroll’ relates to content that a website visitor can view without needing to use a vertical scroll.

Our website designers and account managers are commonly fielding questions about the importance of, and impact of, placing content above and below the fold on websites. The purpose of this article is to present some information to guide such discussions.

Where Does A Website ‘Fold’ - Screen Resolution

One of the key differences between the concept in print and digital is that a newspaper fold line was fixed when being printed. The nature of the internet makes this a greater challenge. Some users access websites on small monitors, some on large monitors, some on smart phones and others on tablets. Essentially the content a user can view without scrolling will depend on the screen resolution of the device they are using. Internally we advise clients to consider 570-600 pixels as a safe ‘fold’ line on a website (considering that the 728 pixels a user may have will partially be used by the browser address bar, bookmarks etc). Based on our own Analytics account around 98% of users to our website have screen resolutions of over 1024 x 768. This is backed up across 100’s of our client accounts and a resolution used by Web Useability Expert Jakob Neilsen in his ‘Scrolling and Attention’ study from March 2010. If you use this as your default screen resolution you can assume that virtually all users will have a fold line at least 570-600 pixels (these days even larger, meaning even more content will appear above the ‘fold’ for them).

UPDATE (28/2/2012): This is a great tool from Google to assess where the fold / scroll line might be on a website. Click for Google Browser Size.

Users Don’t Scroll – True or False?

If we take it that content above 570-600 pixels is likely to be viewed by users without scrolling, we then need to consider what happens to content below this line. User behaviour has changed tremendously in the past 20 years in regards to this topic. Up until the 1990’s it was a commonly accepted view that users simply didn’t scroll to content below the fold. In a 1994 study Jakob Neilsen found that only 10% of users would use a vertical scroll on a webpage if it existed. As such, content below the fold would simply not be viewed by 90% of users, and of the 10% that did scroll it was still likely they would spend less time considering content below the fold compared to above it. This led to a general belief that website users simply would not scroll and some still subscribe to this theory today.

The rapid development of the internet in the 1990’s saw users learn to scroll to access content and in December 1997 Neilsen retracted his assertion that users did not scroll following new research into this space. A study from ClickTale in 2006 showed how much things have changed. The study showed that 76% of webpages with a scroll bar had the visitor use it to scroll below the fold. This statistic is likely to be even higher now as users have become more accustomed to scrolling. In summary, it is simply not true that users do not scroll to content below the fold.  Indeed some of the most successful webpages on the internet make great use of vertical streams of content, think Facebook, Amazon, YouTube and ebay.

Users Scroll, But Don’t Pay Attention

Whilst users are clearly comfortable with the idea of using the scrollbar, how they use it is of the most interest.  A recent article from Jakob Neilsen gives great insight into how users treat content below the fold. This research was based on 57,453 fixations (something a user looks at on a webpage). It shows that whilst users do scroll they pay the bulk of their attention to content above the fold. Neilsen found that 80% of fixations occur above the fold. Essentially once content appears below the fold it is less likely to be viewed for any serious amount of time.

The graph below shows the dramatic drop-off of time spent viewing content below the fold:

Reproduced with the permission of Jakob Neilsen. Original can be found here.

The study also showed that users don’t really ‘read’ all the way down a page. Essentially users focus on content above the fold, they then scan down the page, and often pause on content at the very bottom of the page before making their next step:

Reproduced with the permission of Jakob Neilsen. Original can be found here.

Summary

In conclusion:

• It isn’t practical to build a website where users don’t need to scroll, as the ‘fold’ line on a webpage will be dictated by the device being used to access the website.
• Users are comfortable with scrolling below the fold of a website. Indeed more than 75% of users will scroll if content is placed below the fold.
• Despite being comfortable with the idea of scrolling, users focus their time and attention on content placed above the fold.
• You need to pay strict attention to content appearing in the first 570-600 pixels of a webpage. It is likely more than 80% of a user’s time will be spent in this space so make this content count.