ChunkySoup.net Serving hearty nuggets since 2001

You've Been Bugged: Tracking Visitor's Browser Sizes

This article's original home was at http://www.neuralust.com/~cac6982/20011002/ but has been moved here in hopes of someone actually finding it. Some minor edits have been made to represent its new home and its age, but other then that it represents the original text.

In my eternal quest to try and design pages that conform to the canvas that my site visitors browser window I found that I was missing one essential piece of information - what size was the canvas that I was being handed to work with? Not content with merely observations of the browser usage of myself and my coworkers I started looking for a larger sampling of users. So, I went to all the usual sources for statistics on the browsing public, sites like thecounter.com, and got some numbers on platform, and screen resolutions, but that's not very helpful. Since I never surf with my browser window 'maximized' (full screen) I knew that these numbers didn't show the complete picture. I was really wanting to know the dimensions of only the part of a visitors screen that is actively displaying a web page

So, what now? How do I go about finding info on the size of a user's browser window minus all the chrome and other things going on their screen. This area is often referred to as 'above the fold'. Also, is it normal for folks to be browsing full screen so that there are at least a few predictable sizes I can target, or is it a purely random event.

The Bug

The browser size information I want is readily available via javascript. In fact, I have used the following code quite regularly when managing positioned page elements.

var iWidth = (window.innerWidth) ? window.innerWidth
	: document.body.offsetWidth;
var iHeight = (window.innerHeight) ? window.innerHeight
	: document.body.offsetHeight;

How do we get this information reliably from javascript back to my server? Since one cannot connect to an external data source directly we must find an alternative way of contacting the server to piggyback off of. Sending the information back via standard GET request seemed to make the most sense. Coding this into links on a site, however, seemed a pretty ugly way of doing things. Not only would it be a pain to manage the links on a site, but I wouldn't get this information back to the user without them clicking on something.

The answer was to piggyback off of a javascript request for an image, like in the javascript function that follows.

function triggerbug() {
  var iWidth = (window.innerWidth) ? window.innerWidth
    : document.body.offsetWidth;
  var iHeight = (window.innerHeight) ? window.innerHeight 
    : document.body.offsetHeight;

  var bug = new Image();
  bug.src = "bug.gif?clientw=" + iWidth + "&clienth="
    + iHeight;
}

So now, I can call this function whenever I'd like, specifically upon loading the page, and the information on the visitors browser side would be recorded. In the above example the information is simply recorded in my server logs for retrieval later. A slight variation is to call a server side script (php, perl, etc.) that records the information in a source other then your logs.

Now, these numbers aren't statistically complete by any means. The bug's reliance on javascript being it's biggest short fall. That being said, I think it does a much better service then the examination of screen resolutions, which are the only numbers I ever seeing thrown about.

The Numbers

nerualust.com/~cac6982/

Statistics for visits to http://www.nerualust.com/~cac6982/ for the months leading up to February 2002.

Number of Visits5369 (2709 unique addresses)
Average Width988
Average Height660
Number of Windows Visits4531
Average Windows Width998
Average Windows Height655
Number of Mac Visits775
Average Macintosh Width944
Average Macintosh Height693
size range number of visits % of total visits Average Height
<640972361
@64030319
<80051510553
@8002364456
<1024209439646
@1024100119621
<115258511737
@11521142720
<12803476838
@12802745872
<1600731911
@16002601027
>160040319

Percentage of visits at any given 'maximized' width: 31%

placenamehere.com/contents.html

Statistics for visits to http://www.placenamehere.com/contents.html during the month of September 2001

Number of Visits1276 (1059 unique addresses)
Average Width874
Average Height573
Number of Windows Visits1153
Average Windows Width874
Average Windows Height529
Number of Mac Visits114
Average Macintosh Width857
Average Macintosh Height1003
size range number of visits % of total visits Average Height
<640635370
@640292328
<80029623500
@80026721442
<102433826682
@102416513611
<1152423900
@1152161699
<1280373831
@1280131875
<160030903
@1600711032
>1600000

Percentage of visits at any given 'maximized' width: 39%

placenamehere.com/2001-09-11/index.html

Statistics for visits to http://www.placenamehere.com/2001-09-11/index.html during the month of September 2001

Number of Visits32871 (25716 unique addresses)
Average Width835
Average Height506
Number of Windows Visits30587
Average Windows Width833
Average Windows Height489
Number of Mac Visits2104
Average Macintosh Width847
Average Macintosh Height741
size range number of visits % of total visits Average Height
<64029469344
@6407932328
<800849526462
@800844526441
<1024662720610
@1024397412608
<11526552742
@11522621702
<12803401831
@12802351860
<1600730931
@16002401023
>160020328

Percentage of visits at any given 'maximized' width: 42%

It's perfectly reasonable to believe that some small portion of each count at a specific 'full screen' resolution may in fact be someone with a larger screen resolution whose browser just happened to be at a size identical to a lower screen size (e.g. a 1024x768 user whose browser is 800px wide). The numbers chosen for this breakdown also to not consider the use of any sidebars. For these reasons I am not comfortable saying that the values chosen for this breakdown fully equate to 'maximized' vs. 'non-maximized' behaviors.