Progressive layout

My website definitely needs an overhaul. I’ve been using the default ‘Kubrik’ theme too long. Surely I could download and run another theme. But, being a webdeveloper/designer, that is beneath my standard ;-).

Last may I stumbled on this concept of ‘Progressive layout’ by Alessandro Fulciniti. The concept is simple, build a ‘liquid’ or scalable layout using CSS and use a piece of JavaScript to limit the display-width of the layout. E.g. Whenever a browser window is at it’s ‘maximum’, make it a fixed width layout. When the browser window is scaled below a boundary value, change it to a ‘liquid layout’. Even below a set threshold change it back to a fixed width layout again. See Alessandro’s example of a 3-column layout with and without the concept in place. (Open up and resize your browser! See what is happening to the width of the layout?) This is something I’ll probably want with my layout. (Degrading nicely for old browsers, mind you)

Ever since the inception of the internet people had the choice of fixed or liquid/scalable layouts. Each one had their pro’s and con’s. But this has never been combined before (I think). Looking at and testing Alessandro’s code I found something that annoyed me. When you load up the above demo’s and scale them, the margins are variable. This got me thinking and testing myself. Scalable below a certain threshold using the liquid layout, above the threshold fixed width. And here’s my demo.
It currently is a ‘proof of concept’. Whenever the browser window is smaller than a 1000 pixels (960px + 2 * 20px) it changes to a liquid layout. I’ve tested it in IE6, FF 1.0 and Opera 8.0 and it works. IE5 has some trouble switching to liquid. So before I’ll release the script I’ll have to do some testing. :-)

(Feedback is welcome)

2 thoughts on “Progressive layout

  1. Caspar Post author

    @Paul: Nice! I see you’re also using ‘max-width for IE’ styling. That’s something I came across after making this post. See the max-width in Internet Explorer article by Svend Tofte. So exit JavaScript it is.

    BTW: Compliments on your inline commenting of your demo. I think I’ll take some more time picking through your code. :-)

Leave a Reply

Your email address will not be published. Required fields are marked *


+ five = 7

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>