Where is “The Fold” in Web Design Today?

06.26.2010 // Design, Miscellaneous, Tech // jcbrady // No Comments

I recently needed to find out the optimal height to design for when building a website. This is sometimes called “the fold” height, a term borrowed from newspaper displays. Basically, the fold refers to anything seen on screen without the user scrolling.

Ideally, keeping important content “above the fold” will allow the user to understand what the website is about without having to scroll in their browser — a reasonable goal when laying out a webpage.

Anyway, I thought I’d share some of my results from the research I did. Defining an exact pixel number can be tricky, so I made this graphic to give an idea of heights in pixels. http://www.laughcard.com/hi.html

Go ahead and view the graphic on your friends, coworkers and neighbors computers. This will give you an idea of all the little things you have to keep in mind; toolbars, menu bars, window decoration, system bars, browser window sizes, etc.

There’s a lot to consider, but I want to define a number or at least a range in which to design for. I came across this website boxesandarrows that stated “the three highest fold locations were 570, 590 and 600 pixels—apparently from different browsers running on 1024×768 screens.” It was talking about another study conducted.

Based on my research, I would say less than 600 pixels tall is a good height to design for. If I was to give a range, it would be between 550 and 600 pixels tall. There is a lot to consider, but those are some pretty decent numbers for the time being, which of course is subject to change…

Also, here’s a cool tool I found for measuring the users browser size and placing content:
http://browsersize.googlelabs.com/