E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: fixed width or resizable pages

Number of posts in this thread: 18 (In chronological order)

From: Burrow, Martin
Date: Tue, Nov 09 2004 7:50AM
Subject: fixed width or resizable pages
No previous message | Next message →

Message

Hello, does anyone
have any strong views / advice on which is preferable?

Are there any good
reasons to stick with a fixed width template?

Thanks

Martin

From: Iain Harrison
Date: Tue, Nov 09 2004 8:07AM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

Tuesday, November 9, 2004, 2:53:06 PM, martin.burrow wrote:

> Hello, does anyone have any strong views / advice on which is preferable?

If you are making a web page accessible, you have to give the user
control over font size and line length. To me, that means that you
have to use a resizable page design.

> Are there any good reasons to stick with a fixed width template?

Oh, yes. It is vastly easier to do, gives you much more control over
the layout, and allows you to impose your will on the user, not the
other way round.

.... and it prevents users choosing a tiny font in a huge window,
rendering your design horrible and unreadable. But if that's what
the user wants to do, that's not your problem.

OK, they're reasons, but maybe not /good/ reasons!

--

Iain

From: reply-to:to:subject:in-reply-to:mime-version:content-type:content-transfer-encoding:references;
Date: Tue, Nov 09 2004 8:19AM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

> Are there any good reasons to stick with a fixed width template?
>

Total control of your layout is one of the reasons some people use
centered fixed-width layouts. It allows you to be exact with your
background images and therefore often allows more creativity in the
design.

If there's going to be lots and lots of text on the site, then the
extreme widths at high resolutions spread the text out in an ugly,
hard to read manner. makes it necessary to have text in div or page
with fixed width.

Audience - if you have a fixed audience with specific needs, or
pre-determined settings, you can design for them specifically with
your size. If their "build" ever changes, you can change all through
the style sheets to match their settings.

--
Susan R. Grossman
= EMAIL ADDRESS REMOVED =

From: Austin, Darrel
Date: Tue, Nov 09 2004 8:35AM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

> Hello, does anyone have any strong views / advice on which is preferable?

Of course. Is there a right answer? No, not really.

> Are there any good reasons to stick with a fixed width template?

Off the top of my head, the reasons TO go with fixed-width would be:

- some control over text line-lengths
- some better control over overall page layout
- can make design/develompent a bit less work

Whether these pros outweigh the benefits of a flexible-width layout is
another question and is dependant on the particulars of the specific site.

-Darrel

From: julian.rickards
Date: Tue, Nov 09 2004 9:22AM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

Message

