Google's Browser Size [1] tool is a cool online utility which can show you for any page what percentage of visitors can see what part of the page without having to scroll.

image

And it's going away, [2] replaced with a site-specific view built into Google Analytics. The drawback is that you can't quickly checkout a site unless you can "quickly" add it to your own analytics account.

So, we came up with the next best thing: your own browser size tool.

Step 1: Grab The Overlay Image

You can do that here or, if that image is ever removed, here.

For Chrome users: upload the image somewhere. Make it accessible online.

Firefox users can move on to the next step.

2: add this browser extension

Chrome users install the WebDeveloper Image Overlay Extension.

Firefox users install the Pixel Perfect add-on (requires you also install the Firebug add-on).

Step 2: Point Extension to Image

WebDeveloper Image Overlay:

Navigate to our uploaded image's URL. Then click the extension's toolbar button. Click Add Image and select the browser size overlay.

image

Done.

Pixel Perfect:

Click the extension's button in the browser's status bar (bottom of the browser).

image

Click Add Overlay.

image

Browse to your saved overlay image and select it.

Done.

Step 3: Using Your BrowserSize Tool

Chrome:

  1. Browse to the page you want to analyze
  2. Click the extension's toolbar button
  3. Select the browser size overlay image

image

Firefox:

  1. Browse to the page you want to analyze
  2. Click the Firebug icon
    image
  3. If not already selected, select the Pixel Perfect panel in the Firebug console
    image
  4. Pick the browsersize tool image (you can now minimize the Firebug console)

image

To Remember

  • The overlay shows the inside of people's browser; the actual window on your content. It's not about screen resolution or browser size: it's about the viewport of the browser — that what is really visible.
  • Google's original tool and this alternative to the browser size tool work best with websites that have a fixed position hugging the left side of the browser. Many sites don't: they live in the center of the browser. Just make your browser smaller until both sides hug the edges of the page.

If you liked this post, you might also enjoy Make Your Own Twitter Button With Custom Text

Ruud Hein

My paid passion at Search Engine People sees me applying my passions and knowledge to a wide array of problems, ones I usually experience as challenges. People who know me know I love coffee.

Ruud Hein

You May Also Like

2 Responses to “Get Your Own Google Browser Size Tool Alternative In Under 5 Minutes”

  1. Pieter says:

    The only downside of using this method, is that you can't see the current situation. The data used on that image is from 2009. We are 2012 now, with lots of different screen sizes since then (tablets, smartphones, huge screens). A lot has changed in 3 years and will continue to change. The iPad didn't even exist in 2009…

    • Ruud Hein says:

      True. On the other hand, on a good number of sites the data still correlates. I think that's mostly because there is a browser size comfort zone which seems to be between 900-1100 pixels. Even people with larger screens don't consistently go for maximized browser windows, for example.