Re: Columns and other layouts

[Mon, 28 Apr 2003 00:13:35 +0100] Ben Godfrey:
>If anyone here is a designer who has experienced situations where CSS 
>doesn't give them the expressiveness they feel they require, please 
>email me on- or off-list.

I have no "credentials" as a web designer... but I'd like to chime in, as
you are expressing something that has also bothered me for some time.

HTML + CSS is the language of the web.  The host of other acronyms aside,
that's what /works/, and that's how web pages /have/to/ be written if they
are addressed to a general audience.  But these languages fail to address
many basic web layout problems in a direct, simple and intuitive way.

To understand this, we need to remember "Coises' first law of web design":
     WYSIWYG HTML is an oxymoron.
Doing layout for a web page is not like doing layout for a Word document.
Most of the things you know when using a word processor --- type size,
page size, even the available fonts --- are unknowns on the web.  It's
critical to be able to define layout in terms of logical decisions, not in
terms of pre-calculated absolutes.  (One of the reasons we can't eradicate
the use of tables for layout, despite all the principled admonitions about
how wrong it is, is that they're practically the only truly /adaptive/
tool in the HTML/CSS arsenal.)  Designers want and need control, but /not/
at the pixel-engineer level CSS2 so readily provides.  We need control at
the /logical/ level... which means we need a new and more flexible model
for specifying how the parts of a page are combined for presentation.

Let me give a few examples.  In my humble opinion, all the following
represent rather elementary design decisions... which cannot be easily
(if at all) expressed using HTML 4.01 and CSS2.

1. If the centered title at the beginning of this page will fit on one
line, it should be shown on one line; if it requires two lines, the break
between lines should be such that the two parts are approximately equal
in horizontal measure.

2. The section headings on this page should be distinctly larger than the
paragraph text that follows them, but visibly smaller than the main page
heading.  They should all be the same size.  Within those constraints, the
section heading size should be chosen so that as many of the headings as
possible fit on a single line.

3. I have a graphic to be set left, with a couple paragraphs of text set
to the right.  There is a caption for the graphic.  If the caption will
fit at the right --- beneath the other text and not extending below the
bottom of the graphic --- it should be set right and aligned with the
bottom of the graphic; if it will not fit, it should be set /below/ the
graphic.  In no case should it be to the right yet extend below the
graphic, nor should it wrap with some of the caption to the right of the
graphic and some of the caption below it.   (That is, the caption should
be a solid "block" set either bottom-aligned to the right or centered
below the graphic.  The current entry page of my personal web site,
<>, illustrates this problem --- to which I found no
solution.  As the window is made more narrow, the caption stupidly remains
to the right of the picture but extends beyond its bottom edge, instead of
moving entirely /beneath/ the graphic, as I would have preferred.)

4. I have three classes of text to set on my web page:
     a. Running Text in Paragraphs: this should be of a size that is the
        best compromise between being large enough that the user can read
        it easily, and small enough to keep from making the user page down
        more than necessary.
     b. Section Titles: these should be clearly distinguishable from the
        running text, but not so large as to be jarring.  They should be
        convenient guides for the skimming reader to find the parts of the
        text that are most interesting.
     c. Legal and Technical Notices: these should be as small and
        unobtrusive as possible without being illegible.
What "font-size" should I specify for each class?

Since the definitions of "small" and "medium" and so on provide no real
semantics at all, it's impossible --- as far as I can see --- to connect
any size one can specify in CSS with a known subjective effect on the
reader; yet that is precisely what we need to do when designing a page.
Randall Joseph Fellmy aka

Received on Sunday, 27 April 2003 20:34:18 UTC