BrowserSize from Google Labs gives wonderful insight about how others see your site. It shows you in a visually convincing way what percentage of your traffic is not seeing all of your webpages.
How much of your landing page is visible to the average user? The first impression your site makes depends on this factor. Before the user decides to click on or even scroll around, he will be hit with a partial view of your site. It’s best for you to layout your content to look appealing even when the user’s browser window is small or oddly shaped. Often overlooked, the way your webpages fit into your visitors’ viewports should be optimized to highlight all of your best content.
When considering layout, keep in mind that small viewports are not strictly a matter of mobile vs. web. Users have different screen sizes for their computers, from 11 inch or smaller laptop screens, to 32 inch or more monitors. Also, many people do not keep their browsers maximized to the full size of their screen; it gets resized into all different shapes and sizes. Then, you may add in the different screen sizes of iPhones and Android devices. In all cases, our goal is to keep our most compelling content “above the fold.”
This snapshot is an example of how BrowserSize can help a website:
I typed in a URL from my site at the top of the page, realtweeter.com/tweeters, and it loaded my page against a multi-colored overlay. The numbers at the top edge and left edge represent pixel increments, so you can compare different browser viewport sizes. The graph lines and percentages show what percentage of web traffic Google says have a viewport at least as large as the line signifies. So for example, Ashley Tisdale can be seen by 98% of all visitors, because 98% of all visitors are using a browser viewport at least that size.
The tool gives us great data, but it’s up to us to interpret the results. It’s best to choose a baseline percentage with which you ignore the plight of the more narrowly-sized viewports. I’ve adopted 80% as my minimum critera. That is, if 80% of traffic can see what I want them to see, then the page is acceptable. The example page given above would fail this test. I definitely want users to see the page number links (prev, next, 1, 2, 3, etc.) to show that I provide thousands of tweeters, not just twelve. This navigation bar is below the 80% viewport range, so I have some work to do. Also, BrowserSize is giving me the idea that I should move my empty left sidebar to the right side of the page. It is pushing content on the right-hand side out of sight needlessly. Only 90% of people can see Kim Kardashian’s face; I would like even more visitors to be able to see my best content.
You can go to BrowserSize from your Google Analytics account. Under My Stuff, open Content and click on In-Page Analytics. A button on the right hand side (labeled BrowserSize) will bring up an integrated interface to the BrowserSize functionality. It is also available simply at browsersize.googlelabs.com as of this writing, but Google warns that this url will be going away in the future in deference to the version integrated into Google Anayltics.
Considering how your site looks through a variety of browser window sizes can be illuminating. You may be trying to raise CTRs and other engagement through more straightforward methods. Considering viewport size lets you tap into the less unquantifiable aspects of the user interface to improve your site.
Philip Stylianos is the VP of Product at Real Tweeter, a social media aggregation site that displays the best of Twitter in an interesting and easy-to-read way, including top tweets updated hourly and the real screen names of celebrities on Twitter.