Website Design Forum - Page layout with variable number of columns

Author

Page layout with variable number of columns

Stephen Poley

2006-02-28, 6:26 pm

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/

Chris Beall

2006-02-28, 6:26 pm

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

mbstevens

2006-02-28, 6:26 pm

Chris Beall wrote:
> Stephen Poley wrote:
>
>
> 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

Nick Kew

2006-02-28, 10:18 pm

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

2006-03-01, 8:01 pm

Nick Kew wrote:

>
>
> 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

Stephen Poley

2006-03-01, 8:01 pm

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

>Nick Kew wrote:
>
>
>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/