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?

First impression goes something like this: wow!

What caught my eye, apart from the fresh greens, was the layout: fixed width for a 1000+ pixel viewport. That makes it the first dotcom top 10 (or high-profile) site that I'm aware of, to disregard users with 800px or smaller viewports. All of the others are 100% fluid or designed exclusively for 800. I think they've taken a gamble and pushed the limits, since I really doubt that a considerable percentage of their target market (pretty much everyone, really) have a 1000+ viewport. Ideally they'd cater for all their users, but it's reassuring to see nonetheless - pushing that limit is one of the major factors that advance and evolve this medium.

As a side-note, major surfing brand Quiksilver.com was last week redesigned for 1000+ by 65media. If you can think of other big names, give me a shout.

It's also worth noting that CNET.com is also designed with this layout, although it generates a horizontal scrollbar. Silly.

The design is my kind of style to a T: well communicated, easy to follow and navigate, clean and sharp, consistent, flexible, relevant... every page element is where it should be. The homepage isn't entirely balanced, but clicking through to other pages, it fills out very well.

Their page <title>'s are how I've recently decided to start structuring mine - with the title for the page first, followed by the title of the site. It's a habit that's been hard to break, particularly on this site with my blog posts and words which currently aren't very insightful or SEO friendly. It's a tough call actually, in some instances it works better reversed. So context is relative, as with most things.

Testing in IE6x, Opera 7x and Firefox 1x (under WinXP), it's skillfully cross-browser compliant. Looking briefly in IE5x standalone, it could be tweaked to work well in that browser too, but who cares really!

Their doctype is XHTML 1.0 Transitional, which doesn't validate. Does that matter - to their users? No. To you? Maybe. That's your preference.
It lacks a character encoding. Does that matter? Definately. An easy fix.

If you find the text size too big or small, adjusting it's size doesn't break the layout. Score one for accessibility. Oops, the A-word - making a lot of noise again these days (and where it matters). I'm curious to see what develops with that, since we've been preaching about accessibility for ages but with little or no real-world backing. I know I've used the word very loosely in the past. Worth checking out: GAWDS (Guild of Accessible Web Designers) - designed to both promote and protect accessible design standards.

I'm sure I have more to add to this review, but I'll leave it there as I'm short on time. I'm sure they'd love to hear if you like it too.

UPDATE [21/07]: I just found this: We remodeled, and here's why by CNET Editor in Chief and VP, Patrick Houston - which details their rationale behind their CNET.com redesign, which apparently happened as long ago as September '04! The article and interactive tour is accompanied by some 342 user comments - many unhappy with the wider layout. A worthwhile read.

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.

Although they're using a table-based layout, I love how they've designed the table to fill the browser width on any resolution, while the neatly constructed flash images slide over each other when you resize your browser. At 800x600, most of the flash image on the right disappears while no horizontal scrollbar comes into play. At much higher resolutions (I tried up to 1600x1200), the images still continue to reveal themselves without fading into a background colour like you'd usually expect.

UPDATE: After looking at their source code for a bit, I've discovered that it's actually just a single flash file set to 100% of the variable-width table cell, so the overlapping is taking place in the flash file. Very nice either way.

Throughout the rest of the site they haven't restricted the width of the layout and as a consequence the pages suffer from poor readibility with long lines of text at resolutions higher than the average, which when all things considered, isn't such a big deal: W3Schools Statistics put the 1024x768 resolution at 53% share since January, with higher resolutions at only 13%.

I've always debated that system/browser stats are irrelevant but it's becoming a matter of time until this trend extends into the corporate environment and not only sites with a design/techie audience adopt a 1024x768 or higher approach. Having said that however, not all users have their browser window maximized to full screen, so my debate stands firm. Cater for all preferences.

I read a claim somewhere the other day that my site was designed for 1024x768 screens. It's not, and I'm confident in my restrained liquid layout approach to use it for client projects too.

Now if I can just work out how to successfully pull off this layout with a max-width middle column...

If you're looking for a neat development tool to check your designs for multiple screen resolutions, check out Sizer: a freeware utility that allows you to resize any window to an exact, predefined size.

And finally, thanks to Styleboost for the linkage and click-through visitors for the feedback, I'm in awesome company.

Craig has a stylish new splash page.... can't wait for the site!

The Ultimate Computer Chair by Roger Arrick, linked off a donkey on the edge, by Dug Falby, author of Flexible Layouts with CSS Positioning.

And somehow off one of the links on one of the above-mentioned pages, I ended up at possibly one of the most graphic anti-Microsoft websites in existence. Rock on, Mozilla 1.2! They're a little behind schedule, so I've taken to downloading the nightly builds instead.

More on web browsers, Opera Software and Microsoft's ultimate demise in this well written Salon.com article Microsoft wants your cellphone.

The software king has big plans for making the world of mobile phones safe for Windows. Can phone makers, and a little Norwegian company called Opera, stop the onslaught?