Home Exercise with Browser Size

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.

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.