Google's Browser Size [ref]Browser Size[/ref] 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, [ref]Conduct Browser-Size Analysis Within Google Analytics[/ref] 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

About the Author: Ruud Hein

I love helping to make web sites make it. From the ground up if needed. CSS challenges, server-side scripting, user and device friendly JavaScript tricks search engines have no problems with. Tracking how the sites perform and then figuring out how to make that performance and the tracking better. I'm passionate about information. No matter how often I trim my feeds in my feed readers (yes, I use more than one), I always have a couple of hundred in there covering topics ranging from design to usability, from SEO to SEM, from life hacks to productivity blogs, from.... Well, you get the idea, I guess. Knowledge and information management is close to my heart. Has to be with the amount of information I track. My "trusted system" is usually in flux but always at hand and fully searchable. My paid passion job at Search Engine People sees me applying my passions and knowledge to a wide array of problems, ones I usually experience as challenges. It's good to have you here: pleased to meet you!