HTML & CSS
Article
By Craig Buckler

Designing Above the Fold and the Google Browser Size Tool

By Craig Buckler

browser resize“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:

--ADVERTISEMENT--

  1. Less is more
    Don’t cram everything above the fold — use of whitespace and images encourage exploration.
  2. 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.
  3. 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.

Browser Size tool

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:

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account