Designing Above the Fold and the Google Browser Size Tool
“Above the fold” is a concept that originated in the printed newspaper industry. Only the top half of a folded paper is visible, so editors move important content to the top of the page to entice people to buy the paper.
The term has been adopted by the web design industry where it refers to the visible part of the page when it’s loaded. Many “experts” still assume that content below the fold will be missed. A certain large international IT company I worked for employed a number of teams who competed to have their content placed in prominent positions. Managers, designers, coders, copy writers, and advert sales teams would all insist their content was more important than others. It normally resulted in a confusing mess at the top of every page.
I’ve never been convinced by the “above the fold” argument. First, there is no clear fold line — monitors come in different sizes, browsers may not be full-screen, and OS controls and tool bars use space. Secondly, most users understand the scroll bar and a recent report from CX Partners provides compelling evidence. Their conclusions:
- Less is more
Don’t cram everything above the fold — use of whitespace and images encourage exploration. - Stark horizontal lines can discourage scrolling
Full-width thick lines can subconsciously indicate the end of a page, so ensure content is visible to encourage scrolling. - Avoid in-page scroll bars
The browser scroll bar indicates the quantity of page content, so avoid using iframes and scrollable divs which break the convention. (I’d add that changing the scroll bar colors can cause users to miss content too).
However, you may be able to employ simple design tweaks which ensure people notice specific areas. For example, Google recently increased Google Earth downloads by 10% when they shifted the “Download” button upward by 100 pixels.
The company has subsequently created Browser Size, a new tool from Google Labs which shows how many people can typically view areas of your web page. The diagram is calculated from browser height and width information collated at Google.com. For example, the top 600 x 300 pixels can be immediately seen by 99% of users. Whereas only 10% of users can see content beyond 1250 x 800 pixels.
Designers can therefore create a page which ensures important content is prominently displayed and minimizes scrolling for the majority of users. It’s undoubtedly a useful tool, although I hope it doesn’t lead to a plethora of tiny 600 x 300 pixel websites!
Links:
