Browser Size from Google Labs is quite an eye-opening tool. It tells you quite visually what percentage of your traffic is seeing a chopped-off version of your web page.
The first impression your website makes is how much of it can be seen in the visible area of a browser. Before the user decides to click, or even scroll anything, he will be looking at your website through a narrow lens. It’s in your best interest to optimize your content to look fantastic even when the window is small. Often overlooked, the way your webpage fits into your visitors’ viewport needs to be optimized to showcase all your best content.
Note that viewport size isn’t simply just a function of mobile vs. web. People have different screen sizes for their computers, from 11 inch or smaller laptops to 32 inch or more monitors. Also, many many users do not keep their browsers maximized; they resize the browser into all different shapes and sizes. Yet, for all of these different types of visitors, we want to make a great impression by keeping our most compelling content “above the fold.”
This snapshot illustrates how Browser Size can help a website:
I typed in a URL at the top (from my site), realtweeter.com/tweeters , and it loaded my page against a colorful graph-looking overlay. The numbers at the top edge and left edge represent pixel rulers, so you can judge different browser viewport sizes. The lines and percentages are Google’s reporting of what percentage of web traffic have a viewport at least as large as the line denotes. So for example, Bruno Mars can be seen by 99% of all visitors, because 99% of all visitors are using a browser viewport at least that size.
The tool has done its job, now it’s up to our own judgment as to what to make of the results. 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. This is not the case with this page. I do 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, Browser Size is telling me that I should relocate my left sidebar to the right side of the page. It is pushing content on the right had side off of the viewport 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 access Browser Size from your Google Analytics account. Under My Stuff, open Content and select In-Page Analytics. A button on the right hand side (labeled Browser Size) will bring up an integrated interface to the Browser Size functionality. It is also available simply at browsersize.googlelabs.com as of this writing, but Google warns it will be sunsetted in the future in deference to the version integrated into Google Anayltics.
Considering how your site looks through a variety of viewport sizes can be illuminating. You may be trying to raise user engagement, CTRs and the like through more straightforward methods. Considering viewport size lets you tap into the less unquantifiable aspects of UX to improve your site.
Philip Stylianos is the VP of Product at Real Tweeter, a social media aggregation site that displays Twitter data in an interesting way, including top tweets updated hourly and the real screen names of celebrities on Twitter.
