Web Design  »  Articoli  »  Web design 

I think that probably the debate on Fixed against liquid will never find a definitive word. But now perhaps there's another option: the Progressive Layout. In this article, that is a small extract from the Italian version, we'll see how to easily turn with Javascript a CSS-based layout (fixed or fluid doesn't matter) into a progressive one.

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.

You could easily see the width varying from the ruler on the footer by resizing your browser window. Now, let's see how the example would render with Javascript turned off: it's a classic fixed-width two column layout.

How does it work

If you see the code of the example and the version without Javascript you'll note that they share the same CSS, and mostly the same markup. The only difference is in one line in the markup, before the closure of the body tag:

</div>
<script type="text/Javascript" src="progLayout.js"></script>
</body>

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:

MakeLayout("container",540,850,1024);

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

You can view how the progressive version serves a better layout, that is suitable for every resolution instead of being fixed. This is done just by embedding a single Javascript file and setting up four parameters in it. That's the strenght of the script, that can transform almost every layout into a progressive one without changing the CSS. Now, let's see another example.

Altri articoli

Altre guide

Altre newsletter