Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at the ColdFusion Centaur And Bolt User Group Tour (Jun. 2009) with:

Newspapers Can't Use Liquid Layouts... But Is It Good For The Web?

By Ben Nadel on

I've been seeing a lot of Liquid Page Layouts popping up lately. I have to say, I just don't get it. Maybe people just aren't doing it right, but it rarely makes my viewing experience any better. Point of fact, most of the time, I find a liquid page harder to read. Think about newspapers for a second. Do you ever see a newspaper have full-page (horizontal) columns? Never, not once. There's a reason for that: it's hard to handle the line breaks when you have to move your head/eyes back and forth so much. If you disagree with me, you disagree, but I think that's a widely accepted fact.

So what is it that makes people think this is so right for the web? Yeah, we all have different sized monitors, but so what? I have a luxurious 1280 x 1024 monitor, but that doesn't mean I want to read across 1280 pixels of text. Maybe it's because we are programmers, not designers. Maybe we just don't understand user interfaces? I don't know. All I can say is that from PERSONAL EXPERIENCE, viewing a 800 x 600 site on a 1280 x 1024 monitor is MUCH nicer than viewing a 1280 x 1024 site on a 1280 x 1024 monitor.

Of course, there are always exceptions to this. Some sites do this very well. Most sites do not.



Reader Comments

In my opinion, the benefit of the liquid layout is that on that bigger monitor, you are able to resize the window to whatever it is that you prefer. With the fixed width, if I wanted the columns a little wider I would have no options..

my 2 cents..

Reply to this Comment

Mateo,

Point well taken. But, it still comes down to the ability to design. I think most sites are not designed well to function in a liquid fashion.

Reply to this Comment

I personally am not a big fan of liquid layouts. That said I do think liquid design elements can be well applied, examples being header and foot regions of a page. But this debate of designing for multiple screen sizes is about to get a 3rd dimension. Resolution Independence is coming ( http://www.appleinsider.com/article.php?id=2168 ) and it will mean that we have to worry about screen DPIs as well as resolution area.

Reply to this Comment

Ryan,

Interesting. But the question then becomes, is resolution-independent rendering the design responsibility of the web developer? Or is it the display responsibility of the browser? I almost feel that it should be the browser's responsibility to scale web sites appropriately.

Very interesting indeed.

Reply to this Comment

Perhaps the responsibilty is shared. The browser can easly render non raster elements mathematically and leave no distortion. What about sites that contain 72dpi images or graphics on a 100dpi or greater display? Although i'm not sure what will end up happening I am certain it will be very interesting.

Reply to this Comment

I'm waiting for the dude in the corner to be like "Umm, excute me... Flash / Flex scales quite naturally."

Reply to this Comment

For me liquid layouts are another tool in the tool box. I always ask the designer how they want their design to look on different size moniters. Which things should expand, which shouldn't.

Often some sort of "jello layout" is needed where the design expands, but perhaps to some sort of limit.

Reply to this Comment

Steve, I agree, another tool in the tool belt is always a good thing. Just as long as it's done well.

Reply to this Comment

I like sites which let you choose. E.g., default to a 1024x768 design, and let you switch to liquid using nothing more than JS/CSS.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.