Second Signal's web site has been the focus of a great deal of my time recently. I'd love to use all that screen real estate on the right side that my laptop's wide screen shows, but before even attempting that I needed to understand what other people would see.

There are lots of sites out there declaring that most people are using 1280x1024 screens now that LCD panels have been standardizing on that at 17" for so long. Other sites say the majority are 1024x768 still. Pretty much nobody is running at 800x600 other than the special cases for visually impaired or mobile browsers.

I decided to do my own mini-survey to see what the people browsing MY site were using. To do that, I used (blatantly copied from a demo) the following code:

var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } document.getElementById('screenwidthpoll').innerHTML = "<img style='visibility:hidden' src='/xxxxx/xxxx.nsf/onepixel.gif?open&screen=" + myWidth + "x" + myHeight + "'>";

This works with a small "<div>" element with an id of "screenwidthpoll" on the page and causes the browser to download an image using the following relative URL:

"/path/database/fileresource.gif?open&screen=0000x0000"

I can then parse that in the logs and get pretty good statistics. The numbers aren't exact because I'm measuring "useable screen" rather than native, so depending on the width of scrollbars and things it varies. I'm compensating by rounding down (dropping the least significant digits) to the nearest 100 pixels and categorizing on the result.

So what am I seeing? 44% of browsers to my site have a useable screen width on the browser page of about 1000 pixels. 46% of browsers to my site have a useable screen width of about 1200 pixels. More interesting is that if you draw a dividing line at 1000 pixels, exactly 50% of browsers have 1000 or fewer and exactly 50% have more than 1000.

Unfortunately, content made for 1024x768 monitors looks terrible if you just allow it to expand all the way out past a certain point. My laptop natively wants some crazy number like 1920x1280 but I can't even read that on a 15" screen. I've set it to 1440x900. At that width, the page would look terrible. Since the css value for "Max-Width" doesn't work well across browsers, you have to do some nasty javascript hacking to allow an expandable area that stops at a specific limit. You can do it in Domino though (or PHP) by sensing the browser as you're rendering and keeping their width in a cookie. If you know they're using a wide browser and you know their browser version you could change the "width" attribute as you're rendering a page.

Until then, the smart money says you've got just under 1000 pixels of width to design for.

Note: For a good generalized poll of browser widths, take a look at these two links:

• Browser Survey on Taming the Beast
• W3C Schools Browser Width Stats