Practical Ecommerce

Designing ‘Above the Fold’ Necessary?

Ensuring that customers can easily find important information on a site should be a priority for online merchants. In the past, you may have heard of “designing above the fold” as a way to present important information. While this strategy might have worked in the past, the traditional fold is becoming less and less relevant in the ever-evolving Internet.

The History of the Fold

The notion of the fold has been around since early web pages and has been the subject of much debate among web designers. Originally, “above the fold” was a term reserved for newspapers. Papers were delivered folded with top half facing up. Important content was placed on the upper half of a newspaper’s folded front page to entice readers to continue reading — hence the term “above the fold.”

At some point, this term became popular in web design to describe the portion of a website that a reader would view before scrolling. (This is also sometimes called “above the scroll.”) In the early years of the Internet, many users didn’t scroll web pages at all. This prompted many web designers to either eliminate the need for scrolling on their site or to include all of the site’s important information above the fold. While effective in some cases, this often led to cluttered design and a poor site layout.

Problems with the Fold

One problem with the fold arose as Internet users began using different screen sizes. Because the fold is based on screen size — called “resolution” — different users are going to have different folds. By 2005, a majority of web users were browsing at a resolution of 1024 pixels x 768 pixels and designing for this resolution became a standard practice. Subsequently, the standard fold was said be roughly 600 pixels down the page.

However, a majority of screen resolutions today vary in sizes that are larger than 1024×768 — around 85 percent according to browsing information from w3schools, an educational and development site. A 600-pixel fold is no longer as universal as it once was. Today we also have to consider mobile and tablet browsing. Not only do tablets and mobile devices have smaller screen resolutions, they also give users the option of browsing in portrait or landscape mode, making the problem of pinpointing the fold more difficult even for mobile sites.

Additionally, while claiming that users didn’t scroll through web pages may have been accurate in the earlier days of the web, we know today that people have no problem with scrolling. This point is made particularly well by Paddy Donnelly’s “Life, Below 600px” web page.

Learning from the Fold

I am not a fan of the fold for several reasons. First, I think many perceive it as being all or nothing. Either you are completely above the fold or you are losing viewers. This often destroys good design by causing designers to cram as much information as possible into the top 600 pixels of a site. Second, I use a large monitor with a high resolution — as do many other Internet users. As such, 600 pixels comprises a little more than half of my viewable screen and sites that display most of their content above the fold feel top heavy and unbalanced when viewed on a large display. Also, when I view a website, I want a reason to keep reading. Granted, I don’t want to wear out my scroll wheel trying to make it to the bottom of the page, but I’m willing to scroll down a bit and explore a site. All this being said, I still think there are some important principles web designers, and especially merchants, can learn from the fold.

First, just thinking “where is the fold?” about your site should prompt you to consider different screen resolutions and how your site will be displayed on different devices. How does your site display on a 1920×1080 resolution monitor versus on a smart phone? How does it display on a tablet or mobile device differently in landscape versus portrait mode? These are the sorts of questions web designers and merchants should ask about their sites.

Second, the notion of the fold forces you to consider the first impression made by your site. What should be seen first when someone visits your site? Keep in mind here that your first impression has to do with more than just content. Design provides just as much if not more of a first impression as content.

Third, and most importantly, I think the fold introduces the fundamental concept of hierarchy in site design. The goal of designing above the fold is to have important information immediately visible to the viewer, something that still applies today. However, you shouldn’t be afraid to lead your viewer down the page. Placing your site content in a hierarchy that allows for white space and information flow will always trump stuffing all your information into the space above the fold.

Paddy Donnelly used the case of 37 signals, the provider of online collaboration tools, to demonstrate this point, and I think it’s the perfect example. Notice how the site gives a clear first impression but doesn’t stuff all its content into the first 600 pixels? Instead, it leads you nicely down the page through a hierarchy of information.

Go Below the Fold

While designing below the fold may have been dangerous in the early days of the Internet, today it is far more dangerous to stay completely above the fold. Instead, learn from the fold. Test your site on different screen resolutions and devices to see how it displays. Consider your site’s first impression in terms of both content and design. And finally, establish an information hierarchy for your site that safely leads your viewer below the fold.

Drew Coffin

Drew Coffin

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comments ( 3 )

  1. Paula Biles October 20, 2011 Reply

    Great article, Drew. You clearly and concisely present lots of information and why it’s important. I’ve greatly missed your video tutorials and am very glad to see you again.

  2. Bob March 20, 2014 Reply

    “By 2005, a majority of web users were browsing at a resolution of 1024 pixels x 768 pixels”

    You can’t use W3C stats as a basis for determining what everyone on the web is doing/using.

    Why..?

    Because: “…our data, collected from W3Schools’ log-files over many years…”

    That’s right! The W3C data is based on all the web geeks that visit the W3C website, and that’s not *everybody* who’s on the web, it’s an exclusive group of people who are almost always ahead of the curve with technology.

    You’re welcome…

  3. Drew Coffin March 20, 2014 Reply

    Good insight Bob. The point however, is more that the trend has been consistently moving toward larger screen resolutions. Given that the data was from 2005, by now the majority of web users will have caught up to the “exclusive group of people ahead of the curve.”

    But you make a good point, the sentence you quoted was poorly worded given the sampled data.