Home >
Does your UI work for the masses? Test it with Google Browser Size
I was perusing the Google Code blog recently, and stumbled across a post explaining the new Google Browser Size tool. This is a tool that allows you to compare the size & layout of your design against data showing the most common browser sizes of client machines.
Virtually every project I have ever been involved with makes some assumptions with the design, and the minimum amount of UI space required to view the UI. The browser size tool uses browser data captured from google.com to show a visual breakdown of the most common sizes, and the percent of users with those sizes.
For example, here is the layout of browser size against google.com:

In the tool, you can enter any url, and it will overlay the data visualization over top of your site. You can then resize the browser, and see what is visible to common browser sizes, and what falls "below the fold".
There is a detailed explanation of the tool, as well as it's origins on the Google code blog here.
Related Links:
Google Code Blog Post:
http://googlecode.blogspot.com/2009/12/introducing-google-browser-size.html
Google Browser Size:
http://browsersize.googlelabs.com/




Facebook Application Development
I once wrote a bit of javascript code for our pages to grab the client width and height and record it to Google Analytics using their Event Tracker. I wish I had taken that this far because I did that months ago.
I was amazed at the different oddball sizes people kept their browser windows at. Our stats show that 1024x768 is the most common screen resolution but the client stats show an entirely different picture.
What I got out of our experiment is that most people visiting our site seem to keep their browsers at a size that will require them to scroll (vertical and horizontal!) almost all the time regardless of the website. Therefore, as this Google Browser Size suggests, the only guarantee is the upper left corner. But at the same time if your website follows the popular 960 width format then at least 90% of the visitors will see the entire width and the first 500 pixels of the vertical.
I think that should meet most people's needs.
I find the tool interesting and informative. Maybe I could use it to explain why certain things are done in design and why some people see certain things in their window while others do not. I'm speaking of people who insist on having two or three extra rows of toolbars and wonder why they can't see that first headline "above the fold" while I state that I can.
This is a neat tool. I may be nit-picking but they could have cleaned up the graphical illustration a bit. It looks as though someone has threw a bucket of paint over a screenshot.
It works fine in general but many sites now a day detect if they are being loaded within frames and they will break out of it and load themselves on the top location. You may be better off using google's .png image and overlay it via Greasemonkey for example
thanks for your sharing. I gotta try the tool.
short wedding dress
@Bill Borrows: Yes, but they're Google. Edgy and irreverent is their thing man!
Thanks - going to us this.