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 Visits	5369 (2709 unique addresses)
Average Width	988
Average Height	660
Number of Windows Visits	4531
Average Windows Width	998
Average Windows Height	655
Number of Mac Visits	775
Average Macintosh Width	944
Average Macintosh Height	693

size range	number of visits	% of total visits	Average Height
<640	97	2	361
@640	3	0	319
<800	515	10	553
@800	236	4	456
<1024	2094	39	646
@1024	1001	19	621
<1152	585	11	737
@1152	114	2	720
<1280	347	6	838
@1280	274	5	872
<1600	73	1	911
@1600	26	0	1027
>1600	4	0	319

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 Visits	1276 (1059 unique addresses)
Average Width	874
Average Height	573
Number of Windows Visits	1153
Average Windows Width	874
Average Windows Height	529
Number of Mac Visits	114
Average Macintosh Width	857
Average Macintosh Height	1003

size range	number of visits	% of total visits	Average Height
<640	63	5	370
@640	29	2	328
<800	296	23	500
@800	267	21	442
<1024	338	26	682
@1024	165	13	611
<1152	42	3	900
@1152	16	1	699
<1280	37	3	831
@1280	13	1	875
<1600	3	0	903
@1600	7	1	1032
>1600	0	0	0

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 Visits	32871 (25716 unique addresses)
Average Width	835
Average Height	506
Number of Windows Visits	30587
Average Windows Width	833
Average Windows Height	489
Number of Mac Visits	2104
Average Macintosh Width	847
Average Macintosh Height	741

size range	number of visits	% of total visits	Average Height
<640	2946	9	344
@640	793	2	328
<800	8495	26	462
@800	8445	26	441
<1024	6627	20	610
@1024	3974	12	608
<1152	655	2	742
@1152	262	1	702
<1280	340	1	831
@1280	235	1	860
<1600	73	0	931
@1600	24	0	1023
>1600	2	0	328

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.