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 cf.Objective() 2011 (Minneapolis, MN) 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..

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.

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.

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.

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.

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.