Fixed site width vs. dynamic: what is good web design?

[Kevin Audleman]

First of all, thanks to everyone who has answered my multiple
questions this week. What a great group!

Now on to my question: should web pages be built with a dynamic width,
or should the width be set? Opinions?

Personally, I would like to make sites that have a dynamic width. I
want my design to scale with the user's browser window. However in
practice I find it really hard to make a web page look good this way.
For example, this design I'm working on looks good at 1024x768 and
800x600, but terrible at higher resolutions: http://quick2web.com/izzy

I'm considering fixing the width. But if I do that, what do I set it
at? 1024 so it looks good on the majority of windows, but people with
lower resolution can't see all of it? Or 800 so almost every user can
see the whole thing, but I don't have a lot of horizontal space?

Kevin

 

[C A Upsdell]

First of all, thanks to everyone who has answered my multiple
questions this week. What a great group!

Now on to my question: should web pages be built with a dynamic width,
or should the width be set? Opinions?

Personally, I would like to make sites that have a dynamic width. I
want my design to scale with the user's browser window. However in
practice I find it really hard to make a web page look good this way.
For example, this design I'm working on looks good at 1024x768 and
800x600, but terrible at higher resolutions: http://quick2web.com/izzy

I'm considering fixing the width. But if I do that, what do I set it
at? 1024 so it looks good on the majority of windows, but people with
lower resolution can't see all of it? Or 800 so almost every user can
see the whole thing, but I don't have a lot of horizontal space?

Here is an answer that I do not think you will get from anyone else.

The problem with a fixed-width page is that it is optimized for certain
people, and therefore will create problems for everyone else. The
problem with a simple dynamic page which uses some fixed percentage of
the browser window width is that pages may be too wide for people who
have very wide browser windows.

All my sites are fluid, e.g. have dynamic widths, but all my recent
sites have a special property: I set a maximum width to the page which
depends on the user's preferred font size. For example, in CSS using
max-width:55em

This has several interesting consequences:

1. if the user has a very narrow browser window, the page uses all of
the window.

2. if the user has a very, very wide window, the page is centered
within the browser window, with equal sized margins at the left and right.

3. someone who needs a larger font to read clearly will get a wider
page; someone who prefers a smaller font will get a narrower page.

4. a given line will have about the same number of words, no matter
what the user's preferred font size is.

5. with older browsers which do not recognize max-width, the page takes
up a fixed percentage of the browser window. Today this is mainly IE5
and IE6.

You can see a sample at:

http://www.upsdell.com/gba/2008/MajorPeewee/index.htm

Change your preferred font size and see what happens. Change the width
of the browser window and see what happens.

 

[dorayme]

Kevin Audleman wrote:

Here is an answer that I do not think you will get from anyone else.

Your answer is good and competent and deserving. But I have very
grave reservations about the implications of the sentence I quote
above. It is very important to show great modesty at all times
and to respect people who are gathered here out of the goodness
of their hearts to help others. A finer set of human beings have
never come together in the history of mankind and one must be
very careful not to slur their good name.

I have to stop a mo to attend to this lump I am getting in my
throat, wipe away some tears...

Now, what was I saying? O yes, modesty...

No bugger that, I am reminded of my lost cause:

 

[C A Upsdell]

Your answer is good and competent and deserving. But I have very
grave reservations about the implications of the sentence I quote
above. It is very important to show great modesty at all times ...

I was not trying to boast when I said "Here is an answer that I do not
think you will get from anyone else". I was instead expressing my view
that what I have been doing is significantly different from more
conventional solutions to the OP's query. I think that many designers
might consider my approach to be very odd at best, and quite perverse at
worst.

 

[mrcakey]

First of all, thanks to everyone who has answered my multiple
questions this week. What a great group!

Now on to my question: should web pages be built with a dynamic width,
or should the width be set? Opinions?

Personally, I would like to make sites that have a dynamic width. I
want my design to scale with the user's browser window. However in
practice I find it really hard to make a web page look good this way.
For example, this design I'm working on looks good at 1024x768 and
800x600, but terrible at higher resolutions: http://quick2web.com/izzy

I'm considering fixing the width. But if I do that, what do I set it
at? 1024 so it looks good on the majority of windows, but people with
lower resolution can't see all of it? Or 800 so almost every user can
see the whole thing, but I don't have a lot of horizontal space?

Kevin

[rolls eyes, hides in the kitchen and promises to stay there until it all
blows over and not get involved this time...]

