Fold as a paging mechanism
The web is an interesting medium. Unlike written text, "pages" on the web have no physical size limit. An author can prattle on for hundreds and hundreds of lines. It's entirely possible to put the whole of War and Peace on one web page.
And why not? Because it's not practical. The file size would be tremendous. If we were able to remove the technological barriers, what issues would remain? Typography. The information architecture is already there. The book is conveniently pre-divided into chapters (wasn't that nice of Mr. Tolstoy?), but an entire chapter is still an unreasonable block of text for the average web page consumer.
A page in print is a unit of content division. The human mind has been optimized to consume content in these logical chunks, even if the content of the copy crosses the page barrier. On the web, however, the average user doesn't pay attention to the specific content for more than a few seconds. They practically need to be forced or tricked into consuming the content of a page measuring even 800x600. With 200 pixel margins. In 14pt font.
So now that 1024x768 has largely become the standard viewing resolution, the capacity for visual overload is a force not only to be reckoned with, but to be humbled by. As web content authors and designers, we are the artists standing before a blank twenty foot by ten foot canvas knowing that the people viewing our finished work will be second graders with ADHD. The medium just isn't appropriate for the consumers in its natural state.
Plenty of knowledge about how to organize web content has been collected through the study and experience of very intelligent people. Of course most web content authors aren't privy to this knowledge, or don't care. I'm as guilty as the next guy, and could insert any number of perfectly valid excuses here, but that's not my point. There's more to learn than there is time to learn it. In the mean time, here's a little snippet:
Content below the fold is visually equivalent to the reverse side of the printed page.Book print could be compared to a simple two column layout, where the gutter forms the space between the columns. But the next two pages (or two columns) are invisible until you turn the page. Similarly, web content below the fold is invisible until you scroll down. And just as turning the page makes the previous pages invisible, the top of the viewport consumes the content previously above the first fold. The difference of course is that web content is inately consumable in the transition state, where paged media isn't. It has been generally held that this is an improvement to be taken advantage of, but is it? If we have to trick the average web page consumer into reading the content above the first fold, what hope do we have for getting them to read the content beyond it. I recently noted an interesting design choice by a web and print design firm called the Cuban Council. They started by standardizing their content area to fit horizontally in an 800x600 pixel resolution, then split the content vertically into sections. I'm not sure if they were aiming for this, but the first and second content sections are approximately 750x550 pixels, which happens to be roughly the remaining real estate at 1024x768 after browser navigation, menu bar, status bar, and in my case tabs and the Developer toolbar. By putting the second content section in a contrasting color and sizing it to fit the viewport, they adopted a quasi print media-esque paging mechanism. Sure the contrasting color groups the content nicely, but beyond that, it encourages the viewer to scroll the top of the new content section to the top of the viewport. Since the second section ended just within the available real estate, the section's lower border created an obvious second fold. As a viewer, it was a comfortable place to stop scrolling because I knew there was nothing below that point that was germane to what was currently in my viewport. Beyond the second fold, the content was styled in accordance with the primary color theme again. Since the following sections weren't vertically sized at ~550 pixels, there wasn't a clean third fold. I noted, however that the last section fits nicely in the visible real estate when sized at 800x600. By the mix of optimization between 8x6 and 10x7 viewing, I'm assuming that this wasn't their goal, but at least when I visited the page, it began as a very pleasant experience even before I read a word.
Manipulating and multiplying the fold
Perhaps the notion of multiple folds has been around a while, but in my experience it has always been a single boundary at the base of the viewport when initially rendering content. As a designer, if you are working with static content, you can choose to optimize for a resolution and section your content appropriately to create multiple folds. Sizing page sections just under the vertical height of the viewport and making them visually distinct from one another creates bite sized content and allows the user the (perhaps subconscious) comfort of knowing when and how much to scroll. Of course, designing for multiple folds inherently comes with challenges.- Not everybody will view your site at your optimized resolution.
- Many users will have extra toolbars or browser themes that affect the available content real estate.
- Different users will size their browsers differently.
- So on and so forth