Liquid Fold is a joint project between Natalie Downe and Simon Willison.
How we get the browser size
To get the size of the browser viewport we use a JavaScript file hosted by us, all you have to do is insert one line of html to include that file into your page.
Our JavaScript looks at the user agent string which is sent by your visitors' browser, it tells us what operating system and browser they are running. We then use our own onload event handler which will play nicely with any JavaScript you already have running on load.
Once your page has loaded we get the browser viewport width and height using some cunning browser trickery borrowed a little from the jQuery source. The viewport excludes all toolbars etc, so is just the visible window being used to view the page.
Next comes the clever bit, to record the information we have just gathered, we encode it into arguments to http://liquidfold.net/record? and add this as the src attribute to an image. We preload this so we don't actually need to add this into the DOM.
The browsers and operating systems we currently track are: Gecko (Firefox/Mozilla/Camino/etc) on Mac, Windows and Linux, Opera on Mac and Windows, Internet Explorer on Mac and Windows and Safari on Mac and Windows. Yes, we do know this does not cover all possible eventualities, if you would like to help us update the JavaScript browser detection, please drop us a line at info AT natimon DOT com.
Recording only unique visitors
Getting only unique visitors is done with cookies set using JavaScript. If there is already a cookie set for the size the browser is currently running at then the hit is not recorded. Otherwise we record the hit and set a cookie for the current dimensions.
Naturally this does mean that if a user then resizes your site and either refreshes the page or visits another page on the site then this is rightfully recorded as another hit because the dimensions have changed, the cookie is then reset.
So you want the data?
To download or view data for a specific report, go to your statistics report page and look for the download link at the bottom.
One last thing ...
This tool isn't designed to resolve that age old argument of whether you should build a fixed, fluid or elastic site. That is for you to decide considering your users, design constraints and the media in which you work.
But if at the moment you are basing any design decisions on screen resolution figures, they are the wrong figures. Using Liquid Fold you can get more accurate and complete information on how your users actually use your site and the web at large.
If you would like to know more, or have any questions regarding liquid fold, please feel free to email us at info AT natimon DOT com.