5 Easy Steps In Creating Your Own Google Browser Size Tool Clone

by Paul Wilson

 

5 Easy Steps In Creating Your Own Google Browser Size Tool Clone

Back in 2012 Google got rid of a very useful online marketing tool called Google Browser Size Tool (GBST). Basically, GBST allowed you to see what percentage of users saw a website when viewed in different browser sizes (and really on different devices if you so desired).

Well, in truth Google didn’t exactly throw GBST away, but added it to Google Analytics. Now the only way you can use this tool is if you have access to a site’s analytics. This is fine for your own online properties, but lately I’ve been doing marketing analysis for several companies where I don’t have access to their analytics.

Often I want to show these companies exactly how their website’s design looks when they are not using a responsive design. The GBST also would have made a compelling case for why carousels (also known as sliders) are a bad idea. If I had the GBST I could quickly pop in a website’s url and make a quick and compelling case on how carousels eat up so much valuable space.

If only there was some altruistic marketer who developed an alternative tool! Fortunately, you can be that benevolent marketer without touching a line of code. Recently, I found an awesome Chrome extension that is actually used for web design, but with a quick tweak can do everything the GBST did.

Here is how you can, in five easy steps, create your own GBST clone:

STEP 1: Add Extension

If you’re not using Google Chrome (which you should be) open it up and add the WebDeveloper Image Overlay extension.
webdeveloper-image-overlay_arrow600

STEP 2: Copy Image URL

I found an old image of GBST and added it to MyMarketer just in case the image is ever removed. Go here and grab the url of the image (or right click on the image below and select “copy image url”). You might even consider downloading the image and uploading it to your own server so you don’t have to even rely on MyMarketer.

browser-size

STEP 3: Extension Settings

Once you’ve added the extension to your browser right click on the extension icon and go to options.

webdeveloper-image-overlay_options_arrow

STEP 4: Add Image

Take the image url you copied from MyMarketer and add it to the text field found under the Options section. Select Save after the url has been added.

webdeveloper-image-overlay_image_arrows

STEP 5: Analyze a Website

Go to a website you want to analyze and click on the extension. You will see a thumbnail of the GBST image. Select the thumbnail and watch the magic.

webdeveloper-image-overlay_thumbnail_arrow

That’s it. Simple and easy! Feel free to add me to your Christmas card list for showing you this hack Ü. I just wish I had found this extension years ago when GBST went away.

BONUS

Below are five websites that understand the value of having 99% of the web see the most important aspect of your website. Obviously, being viewed and being noticed are two very different things. The GBST is more about making sure that the most important aspects of a website show up in just about every browser size. It would be interesting to take these five websites and do eye laser testing. My hypothesis is that the 99% viewed and the 99% noticed would be very different.

CheapCarInsurance.net

The original creators of this website are the ones who showed me the GBST. The design you see below is theirs and it isn’t by mistake that they have the quote box (their CTA) in the 99% view.

cheapcarinsurance600

Bing

I actually was surprised that it is Bing, and not Google, who has designed their search bar in the 99% view. Google’s search bar is in the 98%, which obviously isn’t bad, but with 3.5 billion daily searches on average a percent is a big deal (though, I think Google’s global dominance most likely minimizes any discrepancy here).

bing600

Flickr

It seems that for some reason the extension doesn’t entirely lay nicely over Flickr. I found this was the case with YouTube as well (but YouTube was more noticeable). Flickr’s CTA is to sign-up and I think it is wise that they have the button both in the navigation (the 99% view) and also below, but with different messaging.

flickr600

Amazon

One might debate with the Amazon example that their product display is their CTA but I would contest and say it is their search. They definitely catch users with their carousel, but it’s the search that most users are going to go straight to. So, even though Amazon uses a carousel their search is what is taking precedence.

amazon600

Tumblr

I’ve always been impressed with Tumblr’s marketing savviness, and I think here is no different. What makes Tumblr powerful is not that you can create content, but rather it is a community of content. They prominently show this by having their search in the 99% view over logging in.

tumblr600

What I find intriguing about these sites is that three out of the five have their search in the 99% view. It makes sense that if a user is only going to see one thing it might as well be something that allows him or her to discover what he or she is looking for.

Related Posts: