Page layout with variable number of columns

Stephen Poley wrote:
[color=blue]
> 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?
>[/color]

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:[color=blue]
> Stephen Poley wrote:
>[color=green]
>> 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?
>>[/color]
>
> 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
>[/color]
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:[color=blue]
> 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.[/color]

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.
[color=blue]
> 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.[/color]

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:-)
[color=blue]
> See http://www.xs4all.nl/~sbpoley/webmatters/layout6.html[/color]

Haven't done (too tired), but you got good feedback from others.
[color=blue]
> I'd be interested to know:
> 1) if you agree that the concept is useful;[/color]

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

--
Nick Kew

Nick Kew wrote:
[color=blue][color=green]
>> See http://www.xs4all.nl/~sbpoley/webmatters/layout6.html[/color]
>
>
> Haven't done (too tired), but you got good feedback from others.[/color]

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@asgard.webthing.com>
wrote:
[color=blue]
>Nick Kew wrote:
>[color=green][color=darkred]
>>> See http://www.xs4all.nl/~sbpoley/webmatters/layout6.html[/color]
>>
>>
>> Haven't done (too tired), but you got good feedback from others.[/color]
>
>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.[/color]

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.
[color=blue]
>(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.[/color]

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/