Introducing Google Browser Size
When I started work at Google, I visited the Google Earth team, hoping to
find a 20% project on my favorite Google product. There I met Bruno Bowden, who introduced me
to a problem I had never thought much about: how to take browser sizes into account when
designing a page.
Bruno had noticed that many people who visit the
“Download Google Earth” page never actually download, even though, as you can see, the button
is pretty hard to miss:
He wondered if a significant number of users might have their browser windows too small
to see the button:
To analyze this, Bruno looked at how large people's browser windows were when they
visited this page. His first key idea was to measure not the entire browser window, but just
the client area -- no toolbars, status bars, or other chrome.
Bruno's
second key idea was to render several weeks' worth of page visitor browser sizes in a contour
visualization:
Using this visualization, Bruno confirmed that about 10% of users couldn't see the
download button without scrolling, and thus never noticed it. 10% may not sound like a lot,
but in this context it turns out to mean a significant number of people weren't downloading
Google Earth. Using this data, the team was able to redesign the page to good effect.
Bruno and I realized that Web designers might benefit from this information
if it could be made more generally available. We constructed a page that could overlay a DIV
containing the contour visualization atop an IFRAME containing any other Web page:
This turned out to be a good way to see which controls were and weren't visible at
typical browser sizes. The only problem was, the overlay DIV prevented mouse events from
getting to the page IFRAME, so it wasn't possible to interact with the page.
To solve this, we split the overlay DIV into four:
Each of the outlines above (red, yellow, blue, green) represents a separate DIV. As the
mouse pointer moves, we resize and reposition the DIVs to leave a small window of blank space
around the pointer, and adjust background offsets for each DIV to make the overlay look like
one seamless graphic. (We originally did this on a timer, but we found a simpler way: when the
mouse touches any of the DIVs, resize/reposition all of the DIVs.) End result: a designer can
click and otherwise interact with the page with the mouse, and thus interact with the site
normally instead of repeatedly typing in URLs.
We are now making this
tool available to the public on Google Labs. To try it, simply visit
browsersize.googlelabs.com and enter the URL
of a page you'd like to examine. The size overlay you see is using latest data from visitors
to google.com, so this should give you a pretty good indication of what parts of your UI are
generally visible and what aren't.
We look forward to receiving your
comments at
browser-size-external-feedback!
By Arthur Blume
on behalf of the Google Browser Size team
