Clagnut

spacer

Variable fixed width layout

§ Design thinking · DOM | JavaScript · CSS techniques

There’s an different approach to web page layout which is gradually getting some traction. The idea is that the layout is changed to best accommodate the window size. As you might expect, it is accomplished by using JavaScript to change the CSS of the webpage. Here are some examples:

Collylogic

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”.

Rosenfeld Media

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 min-width and 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.

Mint

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

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.

Clagnut example

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.

Non-JavaScript examples

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.

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.