semi-liquid layout (was Re: [Web4lib] Nielsen's Top 10 - 2005 ver sion)

[Broun, Kevin (NIH/NCI)]

I agree with Erik that usability is definitely an issue with liquid layouts
on large screens, but if there's a choice, I'd prefer a liquid to non-liquid
layout, and let the user size the browser window as he/she finds
appropriate.

In trying to pursue a middle ground, I've been working with semi-liquid
layouts, where the content reflows with the window width to a certain
extent, but avoids falling apart in the case of a huge window width.  One
way to do this is to put the page content inside a "main" div and control
width in the stylesheet like this:

div#main {min-width: 650px; max-width: 900px; width:
expression(document.body.clientWidth > 900 ? "900px" : "auto");}

Standards-compliant browsers will respect the 650-900px range.  Since IE, at
least through version 6, ignores max-width, the "expression" code is a
kludge for IE to keep the content from spreading too wide (I didn't bother
with the minimum width for IE in this case).

Obviously, "huge" is in the eye of the beholder and you can set whatever
ranges you think are appropriate for your site.  With some more work, it
also could be done dynamically to let the user set the range as well,
possibly in response to, or in conjunction with, user-set font sizes or
other settings that may be helpful in improving accessibility while
maintaining your site design.

- Kevin

Kevin Broun
Senior Web Developer / NCI LION Team Lead
Office of Communications
National Cancer Institute
kbroun at nih.gov

-----Original Message-----
From: Erik Kraft [mailto:ekraft at uiuc.edu] 
Sent: Wednesday, October 19, 2005 1:54 PM
To: web4lib at webjunction.org
Subject: Re: [Web4lib] Nielsen's Top 10 - 2005 version

Most of the items on Nielsen's list are no-brainers, but I don't think 
frozen layouts and fixed page widths are a usability "mistake" at all. 
In fact, I think the reason you cite for using liquid layouts--that many 
entry-level machines now come standard with hi-res monitors--is an 
argument for, not against, fixed width layouts. There is now a huge 
disparity between the lowest possible resolution we have to design for 
(800 x 600) and the highest (2000 or more pixels wide). In most cases, I 
think liquid layouts that look great at 800x600 look awful on a super 
hi-res monitor, and vice-versa.

Of course the usability argument is that the user should be in control 
of the size of their browser window's content area, but I'm slightly 
dubious that the average user on a high-res monitors surfs the web with 
a less-than-maximized browser window. Readability is a huge part of 
usability, and this involves being able to reliably control white space 
and line lengths on pages. I don't think Nielsen gets this, at all. (Not 
that I wish to start a long debate about aspects of design that Nielsen 
doesn't get--that could preoccupy the list for a very long time indeed!)

I know there are pros and cons both ways, and that a good case can be 
made for liquid layouts, and that different kinds of pages call for 
different layouts, but to call a fixed width design an outright 
"mistake" gets my back up a bit.

Cheers,

Erik.