Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Great liquid design example

I’ve started browsing the web at 1600x1200, because I have a nice big monitor and a tendency to browse with my font size set to large. At this resolution you really begin to appreciate the argument put forward by fixed-width site design advocates that liquid designs can end up plain unreadable on some setups. I could just reduce the size of my browser window, but I’m lazy. Instead I’ll point out that the Rocky Mountain Harley-Davidson dealership is a liquid site that manages to look great even at ludicrously high resolutions. It’s got some very decent CSS and structural markup under the hood as well.

Posted 28th August 2003 at 5 am

This is Great liquid design example by Simon Willison, posted on 28th August 2003.

View blog reactions

Next: HTML: More structural than semantic

Previous: Banning Google Comments

7 comments

  1. While this may be a decent example of a liquid design, I think it's simply a design tradeoff. This site works better at high resolutions than it does at low res. At 800px wide, the left sidebar wraps the text way too often, and the sidebar ends up being gigantic long (often three times longer than the rest of the page). Also, other text wrapping causes poor results with the images. For example, under the coming events, in the Customer appreciation party, I see:

    Join us,

    Saturday

    Then a big gap, and at the bottom of the image is "September 6 from 4:00PM..."

    Hard to read, but looks fine at 1024, or 1280.

    Wayne - 28th August 2003 06:27 - #

  2. I've taken to adding onLoad and onSize event handlers to my document bodies to adjust the font sizes so that my text is readable in any size browser window. When I find time, I'll have to get it to adjust margins and things too.

    Rich - 28th August 2003 10:22 - #

  3. on*Re*size, I meant!

    Rich - 28th August 2003 10:24 - #

  4. I note that I use browser windows very differently on my big screen at work and small screen at home; on the smaller 1024 x 768 screen I always maximise, and using tabs on Mozilla enables me to keep several on the go at the same time, but where I have the luxury of space (currently dual display at 2560 x 1024 I think...) I'll park variously sized windows all over the place. In fact I reckon that on average I use bigger windows on the smaller screen.

    Elliot - 28th August 2003 16:05 - #

  5. Are you moving or already living in Denver?

    Chester - 28th August 2003 17:42 - #

  6. Simon: Thanks for the kudos, it's much appreciated. It's also good to know that the site looks good at that crazy high resolution. I had no idea people actually surfed like that ... always thought it was a bug in my server logs :)

    Wayne: You're right, the site does look better at higher resolutions. On any given day we get about 75%-80% with 1024x800 or higher resolution, and the remaining 20%-25% are almost all using 800x600 resolution. At 800px the site looks OK (minus the few issues you mentioned), so I figured it was a worthwhile tradeoff. The sidebar is usually not as long as it is now ... we just have a lot of things going on this month.

    Chester: I already live in Denver.

    Nathan Wright - 29th August 2003 16:52 - #

  7. Rich: This laptop (work) almost died when I resized the window while viewing your site. It honestly froze for a good 10 seconds. The Adobe site does something similar but reloaded on resize which played havok with my browser. I had the tabs shrink when they finished resizing which would trigger the javascript and an infinite loop. Needless to say I don't go to the Adobe site anymore.

    Hemebond - 17th November 2003 04:40 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/08/28/greatLiquidDesign

A django site