The Switchy McLayout Technique

Spread the love

This is very cool.  A List Apart has an innovative article on a technique that allows one web design to suffice for a number of screen resolutions.  The technique allows for a truly liquid layout.  The page changes on the fly as the resolution of the browser changes.

It’s not all CSS.  The Switchy McLayout technique uses a bit of unobtrusive javascript, separating behavior from markup.

To give you an idea of what is possible, try the example page first. When this page loads, resize it and watch the purple bar above the layout.  You’ll see the pixel measurement at the top change, representing the current width of your browser window.

Even more fascinating to me is the second example in this article.  Notice how the four articles jump to an Ajax-like box as you size them down.  First, the tabs are on top.  Then, as the screen shrinks even more, the tabs jump to the side.  Finally, the articles simply stack one on top of the other for very small resolutions.

This is innovative web design, truly on the cutting edge.