To Fold, or not to fold

To Fold, or not to fold

If you’ve had the opportunity to participate in a web redesign project, chances are you probably heard the term, “page fold” tossed around in the early stages of a web design project. Even if you haven’t heard the term before, I’m sure you’ve view more than 100 page folds daily, without giving it a second thought.
Page Fold Example

What is the page fold?

The page fold is the imaginary line where the bottom edge of your browser blocks your view of the page below. Longer pages can have multiple page folds, something to consider when creating long pages.

The belief (and myth) of the page fold rests on the idea that anything below this line is ignored, never seen, and hardly worth scrolling for. Another belief is that people simply don’t even know they can scroll… but seriously, unless your visitor has been living under a rock for the past 18 years, I find that last one hard to believe.

Mythology – The Beginning

So when and where did this myth start? You may ask. Well, back when the internet was just a pimple-faced adolescent, a little company known as Macromedia began injecting the web with a steroid known as Flash. The little plugin would turn any puny site into a raging inferno of awesomeness. Soon flashing colors, morphing shapes, preloaders, and a plague of “Skip to Website” buttons began to conquer the web.

During this time, many sites gave up on usability and focused on the purely aesthetic. Since flash sites can use their own design elements to scroll content, the need to scroll the browser started to fade. And as a result, came the “above the fold” belief.

Thankfully, the general public eventually came to their sense and realized there was nothing great about waiting for a preloader only to have to “skip to site”. Never the less, the old belief still roams the web, along with the dreaded double space at the beginning of sentences. (If you are still doing this, stop. There’s a reason why it’s no longer needed.)

Now that we’ve cleared up that myth, let’s get down to business! Depending on the nature of your site, the fold has some general Do’s and Don’ts that can help you improve the function of your site.

Page Fold Do’s

  • Tease Me – Have a small amount of content just visible, poking up above the fold to encourage scrolling.
  • Less is more – Keep your content above the fold to a minimum. Don’t be tempted to cram everything above the fold. Good use of white-space and imagery encourages exploration.

Page Fold Don’ts

  • Avoid the use of in-page scroll bars – the browser scroll bar is an indicator of the amount of content on the page. iFrames, scrollable Divs and other elements with scroll bars in the page can break this convention and may lead to content not being seen.
  • Stark, horizontal lines discourage scrolling – this doesn’t mean stop using horizontal full width elements.

It should go without saying that content above the fold is the most seen and should always contain the most important information. Just keep it simple!

Also, always keep in mind your audience’s screen resolution – typically nothing less than 1024×768 pixels these days. Depending on your audience this resolution may vary.

Wrap Up

Now that the old myth is busted, what have we learned? Well, it should be no surprise to keep things simple. When you give your audience room to breath while viewing your site, they will take the time to look around instead of rush through. Always keep your audience’s monitor size and resolution in mind, and adjust your layout accordingly. Lastly, though you can put things below the fold, don’t assume everyone will scroll; put the focus above the fold and supporting information below.