Page layout with variable number of columns

There are plenty of people around these groups who promote the idea of
flexible page design.

However, while employing relative units and not fixing column-widths is
a big improvement on fixed-pixel layouts, it isn't really enough IMHO.
In principle the user can indeed set his window-size to what he wants,
and sites will then adjust to that. The adjustment will however not be
optimal for all sites. The problem becomes evident if one traverses a
number of (flexible) sites, some written with a single-column layout,
some with two columns, some with more than two columns. The
single-column layout is more readable in a narrow window, while the
multi-column layout is more readable in, and makes better use of, a wide
window. Yes, one can keep adjusting the window size (to the extent that
the screen permits) but somehow it doesn't seem quite satisfactory.

With that in mind I have produced an experimental layout which adjusts
the number of columns to the width of the window (measured in ems, of
course, not pixels). The layouts are HTML/CSS, with a small amount of
Javascript for swapping CSS classes.

See http://www.xs4all.nl/~sbpoley/webmatters/layout6.html

I'd be interested to know:
1) if you agree that the concept is useful;
2) whether my implementation works satisfactorily. Are there
circumstances that I haven't considered, where it breaks?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Stephen Poley wrote:

There are plenty of people around these groups who promote the idea of
flexible page design.

However, while employing relative units and not fixing column-widths is
a big improvement on fixed-pixel layouts, it isn't really enough IMHO.
In principle the user can indeed set his window-size to what he wants,
and sites will then adjust to that. The adjustment will however not be
optimal for all sites. The problem becomes evident if one traverses a
number of (flexible) sites, some written with a single-column layout,
some with two columns, some with more than two columns. The
single-column layout is more readable in a narrow window, while the
multi-column layout is more readable in, and makes better use of, a wide
window. Yes, one can keep adjusting the window size (to the extent that
the screen permits) but somehow it doesn't seem quite satisfactory.

With that in mind I have produced an experimental layout which adjusts
the number of columns to the width of the window (measured in ems, of
course, not pixels). The layouts are HTML/CSS, with a small amount of
Javascript for swapping CSS classes.

See http://www.xs4all.nl/~sbpoley/webmatters/layout6.html

I'd be interested to know:
1) if you agree that the concept is useful;
2) whether my implementation works satisfactorily. Are there
circumstances that I haven't considered, where it breaks?

Stephen,

Windows 98, 600 X 800 desktop.

Works for me on IE 6, Opera 8.52 (with the exception you document), and
Netscape 7.1. Two caveats:
- JavaScript must be enabled.
- After changing text size or window width, the page must be reloaded
to recalculate the proper number of columns. Since users don't
typically muck with these things (unless forced) I don't see this as a
problem.

Seems kinda handy to me.

Chris Beall

Chris Beall wrote:

Stephen Poley wrote:

There are plenty of people around these groups who promote the idea of
flexible page design.
However, while employing relative units and not fixing column-widths is
a big improvement on fixed-pixel layouts, it isn't really enough IMHO.
In principle the user can indeed set his window-size to what he wants,
and sites will then adjust to that. The adjustment will however not be
optimal for all sites. The problem becomes evident if one traverses a
number of (flexible) sites, some written with a single-column layout,
some with two columns, some with more than two columns. The
single-column layout is more readable in a narrow window, while the
multi-column layout is more readable in, and makes better use of, a wide
window. Yes, one can keep adjusting the window size (to the extent that
the screen permits) but somehow it doesn't seem quite satisfactory.

With that in mind I have produced an experimental layout which adjusts
the number of columns to the width of the window (measured in ems, of
course, not pixels). The layouts are HTML/CSS, with a small amount of
Javascript for swapping CSS classes.

See http://www.xs4all.nl/~sbpoley/webmatters/layout6.html

I'd be interested to know:
1) if you agree that the concept is useful;
2) whether my implementation works satisfactorily. Are there
circumstances that I haven't considered, where it breaks?


Stephen,