My
personal opinion is that as long as the user can resize the font for readability
purposes, I think that fixed width is fine (just don't use fixed height).
Secondly, if a user disables CSS and the layout uses only CSS (tabular data
in a table being the exception), then any layout method is moot (fixed, liquid,
fluid).

Jules
-----------------------------------------------
Julian Rickards A/Digital Publications Distribution
Coordinator Publication Services
Section, Ministry of Northern
Development and Mines, Vox:
705-670-5608 / Fax: 705-670-5960

From: Jens Meiert
Date: Tue, Nov 09 2004 10:44AM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

(Apologies that I didn't track the entire discussion, and that I didn't find
any discussion archive entries so quickly, either.)

> Hello, does anyone have any strong views / advice on which is
> preferable?

Basically: a fixed layout only works on a certain size monitor (see Jakob
Nielsen (1999) [1]).

The main advantage of a liquid layout is that you can display more content
"above the fold" -- and thus you have more space to convince your audience
that you've really got something to offer.

You also automatically take lower resolutions into account which is just
fine -- there ain't many people travelling around with 640x480 resolutions,
but those will be also rather accommodated, too (I assume that you'll
"optimize" for 800x600 otherwise).

> Are there any good reasons to stick with a fixed width template?

There are studies claiming that it's better (more readable) to use only x
words per line (which varies, younger people tend to prefer shorter line
lengths, as there are other tradeoffs to consider [2]). Thus you'll more
likely excess any such threshold with a liquid layout.

-- From my experience it's definitely recommendable to use a liquid layout
if you take those legibility issues, among others, into consideration (e.g.,
by using a popular three column layout which naturally reduces the available
content width and which decreases problems with line lengths).

My two cents (Euro),
Jens.

[1] http://www.useit.com/alertbox/990613.html
[2] http://psychology.wichita.edu/optimalweb/text.htm

--
Jens Meiert
Interface Architect (IxD)

http://meiert.com/

From: Austin, Darrel
Date: Tue, Nov 09 2004 11:02AM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

> Basically: a fixed layout only works on a certain size monitor (see
> Jakob Nielsen (1999) [1]).

More specifically:

A fixed width layout only works (properly) in a browser viewport that is at
least as wide as the fixed width.

One of the misconceptions of folks that immediately jump to the fixed width
solution is that there is some sort of correlation between web page 'size'
and monitor resolution. For the most part, there isn't.

> You also automatically take lower resolutions into account which is
> just fine -- there ain't many people travelling around with 640x480
> resolutions, but those will be also rather accommodated, too (I
> assume that you'll "optimize" for 800x600 otherwise).

Again, throw out the whole concept of screen resolution. It's irrelevant.

(even if it was, don't forget that more and more folks are using web
browsing devices that are much SMALLER than 640x480...PDAs, Cellphones,
etc.)

> There are studies claiming that it's better (more readable) to use
> only x words per line (which varies, younger people tend to prefer
> shorter line lengths, as there are other tradeoffs to consider [2]).
> Thus you'll more likely excess any such threshold with a liquid
> layout.

Though note that if 'x' = a specific number, a fixed width will do nothing
to obtain that, as a simple changing of text size will completely change
that variable.

None of this was meant to argue your post...merely expanding upon it.

-Darrel

From: Jens Meiert
Date: Tue, Nov 09 2004 11:36AM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

Nice thread, so let's just add some detail ;)

> > Basically: a fixed layout only works on a certain size monitor
> > (see Jakob Nielsen (1999) [1]).
>
> A fixed width layout only works (properly) in a browser viewport
> that is at least as wide as the fixed width.

Not really -- if the viewport is wider, then you're about to waste valuable
space you could and /should/ use to show what you've got. I define this as
/not/ working properly, and thus I tend to defend the former argument.

> Again, throw out the whole concept of screen resolution. It's
> irrelevant.
>
> (even if it was, don't forget that more and more folks are using
> web browsing devices that are much SMALLER than 640x480...PDAs,
> Cellphones, etc.)

This doesn't matter since CSS allows you to support different media and
devices (and you ideally use CSS). So let's say you code for "screen"
(media), which allows you to take into account screen resolutions starting
at, say, 640x480 pixels.

> Though note that if 'x' = a specific number, a fixed width
> will do nothing to obtain that, as a simple changing of text
> size will completely change that variable.

Of course, but it nonetheless /makes/ a difference. Using a fixed layout you
see, say, ten words per line and then enlarge the font that there are only
eight words per line -- doing this using a liquid layout where one line uses
the entire monitor width you'll see 40 words a line then decreasing the line
length to 32 words (still too much).

(Hope this example illustrates what I meant before ;)

All the best,
Jens.

--
Jens Meiert
Interface Architect (IxD)

http://meiert.com/

From: Austin, Darrel
Date: Tue, Nov 09 2004 12:03PM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

> Not really -- if the viewport is wider, then you're about to waste
> valuable space you could and /should/ use to show what you've got.

Well, that's subjective opinion. Some folks consider 'white space' a good
thing. I think it just depends on the particulars of the site. I usually
just let the page go as wide as the viewport and let people make up their
own minds, but I can seem some validity in the arguments to control extreme
widths.

> This doesn't matter since CSS allows you to support different media
> and devices (and you ideally use CSS).

CSS allows it, but we need to wait for the browsers to support it. ;o)

> Of course, but it nonetheless /makes/ a difference. Using a fixed
> layout you see, say, ten words per line and then enlarge the font
> that there are only eight words per line -- doing this using a liquid
> layout where one line uses the entire monitor width you'll see 40
> words a line then decreasing the line length to 32 words (still too
> much).
>
> (Hope this example illustrates what I meant before ;)

Oh...I completely agree. I disagree with experts claiming that there's an
exact 'sweet spot' in terms of line length. It varies. Extremes on both ends
can be troublesome...but few people read novels online anyways. In the end,
though, I find that people can make their own decision as to how they want
to read the page.

In otherwords, I find the line-length argument one worthy of some
discussion, but not really a viable argument, on its own, for fixed width
layouts. IMHO, of course. ;o)

-Darrel

From: julian.rickards
Date: Tue, Nov 09 2004 12:21PM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

What about an elastic layout whereby body {width: 50ems;} (as an example)
whereby the 10 words/line would not change as the text size is changed?

Jules

From: Austin, Darrel
Date: Tue, Nov 09 2004 12:40PM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

> What about an elastic layout whereby body {width: 50ems;} (as an
> example) whereby the 10 words/line would not change as the text size
> is changed?

It's valid *if* you could ensure that a person's prefered text size would
correlate to the available width of their browser view-port.

Which is hard to do.

-Darrel

From: julian.rickards
Date: Tue, Nov 09 2004 12:49PM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

Brain shut down: too many variables!!!

Hmm, not easy is it. Fixed must accomodate both large and small view ports,
liquid can create line lengths too long (according to readability studies),
elastic can allow a reader to increase font size whereby the width of the
content is wider than the width of the viewport.

JavaScript could be used to "answer" some of these questions but of course,
JS must be enabled.

Jules

From: Christian Heilmann
Date: Tue, Nov 09 2004 1:02PM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

julian.rickards wrote:

>Brain shut down: too many variables!!!
>
>Hmm, not easy is it. Fixed must accomodate both large and small view ports,
>liquid can create line lengths too long (according to readability studies),
>elastic can allow a reader to increase font size whereby the width of the
>content is wider than the width of the viewport.
>
>JavaScript could be used to "answer" some of these questions but of course,
>JS must be enabled.
>
>
For the redesign of all my pages I am using a liquid approach with EM
columns on the left and right and an extra widget to set the width to a
percentage if the user needs that.
http://www.icant.co.uk/forreview/site/

The argument that text lines become too long to read is rather bogus in
my opinion, as you can always resize the browser window. Fixing the size
(even to an EM value) is something you cannot change though and you
might have to scroll horizontally.

My .02

Chris

From: michael.brockington
Date: Wed, Nov 10 2004 4:57AM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

From: Laura Carlson
Date: Wed, Nov 10 2004 6:58AM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

Something to take into consideration is that liquid design and relative
sizing help support device independence. A key to accessibility is to
design for device independence, so that pages work on any device which
supports the openly published standards (not just desktop computer
monitors running GUI browsers). For web content to be device
independent, it should be possible for a user to obtain a functional
presentation associated with its web page identifier via any user
agent. As Darrel mentioned with the growth of PDAs, cell phones, etc.
having accessible content is becoming more and more important.

CSS 2 allows for a max-width setting but at the same time we must
realize that some users think breaking a line at any length shorter
than their browser window width is a waste of space. With paper a
designer has to pick one fixed line length to inflict on everyone. On
the web a designer has greater flexibility. One philosophy is if a
designer is not going to use the web's inherent flexibility, why not
use PDF instead of HTML?

With that said though, in CSS 2 you can specify max-widths in CSS for
blocks of text...that way, the line length won't exceed whatever you
specify...say in percent or ems (to support relative sizing). Example:

#content { max-width: 400em; }

