This is the celebrated journal of Mr. Simon Collison A.K.A Colly

The importance of window-width

4th May 2006

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 Collylogic

Figure 1: Window-width stats for this website

Chart showing width stats for Dirty Pretty Things

Figure 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

Responses

# Andrew Faulkner responded on 4th May 2006 with...

Colly,

I believe that it also important to remember that for instance if one’s resolution stats show 100% for 1024x768 then the chances of all your users using all that resolution is slim.

Many people will not use the maximum size for their window or may have a sidebar open.

People often say no-one uses 800x600 anymore (not true anyway) but many 1024x768 users will be browsing at this size.

What do you think?

Andy.

(P.S. Just realise that you’re in Nottingham too.)

# Cody responded on 4th May 2006 with...

Andrew, he is talking about window width, not screen width. These stats do take into account the browser’s actual width, not the screen.

# Simon Collison responded on 4th May 2006 with...

Andrew: Forgive me, but I think you misunderstand my point. My point is that few use their full screen.

I am saying what you are saying, but you seem to be using the word “resolution” when you mean “browser window-width”. I said that “window-width” stats would be 100% (in a dream world), not resolution.

Yeah, I’m in Nottingham. God bless her.

# Andrew Faulkner responded on 4th May 2006 with...

Sorry - must have misread that. Eyes glazed over after a heavy day designing.

Clever stats. ;)

# Michael Newton responded on 4th May 2006 with...

I think many people are buying LCD monitors these days.  Most 17 and 19-inch models have a native resolution of 1280x1024, which is probably why the ‘greater than 1024’ audience is so big amongst both audiences.

# Anatoli Papirovski responded on 4th May 2006 with...

Great stuff, just one thing though. I don’t think the negative response to the wide layouts is because they are wide, the problem is they’re wide because it’s cool. Many people are just following the trend, even though they could stick with lower page width. This reboot was especially big when it comes to following trends. How many of those wide pages with vertical split did we get? Hundreds? Great! Not.

At least that’s how I see it.

# eric responded on 4th May 2006 with...

The number of wide designerly-type sites has been bugging me lately. It’s not a problem that they’re wide, but it is a problem that they don’t adapt to smaller screens. I absolutely hate horizontal scrollbars when there is no valid reason for them, and I’m happy that your method is gaining at least some level of popularity.

# Neil Scott responded on 4th May 2006 with...

Interesting statistics.

I think that when considering browser-width, one needs to forget Moore’s Law and think about the book. A few books stick out on my shelves (Generation X is annoyingly square), but most remain faithful to standards of readability.

By seeking to use as much space as possible, by cramming webpages with too much information, designers are creating readers who fail to engage with what is actually being said.

# Scott responded on 5th May 2006 with...

With regard to window width stats…

Are those number the actual browser width, or screen resolution?  My screen res. is 1280, but I tend not to fully maximize my browser.  I’m usually at 1024 wide.

# Roger Cornwell responded on 5th May 2006 with...

We maintain the website for a well-known children’s author and prior to a redesign last year I monitored screen and window widths. Here’s what the position was last August:

Screen Sizes
48.2% had 1024 x 768
39.3% had 800 x 600
6.8% had 1280 x 1024
and another 2.9% had 1280 wide but not as high.
2.7% had other sizes
Browser sizes
These are far more varied. However, going off the width as being more important than the height:
5% had a width of less than 600 pixels.
22.4% were exactly 780 x 455
32.3% were more than 750 x 400
but less than or equal to 790 x 480.
43% of browser windows were no more than 780 pixels wide
50% of browser windows were no more than 852 pixels wide.

# Simon Collison responded on 5th May 2006 with...

Scott: Actual browser window-width, not screen resolution, as stated in the article, and the first few comments.

I’d better explain this again at the start.

# Scott responded on 5th May 2006 with...

Thanks, I’m retarded. (And sometimes too busy to read.)  Feel free to delete my innane comment.

# ea barcelona responded on 5th May 2006 with...