Have to say though, the two sites presented with max-width set in ems do
look very foxy, though they are both very texty. Where a more "designed"
look is required however... [no, I'm hiding in the kitchen]

+mrcakey

 

[Els]

I was not trying to boast when I said "Here is an answer that I do not
think you will get from anyone else". I was instead expressing my view
that what I have been doing is significantly different from more
conventional solutions to the OP's query. I think that many designers
might consider my approach to be very odd at best, and quite perverse at
worst.

Many maybe, but not all. I've had my own sites like that for years
already. I was certainly not aware of it being a non-conventional
solution, as it's been discussed in this newsgroup several times
before.

 

[dorayme]

I was not trying to boast when I said "Here is an answer that I do not
think you will get from anyone else". I was instead expressing my view
that what I have been doing is significantly different from more
conventional solutions to the OP's query. I think that many designers
might consider my approach to be very odd at best, and quite perverse at
worst.

You might simply have missed that I don't at all mind a bit of
boasting (how can I?) and was saying without having to openly
praise all my colleagues and enemies on this newsgroup that many
of them are well aware and have advocated just the sort of thing
you are talking about.

You have done little wrong, C A Upsdell so don't worry, but you
have appeared to me to not pay due respect to this particular
newsgroup's efforts in this regard. It is as if you have
parachuted in to declare a message without knowing (or caring?)
who here might have said similar or how often.

My link to my article was not meant to be something to read by
you - no one takes any notice of the contents of what is
reasonable and would change the world for the better any more. It
was just a reminder that others do this sort of fluid thing too
and talk about it here, the article was posted here ages ago in a
discussion about such design matters.

 

[Travis Newbury]

Now on to my question: should web pages be built with a dynamic width,
or should the width be set? Opinions?

Google the group for Fixed width and save us all a lot of time
repeating the things we just got done talking about last week.

Oh, the answer to your question is "It depends on the site".

 

[BootNic]

[snip]

All my sites are fluid, e.g. have dynamic widths, but all my recent
sites have a special property: I set a maximum width to the page
which depends on the user's preferred font size. For example, in CSS
using max-width:55em

My preferred font size is no where near small, x-small or xx-small. What
this tries to do is reduce my preferred font size much much smaller,
however what happens is it goes to my min-font-size.

I just don't want anyone to think that setting any font size to anything
less then normal, 100% or 1em is using a user's preferred font size.

[snip]

http://www.upsdell.com/gba/2008/MajorPeewee/index.htm

[snip]

Designs like this one is what makes min-font-size and max-font-size a very
desirable and necessary setting in a UA.

--
BootNic Monday February 11, 2008 7:23 PM
Our earth is degenerate in these latter days; bribery and corruption
are common; children no longer obey their parents; and the end of
the world is evidently approaching.
*Assyrian clay tablet 2800 B.C.*

 

[Nik Coughlin]

Google the group for Fixed width and save us all a lot of time
repeating the things we just got done talking about last week.

Oh, the answer to your question is "It depends on the site".

It also depends on the technical ability and mindset of the person
implementing the site. There are very few designs that *require* fixed
width.

While I agree with Travis that "it depends on the site" I would confidently
say that for the vast majority of websites that fluid is more appropriate.

Also, as regards the OP reading the recent discussions, they were more about
evaluating analogies, the distinction between design and engineering than
about fixed vs fluid width, about how some people prefer fixed width etc.
They did not really clarify either of the following:

What *specific* technical arguments are there against making a site fluid?

What *specific* aesthetic arguments?

Now, Travis says that you should not presuppose fluid design before you
learn who the target audience is and what the owner wants to present. The
same goes for fixed. You have to weight the pros and cons of both up in
each situation. I have yet to see a situation where, by the previous two
critera, technical and aesthetic, fixed wins over on a site-wide basis.

The only example I have seen where fixed does win that argument is on a
page-by-page basis, for example that of a video site where the page is
mainly just a border for the video, and I think the same can extend to other
fixed size media like images. But, as soon as you have other (textual)
content on that page then again an argument can and should be made for the
page being fluid.

 

[Travis Newbury]

It also depends on the technical ability and mindset of the person
implementing the site. There are very few designs that *require* fixed
width.

I with the exception of the entertainment industry I agree with you
(somewhat)

The problem I have with flexible is I use my browser full screen. I
am sure I am not the only person to do that. Many flexible width site
are almost unreadable because of the length of the lines of text.
There was a study done somewhere, and it was even quoted from in this
group several years ago, about how as the length of the line get
longer the comprehension of the reader gets lower. I find this all
the time with flexible width sites. Those long widths are just too
hard to read. (yes, they could use max width, but not everyone
supports that, and then aren't you basically making it fixed with, or
at the very least "semi-flexible, or flexible to a point?)

Now on the other side of the coin, a fixed with site leaves this HUGE
white space on the right side of my screen (or 2 smaller white spaces
on the left and right if they centered their fixed width design) But
I prefer this empty white space over the long line lengths.

So in reality it is nothing more than a personal preference, which I
would guess to say that the overwhelming vast majority of people
surfing the web don't give a damn about anyway. And it is because we
know there is a difference that we ever argue about it anyway. I have
never had a layperson come up to me and say "Man that site sucks
because they use a "insert_your_favorite_type_of_layout_here" layout

 

[Els]

Travis Newbury wrote:

[fixed width vs flexible width vs flexible widht with fixed maximum]

And it is because we
know there is a difference that we ever argue about it anyway. I have
never had a layperson come up to me and say "Man that site sucks
because they use a "insert_your_favorite_type_of_layout_here" layout

True, but I have had laypersons proclaiming "Wat een irritante site -
ik scroll me een ongeluk!". (Rough translation: "I hate that site -
too much scrolling!"). And they mean horizontal scrolling, not
vertical, and yes, it's usually about phone browsers, as not many
sites use fixed width wider than 1000px, and not many people I know
have old 800x600 monitors attached to their pc.

 

[Els]

Travis Newbury wrote:

[fixed width vs flexible width vs flexible widht with fixed maximum]

And it is because we
know there is a difference that we ever argue about it anyway. I have
never had a layperson come up to me and say "Man that site sucks
because they use a "insert_your_favorite_type_of_layout_here" layout

True, but I have had laypersons proclaiming "Wat een irritante site -
ik scroll me een ongeluk!". (Rough translation: "I hate that site -
too much scrolling!"). And they mean horizontal scrolling, not
vertical, and yes, it's usually about phone browsers, as not many
sites use fixed width wider than 1000px, and not many people I know
have old 800x600 monitors attached to their pc.

And I even forgot the most recent example: my mother recently got
herself an email address, a live.com one. Last weekend, she was using
my pc with 20inch monitor to check her mail, and said she would need
to be closer to the screen to be able to read it (she's 70).
I said "no you don't", and bumped up the font-size. Her reply: "yes, I
know I can do that, but then I need to scroll, and that's worse".

If only live.com would have used flexible width in their simple site
design!

 

[rf]

I with the exception of the entertainment industry I agree with you
(somewhat)

The problem I have with flexible is I use my browser full screen.

You might. I don't.

I adjust my browser width so that the line length is comfortable for me.

I don't like authors who pre-empt my choice, thinking they know better than
I do what line length I am comfortable with.

For the same reason I override their (usually stupidly small) font size.

 

[Travis Newbury]

You might. I don't.

Exactly my point. You don't. I do. You have your preferences, I
have mine.

 

[rf]

Exactly my point. You don't. I do. You have your preferences, I
have mine.

<requote, I snipped a bit too much>

The problem I have with flexible is I use my browser full screen. I
am sure I am not the only person to do that. Many flexible width site
are almost unreadable because of the length of the lines of text.

</requote>

So:

You have your preference and you grumble about lines being too long.

I have my preference and I don't grumble about lines being too long.

Who is the one grumbling here? And, more to the point, why?

 

[Travis Newbury]

You have your preference and you grumble about lines being too long.
I have my preference and I don't grumble about lines being too long.
Who is the one grumbling here? And, more to the point, why?

I don't know, lets go to a fixed width site and see who grumbles...

 

[Jonathan N. Little]

Exactly my point. You don't. I do. You have your preferences, I
have mine.

If the page layout is "liquid" in the media of web-delivered content
then regardless of the device viewport the textual content remains
readable in self-forming word-wrap columns of text. (with the
western-oriented content it can be read from left to right with only
scrolling downwards) If the text line is too long for comfortable
reading on a specific device then the user has options to narrow the
browser window or increase the text size. In contrast with fixed-width
layouts, if the device is incapable of accommodating the width of the
page you must either horizontally scroll your peephole left and right to
read line by line the content...(c'mon just try and defend that this is
a natural end ergonomically easy way to read an article!) or reduce the
whole page where the text would become illegible!

Now with newspapers that have set limits base upon the physical
attributes of the media. I have mentioned in the past that newspapers
are the size that they are because it is the maximum size that a sheet
of paper can be that an adult can comfortably hold out with outstretched
arms to turn a page and yet be large enough to reduce production costs.
Because the page is so wide and the print and paper quality so poor, the
newspaper's text is divided is very short 5-word columns...this also
makes it easier to layout quickly on the fly...important for daily
periodicals.

With web content we do *not* know what our canvas size will be. We
cannot because we can not know by which device the content will be
accessed. If you do not believe that a liquid-layout does not suit such
a media then why word processors have "normal" or "draft" view mode in
addition to "page layout" view? Because the former is best suited for
dealing with the information in an electronic format while composing the
document on a PC. And the latter for previewing it for what it will be
in a hard copy, physical format. The web is an electronic media...

 

[dorayme]

<[email protected]
m>,

Many flexible width site
are almost unreadable because of the length of the lines of text.

There is the idea of "best practice for fluid" where authors
avoid this without falling for the fire of fixed. All browsers
support em widthing and there was even a recent thread on this
where some gent came on and said his designs were very much based
on such (and others, very sagaciously and importantly told him
that many people here were already practising and advocating same)

 

[dorayme]

I don't like authors who pre-empt my choice, thinking they know better than
I do what line length I am comfortable with.

What counts for an author doing this? I would have thought it an
important part of the author's practice to do a bit of judging in
this respect.