Essential Above-the-Fold Design Principles

The term “above the fold” was first used in the newspaper business. Since newspapers were folded in half for delivery and display, the best content was printed on the top half of the page, or above the fold, to entice people to buy a paper and keep reading. Journalists fought to get their stories in this coveted position, and editors paid special attention to above-the-fold headlines.

The fold concept has also been applied to the Internet since the early days, when many users didn’t bother scrolling down web pages. To compensate for this, designers placed their best content at the top, or even designed websites that wouldn’t require scrolling to view the whole page.

Today, the concept of the fold has changed—but many of the principles remain the same.

The new fold: Where is it?

Due to the sheer volume of websites, there has never been a standard Internet format. In addition, users set their own preferences and displays, including screen resolution—which means the location of the “fold” can have some pretty wide variances. Still, designers went by their best estimates to employ fold principles. By 2005, most users were sticking to a resolution of 1024 x 768 pixels, and standard design practice leaned toward this resolution, which placed the fold at about 600 pixels down the page.

But the rapidly evolving nature of Internet technology has already changed the playing field. Improved graphics capabilities for PCs and laptops have led to higher screen resolutions, with 85% of users browsing at better than 1024 x 768. There are also the ever-increasing numbers of people using smaller screens, in the form of smart phones and tablets.

All of these changes mean there is no longer a universal fold. So, what’s a designer to do?

It’s the principle of the thing

While the location of “above the fold” may have been blurred beyond recognition, the essential principles of the practice are still an important part of designing an effective website.

Above all, your visitors should be able to find what they’re looking for on your site quickly, without excessive scrolling or clicking. Prominent, clearly labeled navigation bars, tabs, or buttons should be located near the top of the page—if your site is hard to navigate, potential customers will seek easier pastures.

The content that is visible right away should be intriguing enough to capture the attention of your visitors. That said, trying to cram everything into the top portion of your home or landing page makes for a terrible website experience, especially for mobile viewers. This is where flow comes in.

The information on your website should flow naturally down, enticing visitors to keep scrolling. Your above-the-fold content should invite further exploration. Any calls to action should be short and sweet, such as a “big red button” that takes visitors straight to a purchase point. Save the lengthy explanations and product or service descriptions for lower on the page.

Embrace the whole page

Today’s Internet users are no longer afraid of the scroll function. Don’t make the mistake of designing a top-heavy website—if your space above the fold is busy and confusing, your visitors will leave without a second glance.

However, make sure your top content is arranged to intrigue, so your visitors will scroll down to see what they’re missing. Like a newspaper editor, craft your best headlines to appear above the fold, and watch your traffic soar.

Posted in

Leave a Comment

You must be logged in to post a comment.