This article was prompted, at least in part, after a spirited conversation with one of my clients wherein we both were convinced that our definition of “Above The Fold” was correct. I believed we had more screen real estate to work with than my client believed. I checked some statistics on screen resolutions and was convinced that 80% of the world would see the page as my client desired it to be seen. Google Labs has released a tool to interactively measure your above the fold area on your site. My client left just enough doubt in my mind, to force me to perform research for this article.
At the end of the day… we both were proved correct.
The phrase “Above The Fold” is a carry over from the newspaper days. If you weren’t above the fold, the chances of being read went way down. Now days, we use the same phrase to determine what shows on Internet Browser without using the scroll bar.
The shear number of factors that come into play with attempting to answer this question make this an especially interesting topic. One of those factors is simply that we as designers and developers have zero control or influence over our end users. In the days of newspaper — it was easy — every newspaper we printed was exactly the same width and height.
Every Internet Browser on every Operating System is a little different size in terms of the header area, the scroll bar on the left, and the status bar on the bottom. When you start considering the enormous number of plug-ins and add-on toolbars that are available to enhance the users Internet experience, you can see how difficult it is to settle on a “Fold” size.
I have measured Internet Explorer 6 and 8 in Windows XP as well as FireFox 3 and Safari 4 on Mac OS X. See the images at the bottom of this article for representations of each. Since, at the time of this writing, Internet Explorer 8 has the largest out-of-the-box header and navigation tab area, I’ll use it as our worst case scenario.
The Task Bar on Windows XP is 30 characters high (assuming it’s a single line). The standard header and navigation tab section on IE 8 is 150 pixels high. The standard Status Bar on IE 8 is 24 pixels high. We loose 204 pixels in usable height coming out of the gate.
This table shows (theoretical) usable width and height based on two screen resolutions. I’ve also included “what if” measurements to allow the user to reduce the size of their Browse by either 10% or 20%. It’s not uncommon for users to have several application windows showing on the main screen at the same time. I just don’t think it’s safe for us to assume that their Browser will always be showing full screen.
|Screen Size||Using IE 8||10% reduction||20% reduction|
|1024 x 768||1000 x 564||900 x 508||800 x 452|
|1280 x 1024||1256 x 820||1130 x 738||1005 x 656|
If your user has installed any add-ins, Google Toolbar, Yahoo Toolbar, etc… The 452 pixels (top line – 20% reduction) we thought we had can quickly become something closer to 400. Do you remember the days a of a 640 x 480 VGA screen? Welcome back.
Where does this leave us as designers and developers? As of January, 2010, 75% of Internet users have screen resolutions higher than 1024 x 768. I’m not advocating that we live our lives around the remaining 25%, but, perhaps the most important information on your page should be in the first 800 x 400 pixel viewport.
I have tried to maintain the “Above The Fold” area of 1005 x 656 for designs I have completed in the past 12 – 16 months. I would not intentionally design or re-design a page to “fit within 800 x 400, but I would certainly give consider which elements appear in that area.
At the end of the day, my client was right, by the time you start with a small resolution screen and add Internet Explorer 8 along with any add-ins or toolbars… the available screen real estate diminishes rapidly. On the other hand, 75% of current users are using screen resolutions above 1024 x 768.
The moral of this story is: “We need to consider our users along with our message when designing web pages… even today with larger screens and higher resolutions”.
IE 6 Header
IE 8 Header
Windows XP Task Bar