great stats,
but the question is ... as much information in the screen is necessary?

less information, better structure.

# Charlie Palmer responded on 5th May 2006 with...

I think everyone should check out cornwell internet. We can all learn something from that site.

Charlie.

# Damien responded on 5th May 2006 with...

There was a point way back when, when everyone decided it was safe to move up to 800x600 web pages and I think, judging by the number of large popular and commercial sites (I think the new ‘A List Apart’ probably kicked it off) re-setting to 960+ width, that day has arrived again.  Everything moves on, screens are getting bigger, resolutions getting higher and so the websites are following and as you say, until max-width etc becomes more predictable, we’re kinda stuck with fixed width layouts.
That said, I really love your 2/3 column trick, that rocks.

# Darren Hoyt responded on 5th May 2006 with...

Whether or not new computers are shipping with higher resolutions and larger monitors these days, the sticking point for a lot of people is how wide a column of content anyone’s eye can scan and digest. The average printed book might be between six and eight inches, which is the max at which most people can read left to right, up and down, without losing their place. I’m sticking with a max fixed width of about 915px for the time being. It still displays well with most laptops and still accomodates for readability on any platform.

# Damien responded on 5th May 2006 with...

Gotta say I agree with Darren on this one.  Where I’ve made sites wider than 760px, it has been to accomodate more columns rather than expanding the main content column which, as Darren points out, reduces readability. As with this site and A List Apart, you can see how the multi-column approach adds to the design and layout without abusing the nicely readable main content column.  Thus, if you dont need to add a third or fourth column or if you have some nice design to take up the additional space, there’s probably no need to expand the width too far.

Richard Rutter’s Elements of Typographic Style Applied to The Web recommends 45-75 characters as a nicely readable length.

# Jeremy Aldrich responded on 5th May 2006 with...

I really love this technique. I was just discussing with a fellow designer yesterday about how he is handling screen width with his designs as I am still designing at 800x600 and am becoming more and more annoyed by it’s limitations and the amount of negative space in a browser window. I’m am definitely moving forward to greener pastures after reading your article and the feedback from it.

# mrv responded on 6th May 2006 with...

nice article i love this site…

# Richard Rutter responded on 10th May 2006 with...

Interesting stats there Colly. I’m glad to see someone writing about the important difference between screen resolution and brower window width. I suspect that at the moment the window width stats you quote would also match fairly closely with screen resolution, however as screens get wider, I believe we are seeing a change in behaviour in terms of user window management.

Traditionally, particularly on Windows machines (‘maximise’ works differently on a Mac), users would run application windows maximised, so a viewport width (which is what we are really talking about rather than window width per se) would be screen resolution minus browser chrome minus scrollbars (minus sidebar). What is happening is that widescreen screens are becoming so wide that it becomes impractical to run an application window maximised, and in fact much more efficient from a workspace point of view, to run two application windows side by side. Taking a typical widescreen resolution as 1280 wide, this would mean a browser might more commonly be set at something like 640 wide, or more likely larger, but the point is that, despite (and because) screen resolutions are increasing, more people may well be running browsers at less than the magic 1024px.

To reiterate: as screen resolutions increase so does the likelihood that people will be sizing windows to their own requirements and not maximising them as before. The implication is that more than ever websites should be adaptable to unknown and differing viewport widths, be that through liquid layouts, variable fixed-width or something else.

# Christian Montoya responded on 16th May 2006 with...

Sounds a lot like the stuff I was saying in my entry about CSS Reboot trends. It bears repeating, “Personally, IĂm disappointed to see so many websites fixed at around 1000-pixels… With a wealth of more flexible methods available ... 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.”

Keep fighting the good fight :)

# Gareth responded on 16th May 2006 with...

I still think it’s some of that stubborn print design mentality left over from the good old days.

What! Let sizes vary! Crazyness…

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 608 Next

Superfluous Aside

Archived in HTML & CSS, Design & Web

There are 22 responses

External References

Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.