Exercise with Browser Size

Move it to the left. Move it to the right. Move it higher. No, move it lower. Make it Webbish – but not too Webbish.

Have you ever wanted to provide your clients with a visualization of audience browser window sizes that is based in something outside of opinion?

It’s one thing to have an opinion on where something should appear in a user interface, but how about some real data and visuals to back up the opinion?

Google Browser Size

If you’ve had such discussions, this might be a solid justification for loading up your design in Google Browser Size from Google Labs.

Let’s take a look at ReadWriteHack as an example:

First, notice the the various contours and labeled percentages. Next, notice the rulers along the sides. You might have already gathered that these contours represent the percentages of Google visitors with their browser window size and the rulers are simply the sizes in pixels.

Or, in Google Labs’ own words:



The sizes represented in this contour are client area sizes, not browser window sizes. This means they represent the size of the browser without the title bar, toolbars, status bars, etc., and thus give a true representation of how much content can be seen by a particular segment of the Web-using population.

While keeping things above the fold may sound cliché, there is some real science going on here. This can be an effective way to render examples and apply A/B testing as well.

You might say… this looks a lot like Bacolicio.us. Sort of, but in the example below you’ll see what makes Google Browser Size different.

Let’s add some bacon. Or, better yet, just steal the concept and code behind Bacolicio.us with the concept of Google Page Size.

baconbrowsersize.html (this will open in new window i.e. target=_blank)

You’ll notice that the functionality is lost for clicking through anything where the overlay is visible. That’s not ideal so maybe we can just get this to work by pasting in the following when we want to quickly test on Google Browser Size.

Now that is a useful line you can paste in your Location bar window. More importantly, it’s really another way to test your own image overlays. Simply replace the reference to the image above to a URL of your choosing when using Google Page Size.

It’s not clear how actively Google Page Size is being developed but there is a link requesting feedback. After all, this is Google Labs we’re talking about here.

That said, the image used in the image overlay might give a us hint. The image is simply named 2009-11-18-day_google_com_100.png so perhaps this hasn’t been refreshed in about a year. Or, perhaps this Google Labs project graduated into Google Analytics.

Facebook Comments