You can also add min-width, max-height, min-height. IE/win doesn't
understand this, but there are JavaScript work arounds to get it to
play nice. For more info visit: Minimum and maximum widths. [1]

As for desktop computer monitors running GUI browsers...in "Optimal
Line Length" [2] Bob Bailey, Ph.D., Chief Scientist for HFI, discusses
the optimal line length when reading prose text from a monitor. He says:

"Users tend to read faster if the line lengths are longer (up to 10
inches). If the line lengths are too short (2.5 inches or less) it may
impede rapid reading. Finally, users tend to prefer lines that are
moderately long (4 to 5 inches)."

With the browser stats that are cited at W3schools, it would be more
relevant to see the widths of the browser windows for users of your own
local site rather than the screen resolution of a global audience. I
have a 1280 x 1024 monitor resolution but my browser window is
typically 800 wide and about 950 tall. I do however feel that designing
for 800 x 600 is not a bad thing but I will usually make my pages with
relative sizing and use up the full width of the browser window. I
think that if someone out there has their browser set to 1280 x 1024,
almost every site they see will have very long lines of text and that
must be what the user is used to and/or prefers. And as Chris and Iain
said a person can always resize the browser window to change line
length.

Let us not forget those users with vision impairments. If we make our
pages fixed at say 800 wide and an individual with a large screen comes
to our page and has the font size bumped way up, they will be stuck
with only a couple of words per line all over to the left of their
screen because we deemed they did not need to use the right half.

For more info visit:

Device Independence
http://www.d.umn.edu/goto/accessibility#device

Line Length
http://www.d.umn.edu/goto/usability#linelength

Liquid Design
http://www.d.umn.edu/goto/usability#liquid

Relative sizing
http://www.d.umn.edu/goto/accessibility#relative

My 2 cents,

Laura

[1] http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths

___________________________________________
Laura L. Carlson
Information Technology Systems and Services
University of Minnesota Duluth
Duluth, MN, U.S.A. 55812-3009
http://www.d.umn.edu/goto/webdesign/

From: Austin, Darrel
Date: Wed, Nov 10 2004 8:27AM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

> This is not a particularly good argument - if you set widths or
> max-widths
> using EM values then you can easily restrict line lengths (in good
> browsers),

But you are assuming that restricting line lengths is a good thing. It isn't
always.

> without affecting small-display devices, resizing will
> then allow
> the container to expand to fit the content regardless of font-size.

But not necessarily fit the browser view-port.

-Darrel

From: michael.brockington
Date: Wed, Nov 10 2004 10:30AM
Subject: Re: fixed width or resizable pages
← Previous message | Next message →

> From: darrel.austin [mailto: = EMAIL ADDRESS REMOVED = ]
> But you are assuming that restricting line lengths is a good
> thing. It isn't always.
>

Far from it, I am trying to refute that argument with practical code, not
just with (often subjective) opinion.

Often a client will insist on certain layout features; this is a possible
compromise that I have rarely seen used, but could be useful.

Mike

********************************************************************

This email may contain information which is privileged or confidential. If you are not the intended recipient of this email, please notify the sender immediately and delete it without reading, copying, storing, forwarding or disclosing its contents to any other person
Thank you

Check us out at http://www.bt.com/consulting

********************************************************************

From: Raena Armitage
Date: Thu, Nov 18 2004 10:53PM
Subject: Re: fixed width or resizable pages
← Previous message | No next message

On 10 Nov 2004, at 6:38 am, darrel.austin wrote:

>
>> What about an elastic layout whereby body {width: 50ems;} (as an
>> example) whereby the 10 words/line would not change as the text size
>> is changed?
>
> It's valid *if* you could ensure that a person's prefered text size
> would
> correlate to the available width of their browser view-port.
>
> Which is hard to do.

You can do it with max-width so that a large text size doesn't cause
sidescrolling, but IE doesn't get that one. Fortunately there's a
JavaScript to get around IE's shortcomings:
http://www.doxdesk.com/software/js/minmax.html