How to Keep the Good Stuff at the Top of Your Page

In graphic design, there’s a concept called “above the fold,” which refers to the practice of putting important information in the top half of the page. To no one’s surprise, this comes from newspapers:

Above the Fold (Newspaper Version)

The idea has carried over into Web design, except there it refers to the display of information the user can see without scrolling:

Above the Fold (Web Version)

Users can’t be intrigued by data they can’t see. So if you want users to get as many views as possible, you put the good stuff up top — above the fold.

In the early 2000s, there was a myth that users simply wouldn’t scroll. It’s not strictly true. Users are willing to scroll under two conditions:

  • The design helps the user see that there is more data below the fold.
  • The things above the fold are interesting enough that the user wants more.

I had a client who placed an ad on their page. At one point we moved the ad below the fold, and impressions dropped by 23 percent. We then redesigned the page — using background colors and eliminating horizontal lines — to make it more apparent that there was more information below. Impressions on that ad spot increased by about 8 percent, even though it was still below the fold. In other words, the fold matters.

So, how do you find the fold? With so many browsers and so many devices out there, it’s sometimes hard to know what will display and what will be behind a scrollbar. To find out, use a tool like Fold Tester, a website that shows the fold on common browser sizes. It uses Internet usage data to identify common browsers and their resolutions, then overlays that information onto your website.

Keep the fold in mind. Not everything has to be above the fold, but make sure the important stuff is!

Related Links

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>