Google Browser Size: What Your Users See

A big challenge in web design/usability is understanding that visitors have different screen sizes and most screens are smaller than you would think.

Steven Johnson
by | Posted: January 29, 2010 | Updated: March 31, 2014
Blog Post Image

This can be particularly difficult convincing clients, website owners, and graphic designers with large monitors the rest of the world does not have 24 inch widescreen monitors.

Google solved this by creating a simple browser size toolthat overlays screen size percentages on top of your website. Giving you a quick easy way to see where the fold is for different visitors.  

This visual representation will help make the point how valuable the upper left corner of your website is and help you make a better decision when placing your call to actions.

How Google Browser Size Works:

Go to  http://browsersize.googlelabs.com/  and enter your websites address.  You will then see screen size percentages overlayed on your site.  I bet you will be surprized at how much of your important information is below the fold. You can determine the level of opacity for the percentages. There may not be any other configureation like all great tools Browser size is easy to use.

My Experiences with Browser Size:

I have just been able to do a little testing.  Here is what I am thinking.

1. Going to aim for the 90% range for design and layout stylin.

2. Going to make sure all of my most important calls to action are within the 95% hoping for 98% range.

3. Noticed that centered web sites may have the horizontal percentages a little off.  I narrowed the browser so that just the content is displayed.  Not sure how narrrow to make your browser? You may want to narrow the browser until the elevator bar appears at the bottom of the window. After doing so you can get a feel for the most narrow browsers. 

Further Reading:

Here is a Google Website Optimizer post going into more detail on the new tool.

http://websiteoptimizer.blogspot.com/2010/01/change-way-you-see-your-site-with.html

http://www.sensible.com for good reading on website usability

Time to start making your websites smaller!

Follow Online Backup Search at Twitter Online Backup Search Feed Online Backup Search on FacebookOnline Backup Search on YoutubeIntown Web Design on Google+ Page