Web Page Width - To Restrict or Not to Restrict

[Broun, Kevin (NIH/NCI)]

OK, how about without tables?!

This is an issue I've been working with lately as well, particularly in the
context of trying to come up with model XHTML/CSS, table-free, layouts.
I've been a strong proponent of liquid layouts, to avoid the waste-of-screen
problem Aaron mentions, support various kinds of users, etc.  But it seems
that unlimited width causes many layouts to fall apart and text to display
in unreadably long lines.

CSS provides min-width and max-width to help with this, opening the
possibility of "limited liquidity" or whatever we might call it -- but this
is another notorious case where IE support is missing.  I came upon an
excellent hack that takes advantage of some non-standard IE functionality to
compensate for the lack of max-width support -- see
<http://www.svendtofte.com/code/max_width_in_ie/> for details.

So, with an adapted version of this, I've done some work on a model layout
-- see <http://broun.org/layouttest/>.  This is just a work in progress, but
I think it does a pretty good job in the "limited liquidity" area.  It's set
up to max at 900 pixels, but this can easily be changed and can also be
constructed in more complex ways, like em widths, to take account of the
current font size or whatever.  The layout works cross-platform and
cross-browser (tested so far on Windows IE, Firefox, Opera, NS 4.7 (which
purposely ignores the stylesheet); Mac Firefox, Safari), and even renders
pretty decently with stylesheets disabled, as markup is structured, e.g.
navigation renders as a bulleted list in the absence of CSS.

The markup is validated XHTML 1.0 Strict and is constructed to put as many
browsers as possible into "standards" mode.  The IE hack in the CSS causes
that one declaration not to validate, but the CSS standards, fortunately,
require browsers to be forgiving and so the browsers that don't understand
it should just ignore it and use the rest of the declared styles.  I'd be
very interested to hear comments and suggestions.

Thanks,
Kevin

Kevin Broun
Senior Web Developer
National Cancer Institute
kbroun at nih.gov

-----Original Message-----
From: Samuel Mcdonald [mailto:smcdon at rci.rutgers.edu] 
Sent: Thursday, March 17, 2005 3:58 PM
To: Multiple recipients of list
Subject: [WEB4LIB] Re: Web Page Width - To Restrict or Not to Restrict



Hi:

This sort of  discussion is often framed with the terms "liquid design"
(vs "ice"). Searching Google for "liquid design" returns many useful sites
for understanding how to do liquid design.

One of the more important issues is text width.
eg. see the quote:
"...
Conventional design wisdom has been to restrict the width of flowing text
to somewhere between 550 and 780 pixels wide, using tables to do this.
.."
  http://lois.co.uk/web/articles/page-widths.shtml


-Sam