Windows 98, 600 X 800 desktop.

Works for me on IE 6, Opera 8.52 (with the exception you document), and
Netscape 7.1. Two caveats:
- JavaScript must be enabled.
- After changing text size or window width, the page must be reloaded
to recalculate the proper number of columns. Since users don't
typically muck with these things (unless forced) I don't see this as a
problem.

Seems kinda handy to me.

Chris Beall

Yes. Works fine in Fox 1.0.7.

As long as you set up the page to degrade gracefully it seems
good to me.

mbstevens

Stephen Poley wrote:

There are plenty of people around these groups who promote the idea of
flexible page design.

However, while employing relative units and not fixing column-widths is
a big improvement on fixed-pixel layouts, it isn't really enough IMHO.
In principle the user can indeed set his window-size to what he wants,
and sites will then adjust to that. The adjustment will however not be
optimal for all sites. The problem becomes evident if one traverses a
number of (flexible) sites, some written with a single-column layout,
some with two columns, some with more than two columns. The
single-column layout is more readable in a narrow window, while the
multi-column layout is more readable in, and makes better use of, a wide
window. Yes, one can keep adjusting the window size (to the extent that
the screen permits) but somehow it doesn't seem quite satisfactory.

Agreed in part. That is to say, I agree with what you're saying
in practical terms. The solution is - or should be - better browsers,
together with CSS properties on block elements that suggest minimum
and maximum widths - and subject to both user and author prefs.

With that in mind I have produced an experimental layout which adjusts
the number of columns to the width of the window (measured in ems, of
course, not pixels). The layouts are HTML/CSS, with a small amount of
Javascript for swapping CSS classes.

That sounds like a great demo of concept. But it should be a simpler
job: in particular, all that you do in javascript should be built in
to the browsers. Many browsers accept patches:-)

See http://www.xs4all.nl/~sbpoley/webmatters/layout6.html

Haven't done (too tired), but you got good feedback from others.

I'd be interested to know:
1) if you agree that the concept is useful;

Yes, but of very limited use when it's tied to a site.

--
Nick Kew

Nick Kew wrote:

See http://www.xs4all.nl/~sbpoley/webmatters/layout6.html


Haven't done (too tired), but you got good feedback from others.

I just looked. My results are:

(1) Konq and Firefox both show "section 1" and "section 2"
in a column on the left, and the rest of the page to the right
of it. Resizing the browser makes no difference - even when
that layout falls apart.
(2) Opera gives "section 1" and "section 2" the entire browser
width. Again, no change on resizing it. And that's with smaller
text - and hence more ems - than the other two, so logically there
should presumably have been more columns.

So, I fear your demo may want a bit more work.

--
Nick Kew

On Wed, 01 Mar 2006 17:49:55 +0000, Nick Kew <nick (AT) asgard (DOT) webthing.com>
wrote:

Nick Kew wrote:

See http://www.xs4all.nl/~sbpoley/webmatters/layout6.html


Haven't done (too tired), but you got good feedback from others.

I just looked. My results are:

(1) Konq and Firefox both show "section 1" and "section 2"
in a column on the left, and the rest of the page to the right
of it. Resizing the browser makes no difference - even when
that layout falls apart.

Not sure if we're at cross-purposes here: the layout adjustment is only
done at initial load. The idea is to help users who prefer not to resize
their windows (often) and give them a layout suitable for whatever size
they happen to have. If you resize, it will only recalculate after a
reload (and if Javascript is enabled).

I suppose I could change it so that it automatically redoes the layout
if the window is resized, but I feel that could be rather disconcerting
to the reader.

(2) Opera gives "section 1" and "section 2" the entire browser
width. Again, no change on resizing it. And that's with smaller
text - and hence more ems - than the other two, so logically there
should presumably have been more columns.

Is it possible that you've got the text size set quite large but the
zoom set to a small setting? That's the one situation I found where the
recalculation doesn't work as expected (and which I mention in the
text.)

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/