Web page liquidation

22 December 2003


A Blue Perspective: Web page liquidation

» True liquid web page example «

After reading the explosion in debate over fixed-width versus "liquid" web pages in the web design community of late ( -1- | -2- | -3- | -4- | -5- ) one thing came to the fore: the main reasoning against pages that expand with browser size – style preferences aside – was the difficulty in reading overly long lines (however, I think that some designers simply use this as a justification for the other benefits you receive from a fixed-width design; namely, control and ease-of-design).

Liquid-fixed solutions such as Patrick Griffith's CSS Zen Garden entry don't seem quite complete to me, as the size of the page only scales with text size, not on browser width – as a traditional liquid site does. Therefore, I set out to code an example of a liquid page that retains a readable line length.

The page – a simple two-column example – scales font size dependent upon the browser window width. Because all page measurements are specified in relative units (ems) this also means that the size of the page itself scales. Font size (and hence page size) can also be changed by using the text size links.

The browser scaling feature is achieved using some simple javascript that retrieves the width of the browser, divides that by the optimal line length (35 ems, as suggested by Russ Weakley), then scales the text size appropriately. In this two-column version the main column keeps a 35em width, with all other elements adding on top of that to create the total page width – somewhere around 47em. Also in effect is a minimum font size, so the text doesn't become unreadably small in small windows (though this will bring up a horiztonal scrollbar). Currently I've set this minimum to a rather small size in order to exaggerate the page scaling in small windows.

Because the browser width must be obtained in pixels ultimately the font must be sized in pixels, therefore the line length is only really an approximation of 35ems, based upon the ratio between pixel font size and em based element widths. I'm not sure of all the calculations involved here, but it looks correct, and if any weighting factor is required, it would be easy enough to insert.

With a page that scales to fill the browser window, yet retains a fixed line length there's no longer any excuse to use a fixed-width page for line length only! However, I get the feeling that this solution won't reduce the number of fixed-width pages, as for the most part they seem to be a method of control rather than an exercise in readability.

(Note: The page has been tested in IE6, NN7, Opera 7; there's a few bugs such as <h1> not scaling in IE but hey, it's just an experiment)


, , ,


  1. 1/15

    Ben Vaughan commented on 23 December 2003 @ 03:08

    That is one of the coolest things I've seen in a while.

    Way to go!

  2. 2/15

    ic commented on 23 December 2003 @ 12:58

    Fixed lenght lines *are* easier and more pleasing to read.
    Your solution is interesting, but I don't think it will be adopted: there are two factors for pleasureable reading: line lenght and preffered text size.
    Here it gets too small or too big...

  3. 3/15

    Keith commented on 23 December 2003 @ 15:17

    Wow. Pretty impressive. Nice work.

  4. 4/15

    andrew commented on 24 December 2003 @ 11:35

    Works good in Safari 1.0

  5. 5/15

    Matt Burris commented on 24 December 2003 @ 11:46

    Here's my thoughts on fixed and liquid: I think it should be based purely on the amount of information the webpage will have. For news sites, which are updated daily, a liquid layout would be ideal. This allows the user to stretch the browser and have as much information on the screen without scrolling. I especially love doing this when I want to sit back, drink some coffee, and eat some food while I read.

    Fixed layouts, for me, work best for sites that won't present a lot of information, and want to maximize whitespace as much as possible. Fixed are also great to showcase a design, allowing a greater degree of control. They both server their purposes, and I believe should both be utilized based on the kind of website that will be created.

  6. 6/15

    Idsert commented on 24 December 2003 @ 14:07

    I agree with Math Burris and therefore would like to present another issue, as showcased by http://www.tribu.com.au/fanciulla/season.htm which suffers [in IE6sp1] from the "F-O-U-C"-syndrome (flash of unstyled content).

    Being new to CSS-based design I have not yet my mind up but which way to go (liquid or box) but I did learn that some 'hacks' are definitely worth the effort!

  7. 7/15

    Douglas Bowman commented on 24 December 2003 @ 16:12

    Nice demo Cameron. It's funny to see this kind of stuff come 'round full circle. Jeff Veen (http://www.veen.com/jeff/) was playing with this exact same model over 3 years ago at Wired when he was trying to convince me to get more into CSS. Same reasoning: controlling line-length by sizing text based on window size. At the time, I wrote it off as useless hocus-pocus. I wanted more control over text size then. Foolish me.

    Now, this technique seems a lot more useful. Just wish there was an easy way to pull it off that didn't require scripting.

  8. 8/15

    Jeremy Garside commented on 24 December 2003 @ 21:54

    Like the concept, froze IE6 on XP - seen a similar effect/problem like this in IE6 and I think it was a javascript issue... wish I could offer more technical details but JS and I don't get along!

    Like your main suite, by the way, quality design ;>)

  9. 9/15

    mazzz commented on 25 December 2003 @ 17:08

    Just a thought, wouldn't it make more sense to be resizing margins than content?

    Love the design.

  10. 10/15

    Stephane commented on 26 December 2003 @ 05:50

    Although I think it's the best approach I've seen so far, I guess that with a big screen (1600px) the font size becomes rather large, probably too large to read comfortably.

    There will always be problems with font size because you can get the same resolution on a relatively small laptop screen or a gigantic CRT screen, a font size that look great on one screen relative to it's pixel size might not work on another screen.

    Let's just accept that, unfortunately, not everybody will see the web perfectly.

  11. 11/15

    The Man in Blue commented on 26 December 2003 @ 22:16

    Yes, it's the truth: not everyone will see a web site in the same way.

    The exercise, then, is to limit the disparities between the different views that are offered to different people; we would like that difference to be zero, but that doesn't happen outside of a paperback.

    This method offers ONE WAY of providing a more uniform experience for all users, but it is only one of many methods. It would be good for some situations, not so for others.

    So, as per usual, its all a matter of choosing the right tool. Hopefully, this tool might help someone out in the future and be the right one for their situation.

  12. 12/15

    Taylor commented on 28 December 2003 @ 11:20

    Crashes on my IE6 + XP as well, but works on my IE5.5 (gotta love having all those versions on one machine!) Overall, very, very cool.

    Hope you had a great holiday Mr. Blue :)

  13. 13/15

    chuck commented on 8 April 2004 @ 03:26

    I have been looking for a good liquid template. I like the way you have your site layed out. Are you willing to share it? I will totally change the graphics to suit my needs.

  14. 14/15

    mattymcg commented on 25 June 2004 @ 21:32

    I've come in a bit late, via Design By Fire. Great trick Cameron. Chuck Cameron's site isn't a liquid layout, the example is. I would suggest starting with the tutorials at http://www.w3schools.com and playing with the templates at http://www.glish.com and start trying to understand CSS layouts - they can be a bit tricky but aren't really that hard when you play for a while. Then when you make a small change and everything looks whack, you'll understand how to fix it rather than get frustrated and feel clueless. It takes a bit more time but is infinitely more rewarding, trust me.

  15. 15/15

    simon commented on 16 December 2004 @ 20:42

    Pretty cool....but shame it is javascript driven. It's great for all javascript enabled visual browsers, for those with non java browsers, sreen readers, screen magnifiers, text only browsers, and emerging technology it could be a problem.
    Is there any way to achieve a similar liquid layout that scales and stretches without the javascript?
    I also still find it strange that in todays market people are debating how to generate a uniform layout and design across all browsers and technologies...sorry guys, but in web the user decides...so lets make all our designs well strcutured and fleixible so users can choose how they want to see and read things. The choice is not ours any more...it's theirs.

  16. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed