4th May, 2006

The importance of window-width

A few folks have confused the term browser window-width with screen resolution. To clarify, the focus of this article is on the width of the user’s browser window and not their computer’s screen resolution.

Aside from platform, browser, available technologies and screen resolution, another major factor in designing for an audience is the width of the browser window. As a designer whose website behaves in accordance with this anomaly, I obviously have to priorotize this factor.

Out of curiosity, I decided a while ago to start collating stats to help me decide how wide to make my layouts, and therefore make a better shot at the usability experience for the end user. As Collylogic is aimed squarely at the design community, I assumed tracking this site alone would give an unfair impression, as most of you probably use - for the sake of argument - an iBook, iMac or well-configured PC. It seemed necessary therefore to also track usage on a site aimed at a much wider cross-section of computer users to glean a better picture of typical window sizes.

I assumed there would be a reasonable gulf between the two, with more of Collylogic‘s visitors having a wider viewport. Interestingly, the gulf was not so great…

Thinking variable/fixed

NOTE: This site no longer uses the technique mentioned below.

You are probably aware that Collylogic has what Richard Rutter calls a Variable Fixed-width Layout (a must-read if you are interested in the various methods thus far).  This is an approach that is neither fixed nor fluid, but somewhere in between. As a poncy designer, I demand that my intricate design details are not compromised by unknown column widths (as I would get with a fluid layout). The problem is, I’m not ready to build a fixed site of 1000-pixels or so (witness the negative response to all the 1000-pixel width reboots over the last few days), and I feel the desperately tired 780-pixel layout is just too darned cautious.

Thus, with a bit of nifty JavaScript, I can serve fixed-width columns and have either two or three columns in play dependant on the end user’s browser window-width. If you haven’t tried it, drag your browser window above or below the 1000-pixel width-mark and notice the third column float to the right, or drop under the second column. Not everyone likes this solution, but it’s a viable option.

Thinking fluid

We know that there are other solutions that make fluid design a strong option. Despite IE’s lack of support for the mighty max-width property, designers can still get their freak on with a few hacks that will - just about - set a maximum width for a fluid design (see Vitamin for a perfect example). The chance is that whether you go fixed, fluid, variable fixed-width or elastic you’ll still think long and hard about your audience, and why one layout will be more appropriate than another.

Faith in statistics

I could waffle on about window-width all day, but I’ll cut to some stats. Compare the two tables of window-width percentages from Collylogic and Dirty Pretty Things (a site that averages 15,000 hits per day from a typically PC-friendly crowd).

Chart showing width stats for CollylogicFigure 1: Window-width stats for this website

Chart showing width stats for Dirty Pretty ThingsFigure 1: Window-width stats for Dirty Pretty Things site

So is this any use?

The figures of most interest for me are the “Greater than 1000” percentages, particularly as this is the threshold at which Collylogic shifts from 2 to 3 columns. That figure has averaged at 77% for some time, and might be of little surprise. I was however very surprised to see that 73% of Dirty Pretty Things visitors have a viewport wider than 1000-pixels (I hope I’m not insulting that audience by saying this - but they’ll all be smashed on cheap cider anyway). Whilst it is extremely important not to ignore the 23/27% browsing with a width less than 1000-pixels, these figures are encouraging.

This could mean that the generic, lowest common denominator audience that we as web designers are always worrying about are actually a bit savvier than we think. Now that they all have iPods, are they also trading in the outdated PCs for shiny new iMacs and Sony Vaios? You certainly see a lot more Macs and Viaos in the coffee shops these days.

Even so, it is still important to remember that a 1024 x 768 screen resolution does not mean that users have their windows fully extended. Chances are there’s a fair bit of desktop on view, and that the viewport is perhaps 850/900-pixels wide. On my Powerbook, I’m noticing a horizontal scrollbar on more and more websites built by well-known, standards-aware designers, forcing me to extend my browser window or miss information.

It seems likely that there will never be a perfect solution, and web design will continue to be based upon carefully considered assumptions. When the “Greater than 1000” stat has a percentage of 100%, I might consider fixing the width of my website to 1000-pixels, assuming that by then all Powerbooks have a magic “make this computer five inches wider” button.

Personally, I’m disappointed to see so many websites fixed at around 1000-pixels, and the recent CSS Reboot frustrated me on that score (although most were personal sites, so do what you want). With a wealth of more flexible methods available (elastic, fluid, variable-fixed etc) is there any reason why the end user’s usability experience should still be compromised? Call me “stubborn”, but I don’t consider poor support for max-width to be a legitimate excuse any more.

Further Reading

Track your own window-widths


Prev / Next


If you enjoyed this article, please subscribe to my Internet of Natural Things letter, and maybe grab the RSS feed. Thank you.