Progressive 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.
Let's see the first example. It's a two column layout which is:
- fixed (540px) below 540px of client width;
- fluid between 540px and 1024px;
- fixed (850px) over 1024px of client width.
How does it work
You could view the source of the script here. It's a very short script, that runs when the HTML of the page has been loaded, but before the page is fully displayed, that triggers the width of the main wrapper of the layout according to the client width. This is done also everytime the browser window is resized. To customize the script, you just have to change the fist line of it:
The four paramaters, separated by a comma, indicate in order:
- Id of the global container of the layout
- Min width of the layout
- Max width of the layout and..
- .. client width when the max width will be reached
Second Example: a progressive three columns layout
The script also in this case is included before the closure of the body tag. Respect the first example, in the script has been changed the first line. The parameters of the function, as is the first line of the script, are:
This in order to get a progressive layout with the div with id "container" that has a minimum width of 640px and a maximum width of 1024px, reached at client widths starting from 1280px. To help you understand how does the script works, I've prepared a small graph that shows how layout width and total margins vary in function of the client width:
The differences between the progressive layout and the version without js are remarkable: the enhanced version doesn't break at low resolutions, has the margins optimized according to client width and preserves a maximum width at really high resolutions.
Credits, Conclusion and download
Ideas often grow out of other ideas. Progressive layout has two main sources of inspiration: Resolution Dependent Layout by Cameron Adams, a very clever way to serve central content depending on the browser width, and Jello: a different liquid layout by Mike Purvis, a very nifty solution and probably the (nearly) first progressive layout on the web, entirely developed with CSS.
Color palette of the examples is borrowed mainly from one of the design I like most: Bartelme Design, an impressive website in its simplicity.
You can download sources and examples here. Enjoy!
Other articles in english by the author are Nifty Corners, More Nifty Corners and STR: SwishMAX Text Replacement.