Today I followed a link (via digg) about the New York Times redesign, who have also adopted a wider layout and in so doing alienate their users with an 800x600 screen resolution. Their editor posted a note about the new design, while TechCrunch's Michael Arrington has blogged about some new features, and Subtraction's Khoi Vinh (Design Director for NYTimes.com, and was involved in the redesign's implementation) also has a lot to add in The Awesome Redesign I Didn't Do. This comment on Subtraction by Adam Greenfield stuck out in particular:

Not to sound the rare (lone?) negative note, but I really, really don't like this design. I knew it wasn't yours the moment I saw it, because I couldn't imagine you'd ever have signed off on something so unwieldy.

I see in the Times' design notes that this version is intended to take advantage of the larger monitors an increasing percentage of their readers use, and since they presumably have figures to back that "increasing" up, I suppose I can't argue with that. I do have to say, though, that it looks like ass on my 12" Powerbook.

I suspect my Adblock Firefox extension makes the site so much more attractive, but my interest lies specifically with the choice of layout.

There's nothing unique in catering exclusively for users with wider viewports, but when you consider that they're both news sites - which have proven over the years to be very cautious with redesigns, for me they represent an era of change that's so infrequent in a medium that's so revolutionary. I'm talking about the death of a resolution statistic.

Is 800x600 already the worst-case scenario?

We're right in the middle of a transition period, between 800x600 and 1024x768, with CNN, NYTimes and Newsvine too joining an increasing number of other sites that are dropping 800x600 layouts for good. Compare them with the aged designs of BBC News and IOL for example, and some obvious trends emerge which make it easy to convince anyone on the benefits of upgrading their monitor or resolution setting. Also since a higher resolution doesn't translate into smaller text if you're using a modern web browser which handles text sizing well.

I launched a redesign for Thinkspace on the weekend, an interior design practice here in Cape Town. I'll be posting about this in more detail at a later stage, but for now, the liquid layout technique I've used is the same as all of my other most recent work, which scales to fit a maximum width of 1024, while downsizing for smaller viewports. I've embedded a Flash header and showcase slideshow on the homepage (using deconcept's FlashObject which is great for best practices) and these scale along with the rest of the content. It's unconventional, but it works and you probably wouldn't have realised had I not mentioned it.

(Side-note: subscribe to Geoff Stearns's deconcept blog, it's a hell of a read!)

Without proper research and usability testing it's near impossible to know the surfing habits and screen configuration of your users. So as hardware advances, and users slowly adjust to using larger screen resolutions and wider viewports, and as designers continue to push this envelope, I continue to believe that a liquid layout of sorts is the safest way to accommodate everyone.

UPDATE [13/04]: Sony Ericsson have also switched to a wider (1024+) fixed-width layout.

UPDATE [17/05]: Search giant Yahoo! redesign with a wider 1024+ layout, but also provide for a narrower layout. SkyeMedia writes: Is it Time to Abandon 800x600?

I've used the word 'viewport' in the context of the browser size and not screen resolution.

If you can't figure out the rendering differences between the techniques, you may want to try each at different viewport sizes (increase your screen resolution and/or browser width) and at different browser text sizes. Use this bookmarklet (drag it onto your Bookmarks Toolbar or into your Favourites) to easily resize your browser width.

I'd like to keep this list fresh, factual and unbiased - please comment or drop me an e-mail if you have something to contribute. And no debates over personal preference, please.

1. Fixed: layout is determined by absolute dimensions, typically to fit a viewport with a width of around 800 pixels. With 1024x768 resolutions gaining popularity, there is a growing trend to design exclusively for this size.
   
   Pros: Easy to implement.
   Cons: Supports single scenario only. Typically breaks when browser text size is adjusted.
   Examples: news.com (800), download.com (1024), theonion.com (1024), macromedia.com (800), 24sata.hr (1024), bmw.com (1024)
2. Liquid (aka. Fluid): layout is determined by relative dimensions, typically percentage values to fit 100% of the viewport.
   
   Pros: Accommodates all viewports. Larger volume of content is viewable without scrolling. Scalable and flexible for forward-compatibility.
   Cons: On wide viewports, readibility suffers from long lines of text.
   Examples: wired.com, sercotransarctic.com
3. Resolution dependent (by Cameron Adams): varying layout according to viewport width. When the width is adjusted, the layout is dynamically adjusted accordingly. JavaScript required, but degrades gracefully.
   
   Pros: Full control over how changes in the viewport have an effect on the content. Flexible.
   Cons: Time-consuming, more maintenance required.
   Examples: Author's demo, rammstein.com, smh.com.au, microsoft.com (last two require browser reload).
4. Elastic (by Patrick Griffiths and more recently, Roger Johansson, and again by Douglas Bowman): resizes to browser font size. Similar to Opera's zoom function.
   
   Pros: Takes the user's preference into account. Flexible. Accessible.
   Cons: Time-consuming, more maintenance required. Difficult to make images scale.
   Examples: mozilla.org, yahoo.com, aol.com, Elastic Lawn (CSS Zen Garden)
5. Jello (by Michael Purvis): a combination of Fixed and Liquid.
   
   Pros: Scalable and flexible for forward-compatibility.
   Cons: Steep learning curve.
   Example: Author's demo.
6. Progressive (by Alessandro Fulciniti): a combination of Fixed and Liquid. A Fixed layout under and over certain pixel widths, while Liquid inbetween. JavaScript required, but degrades gracefully.
   
   Pros: Scalable and flexible for forward-compatibility.
   Cons: Steep learning curve.
   Example: Author's demo.
7. Constrained (aka. Untitled): Liquid layout up to a maximum pixel width.
   
   Pros: Scalable and flexible for forward-compatibility.
   Cons: uses IE's proprietary CSS rule to emulate max-width property.
   Example: This site.