Tuesday, May 11, 2010

Going “Above the fold” with Google Labs Browser Size Tool

Our blog today was submitted by creative CHEMist, Greg Dosmann.

Google Browser Size is a visualization of browser window sizes commonly used by Google’s visitors. In the image below, the "90%" contour means that 90% of people visiting Google have their browser window open to at least this size or larger.

This tool is useful for ensuring that key content of a page’s interface is visible by a wide audience. The print design term “above the fold” refers to the location of important news stories or a visually appealing photograph on the upper half of the front of a newspaper. So, the Google tool is an interesting new take on the term “above the fold” as it illustrates just how important it is in web design as it is in print. Although many argue that folds do not exist on a web page, the principles of “above the fold” do.

Here’s how it works:

The Google tool allows you to input a URL and the site is quickly displayed under a colored graph that shows what percentage of your audience will be able to see important content without the need of scrolling. Depending on the contrast of your site, it is a good idea to adjust the opacity of the overlay so you can really see where the lines fall on the interface. I explored this tool, applying it to a few different sites I have designed, and the only problem I found was that it only works effectively for left justified sites. With some slight adjustments you can get a rough idea of percentages surrounding a center justified site although it isn’t quite the same.

It’s critical in the early stages that web designers understand where important information is displayed and what the audience will see within a fraction of a second upon landing on a page. I hope the next version of this tool would be offered as a downloadable application as it would be extremely beneficial to web designers who want to test their sites in the earliest stages.

No comments: