ThinkLemon

I think there used to be a tagline about (tag)soup here… anyway…


Also visit:


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: Next article:


2 Responses to “Progressive layout”

  1. Paul Says:
    October 14th, 2005 at 7:14 pm

    I went through a similar exercise awhile back. Here’s my demo. Maybe it will be of help to someone…

  2. 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. :-)

Reply to the article or a commenter

Comment on this article

Please note that your comment may be withheld from immediate publication. Keep your comment on-topic/on-commenter and your comment will be published ASAP. (Off-topic comments will be deleted at the moderator's discretion. Please us the contact form if you feel your comment has been deleted unduely.)


Search

Are you looking for:

Recent Comments

  • Partnerseiten: I don’t even know how I finished up right here, but I...
  • Jaroslav Klokocnik: Gentlemen: we are very glad that thanks to Dr Rajmon (his...
  • Mike Flaugher: I’d like to find a way to filter by dates. I’m on...
  • made a post: Hello there, I found your site by the use of Google at the same...
  • Jayden Lawson: Also – just restart your browser after setting it to...

Recent Articles

Archives


ThinkLemon is proudly powered by pure will-power, determination and lack of direction in general. Furthermore, it sits on a piece of hardware, I have no clue where, that somehow manages to support a webserver, a scripting language, a database and therefore ... a tool to fill this space.

Entries (RSS) | Comments (RSS).