Simon Collison’s two column layout is changed to a three column layout for wider windows. Simon has published the code which controls his website layout – in his case the script changes a
class on a wrapper div.
There is some interesting chat in the comments. In particular, in reference to John Allsopp’s Dao of Web Design, Simon points out (tongue somewhat in cheek) that the layout
does indeed adapt to the browser window [...] as the designer my need for pixel-perfection is not compromised, and as such I achieve the designer vs reader “enlightenment”.
Designed and built by Dave Shea, this site has three fixed width layouts based on the same design. The script in this case is based on work by Cameron Adams and instead of changing a class, switches to an alternative style sheet.
I’m not entirely sure why this site wasn’t just built using a liquid layout with some
max-width functionality attached, as the layout does not fundamentally change for different window sizes. I know that Dave is not the world’s biggest fan of liquid layouts so I guess this is the compromise he came up with.
The web stats application, Mint, displays many tables of data, arranged side by side. As you can see from the demo the tables are liquid in width and rearrange themselves to an optimum layout depending on window size. This is a particularly effective use of the technique as it really does make best use of the screen estate for displaying large amounts of data in the most readable way.
UX Magazine uses a style switcher technique, similar to Rosenfeld Media. The way the large right hand column (on windows >1024 px) drops down below and slots in perfectly with the grid is impressive. Here the tight grid design really benefits from the change in layout, particularly as a liquid approach to this design would not really do it justice.
Based on Simon Collision’s code, I’ve put together a four column example which goes through four layout changes depending on window size. The idea was to have a liquid layout that adapted to keep the photography at a sensible size. In truth a variable fixed width approach would probably be more appropriate here and it actually ended up a bit all over the place – think of it as an example of what not to do.
A few people have been experimenting with a similar idea but using CSS alone – essentially by combining floats with
min-width. See work at Muffin Research and morethanseven.net.