Post Archive
› May 17, 2005
Progressive Layout
First, I'd like to say that's a real honour to join web-graphics: I hope to contribute my best, I already have some entry ideas in mind.
My fourth article in English has been published today: it's about Progressive Layout. This new kind of layout combines the advantages of both fixed and fluid layout. It's a fixed layout under and over certain resolutions, but it's fluid between. In the liquid stage the layout is quite different from the classic fluid layout, since the width and the margins of the layout vary accordingly to the browser width.
This is done with a really tiny script, that can turn almost any CSS-based layout (fixed or fluid doesn't matter) into a progressive one. You can read the article here.
Comments
1. May 17, 2005 06:19 PM
2. May 17, 2005 07:07 PM
Jon Posted…
That is an interesting find. I like the one without Javascript. I think it is a bit nasty to have Javascript in the layout. No more Javascript on a page than absolutely necessary that is how I like it.
3. May 18, 2005 02:46 AM
4. May 18, 2005 04:06 AM
Richard Rutter Posted…
Scripting the layout is an interesting and seemingly effective approach, but isn't the script just replacing boxes sized with a percentage width combined with the whole page given a max-width (which I appreciate isn't supported by IE/Win)?
5. May 18, 2005 08:42 AM
Nate Posted…
Seems really quite smooth, and is certainly less JS to download compared to this min/max width Windows IE fixer. I'd bet a left and right anchored vesion would also be useful!
6. May 18, 2005 03:14 PM
Alessandro Fulciniti Posted…
Richard, the middle stage in effect is not a common fluid layout, since the margins tend to zero on the lower limit. This, apart from using negative margins and a construction like the Jello Layout couldn't be done using percentage or pixel margins on a tipical CSS-based liquid layout.
Nate, first of all thank you for everything. If I've understand well your question, I think you can use the script to get a classic full fluid layout with no margins, min and max width whitout any modification. The last two parameters should be setted to the same value, and that would do the trick..even if it's not the main purpose of the script, and in this case a slightly lighter one would suffice.
7. June 9, 2005 11:24 PM
Mike Purvis Posted…
I'm biased, of course, but I'd be inclined to take the free min-width in Jello and then use the css max-width to impose a maximum, if it's desired. And then target a script-patch at IE only.
From my perspective, min-width is a far more critical thing than max-width. Min-width prevents a layout from breaking all over the place. Max-width just aids readability.
Anyhow, nice technique Nate, and thanks for the link. I'll be interested to see where all this leads...
8. June 9, 2005 11:43 PM
Nate Posted…
*Nate picks up mirror and shines nice comment from Mike back over to article author Alessandro* :-)
9. June 10, 2005 01:27 PM
Alessandro Posted…
Hi Mike, first of all my compliments for the Jello layout. And yes, definitively min-width is more critical than max-width. In my opinion Jello & Progressive layouts are a good alternative in the endless debate between fixed, fluid and elastic, but perhaps they'll remain a good alternative in theory. Only time will say...
10. June 12, 2005 06:29 PM
11. July 25, 2005 08:57 PM
Rob Posted…
I tried to use the progressive script on a three column layout that I found over at Max Design's layout page - last link under Final Result called "Variation - wide left column with borders" (http://www.maxdesign.com.au/presentation/liquid/index.cfm). I put the page here with the script added: http://www.webguyscommunications.com/test-layout/test.html and found that the far right column wraps under the second column in IE 6 (ok in firefox). Any idea why it now does that and what might fix it?
12. December 21, 2005 06:13 AM
Anurag Tarar Posted…
Hi, It is indeed a very nice script but I just noticed a problem, in IE and FireFox the width of the container are not same at a particular resolution say 1024x800. There is difference of 11 pixel but if one removes the javascript and load the page the container is same width in both the browser. I am writing a template where I would be showing different header image based upon the user screen resolution. But since both the browsers are showing a different container width I am not able to determine the size of header image for different screen resolution.
Antonio Cavedoni Posted…
Go, Alessandro!