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)
Previous article: Apple iBook. On Second Thoughts. Next article: Mozilla Firefox 1.5 beta 1 is out
Related Articles
- Who’s using the Search Bar anyway?
- While browsing to Yahoo! this bar on top struck me. Click to enlarge: Apparently Yahoo! is promoting the Search Bar, which is standard issue in Firefox. Guess they want us to change the default Google setting....
- ThinkLemon Reset: Part 1.1 - Code Cleanup and Validation
- After having thrown out the CSS last month, I've been messing with the templating code that make up this WordPress theme. Though the default Kubrick theme is great, it took me a while to...
- ThinkLemon in *Alpha* stage 3: TO-DO list
- Now that I've taken some days off between Christmas and New Year's Eve, this is a good time to look at and think about this site. Since May I started some things that are still...
2 Responses to “Progressive layout”
-
Paul Says:
October 14th, 2005 at 7:14 pmI went through a similar exercise awhile back. Here’s my demo. Maybe it will be of help to someone…
-
Caspar Says:
October 14th, 2005 at 10:51 pm@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.