Traditional Media

Have you ever heard of the phrase “above/below the fold”? This term is historically related to a design practice in newspaper printing that ensured featured content was placed toward the top of an oversized sheet of the publication paper. Once the paper was folded in half and stacked, the paper would then present to readers the most prominent stories and other printed content. Today, that term is shared with web design practices, and is often referred to as “above/below the scroll.” In this case, instead of a sheet of paper, the idea is to place important content above the point in a browser window where a user would need to scroll down the page to see the remaining content in the layout.

So, where is it exactly…?

More and more, this digital fold or scroll line has become more difficult to define for clients and designers alike. If we’re looking at the general premise that the scroll line lies roughly at the base of the vertical of a browser window, long-term trend details from w3schools help us see how that scroll line has shifted across standard browser resolutions for the last 10+ years.

For a long while, designers were working with a standard set of proportions (640 x 480) (800 x 600) (1024 x 768). Notice however that for the last several years, the bulk of the user selection falls into a category that represents resolutions higher than all of these. What we do not see here is that this category not only represents screens of higher resolution, but of widely varying proportions as well. As designers, we’ve used the vertical as a very loose guide for the “fold”; 600 pixels slowly shifted to 768 pixels. But even this value can be inconsistent and often constricted. With users accessing websites and applications online by opening any one of several browsers, all with different tool bars and tab styles encroaching on content; this only adds to the variables around which designers and developers have to work.

For desktops and laptops, our vertical figure is all over the map, with resolutions like 1280 x 800 and 1280 x 1024 taking solid rankings in resolution popularity. Combined, there are more varying proportions like these than our traditional numbers, and this has been the case for a few years. However, we’re still in the “safe-zone” designing to this 1024 x 768 figure, but realistically, we’re speaking to a decreasing number of browser users at this resolution, with the exception of tablet browsing on  first or second generation iPads and other similar tablets. These devices create yet another environment for users to access your content (a blog topic for a future date), opening up a can of worms that exposes challenges around designing for portrait and landscape orientation, which completely modifies the scroll line with the simple action of rotating the device.

What does all of this mean?

For modern web design, it means the concept of a fold has become outdated. It still makes perfect sense to use the region located toward the upper section of a web user interface for vital material, but we should encourage our clients, architects, and designers to expand their views of what is considered valuable real estate, and focus on the balance of the layout and content.  In other words, do not cram all of your material above the fold at the risk of creating a usability issue for your web solution.

To some degree, we have always had limited control over the browsing environments of our user interfaces. New technology is forcing the issue and making it even more the case, creating a rise in needs for responsive design and mixed layout orientation. But overall, you should be in good shape if you’re maintaining thoughtful sensibilities around usability, and providing interesting content for your visitors. Keep in mind your target audience and what your goals are for that audience. If your material is engaging and relevant to their needs, your users will scroll.

Take a look at the publication dates on these articles below… some of these studies are ten or more years old. We are still debating the topic, not because there are right and wrong approaches, but because there are so many scenarios to consider, and it’s becoming increasingly difficult to establish any new standards. Or maybe the debate comes from simply adjusting human condition. Following are some related articles on the subject of scrolling.

http://www.boxesandarrows.com/view/blasting-the-myth-of#comments

http://designshack.net/articles/above-the-scroll-does-it-matter-anymore/

http://www.practicalecommerce.com/articles/3108-Designing-Above-the-Fold-Necessary-

http://iampaddy.com/lifebelow600/

http://www.uie.com/brainsparks/2006/08/02/utilizing-the-cut-off-look-to-encourage-users-to-scroll/