“Please move that box up so the page does not scroll.” The web designer then reaches for his canned “everyone will see this differently…” response. The term above the fold comes from print, where desktop publishers and editors can reliably determine priority placement for best content. The notion holds on the web: the designer needs to make the right impression above the scroll line. The problem is determining that point. And when you play it safe, cater to where you imagine it to be and leave some margin for error, you handcuff your design, and you’ll probably still get it wrong.

The variable height of the browser context — the top portion of the browser window where the buttons and toolbars live — is the most important factor. It ranges from 50 to 250 pixels and beyond. The casual computer user is (unknowingly) most afflicted since his software likes to install toolbars on his Internet Explorer that he hardly notices and does not use; he is also most inclined to sport a low resolution because he has not the experience of, or the need for more. Then we waste another 50 pixels for the Windows task bar at the bottom. Your fold probably lies at 400 to 450 pixel from the design top. Pad your design top and bottom, and give a margin for error, you have maximum 400 pixels to work with. I hope your masthead is short

The computer makers are not helping. For a while the trend was positive. New computers were coming with higher resolutions, and designers everywhere shed their 800×600 blinders. 15.4″ and other regular laptop screens generally have 800 pixels top-to-bottom. But since the manufacturers have decided to capitalize on the HD gimmick, we’ve gone backwards to 768 pixels tall, for average screens.

My conclusion? design/content above the fold ought to show the user where he is, the way to other pages, and perhaps just the most essential “can not miss it” content. Otherwise, let’s stop worrying about the fold. The novice computer user scrolls 1000 miles a minute, and loves it.

Let’s kill the fold like we’ve the papers whence it came.

Tags: design, resolution, the fold

This entry was posted by Justin Nedecky on Tuesday, August 25th, 2009 at 8:00 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.