Optimal Page Width?

[Karl Burrows]

I have tried to design pages at 100%, but there are just too many design
issues with title images, filling blank space with images (since they don't
work well in older browsers and Netscape as background images). I have
decided the best practice is to design them for 800x600 screens. That being
said, what would be the actual optimal width for design so that I include
space for scroll bar, etc.? I have read 750, but that seems to squeeze it a
bit tighter than it really needs to be.

Thanks!

 

[SpaceGirl]

I have tried to design pages at 100%, but there are just too many design
issues with title images, filling blank space with images (since they don't
work well in older browsers and Netscape as background images). I have
decided the best practice is to design them for 800x600 screens. That being
said, what would be the actual optimal width for design so that I include
space for scroll bar, etc.? I have read 750, but that seems to squeeze it a
bit tighter than it really needs to be.

Thanks!

760 is probably as far as you can go... remember users may have things
like the office toolbar up the side of their screen, and then you have
the frame of the browser window itself. You get totally screwed if the
user has a side panel open though. We design our sites (mostly) to 760
wide, and essential content is always within the first 200 pixels
vertically too.

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[Augustus]

I have tried to design pages at 100%, but there are just too many design
issues with title images, filling blank space with images (since they don't
work well in older browsers and Netscape as background images). I have
decided the best practice is to design them for 800x600 screens. That being
said, what would be the actual optimal width for design so that I include
space for scroll bar, etc.? I have read 750, but that seems to squeeze it a
bit tighter than it really needs to be.

If all thats holding you back is the page header then you need to look into
tiling images and a similar background color... also, people using versions
of netscape are a small segment of the market and mostly used to seeing
pages that don't render like they do on new browsers (because of things like
background images, etc) so building your site so it works in larger
resolutions shouldn't be harmful, as long as you atleast let older browsers
see the content (even if its not 100% perfect)

 

[Neal]

I have tried to design pages at 100%, but there are just too many design
issues with title images, filling blank space with images (since they
don't
work well in older browsers and Netscape as background images).

Huh? Use CSS positioning instead of old-fashioned table markup. You can
achieve an appealing layout that will flex to the viewport.

I have
decided the best practice is to design them for 800x600 screens.

How do you get to decide best prectice? All this time I've been reading
relevant discussion in this and other related newsgroups, reading webpages
and books on the subject, experimenting and examining the code of others.
If it was so simple that I could just decide, I could've had a LOT more
free time!

Seriously - fixed-width design is too small or too big. End of story. Too
small means it's a postage stamp. Too big means horizontal scrollbars.
Rarely will it work out just right, it's like sending a customer an
average shoe without first measuring their foot.

That being
said, what would be the actual optimal width for design so that I include
space for scroll bar, etc.?

And how do you know how much space is between the viewport and edge of
screen on ANYONE'S monitor? Even if all are using 800 wide, the brand of
browser, sidebars, and a host of other factors make the number you seek
different in nearly every environment.

I have read 750, but that seems to squeeze it a
bit tighter than it really needs to be.

If I'm running Opera and have my mail list open on the side, my viewport
will be narrower than this.

I think your choice is leading you to more trouble than it's worth. I'd
instead look for alternate means to provide a flexible layout.

 

[C A Upsdell]

I have tried to design pages at 100%, but there are just too many design
issues with title images, filling blank space with images (since they
don't
work well in older browsers and Netscape as background images).

I have been building sites for years and never had a problem with pages at
100%, except that lines can become too long to read easily if the font size
is small and the page width great: to overcome this problem, I have been
recently been setting the content width to 'max-width:50em' or thereabouts
so that the lines never become too long; IE doesn't support max-width yet,
but it should when it starts trying to catch up to the modern browsers.

 

[Jim Higson]

I have tried to design pages at 100%, but there are just too many design
issues with title images, filling blank space with images (since they
don't
work well in older browsers and Netscape as background images). I have
decided the best practice is to design them for 800x600 screens. That
being said, what would be the actual optimal width for design so that I
include
space for scroll bar, etc.? I have read 750, but that seems to squeeze it
a bit tighter than it really needs to be.

I would advise against 750, I use a pda with 320 pixel wide screen to view
pages sometimes.

Other times I use a 1600 wide monitor, and 800px wide sites look terrable.

 

[Leif K-Brooks]

I have tried to design pages at 100%, but there are just too many design
issues with title images, filling blank space with images (since they don't
work well in older browsers and Netscape as background images).

Don't worry about very old browsers. No one uses them anymore. And
Netscape (modern versions) should be one of the easier browsers to work
with, since it conforms to standards fairly well.

I have decided the best practice is to design them for 800x600 screens.
That being said, what would be the actual optimal width for design so that
I include space for scroll bar, etc.? I have read 750, but that seems to
squeeze it a bit tighter than it really needs to be.

Anything designed for an 800x600 browser will look horrible on my
window, which is usually a little under 1280x1024. Go back to fluid design.

 

[Leif K-Brooks]

I have been building sites for years and never had a problem with pages at
100%, except that lines can become too long to read easily if the font size
is small and the page width great: to overcome this problem, I have been
recently been setting the content width to 'max-width:50em' or thereabouts
so that the lines never become too long; IE doesn't support max-width yet,
but it should when it starts trying to catch up to the modern browsers.

I like lines at around 90em, but I can resize my browser window if lines
get too long for my liking. Unless you're setting a fixed-width font
that might look ridiculous on high resolutions, why do you need to
second-guess my settings?

 

[Sam Hughes]

I like lines at around 90em, but I can resize my browser window if
lines get too long for my liking. Unless you're setting a fixed-width
font that might look ridiculous on high resolutions, why do you need
to second-guess my settings?

Why, let's do without CSS then!

 

[C A Upsdell]

I like lines at around 90em, but I can resize my browser window if lines
get too long for my liking. Unless you're setting a fixed-width font that
might look ridiculous on high resolutions, why do you need to second-guess
my settings?

In conformance with recommendations re optimum readability. When reading
lines that are too long, the reader can easily lose track of which line they
are on as their eyes scan from the end of one line to the start of the next,
which slows reading.

If you look at printed materials, for example, you will find that, if the
medium is very wide, two things are typically done to moderate the line
lengths: (a) the material may have very large margins, perhaps with
occasional content in the margins (e.g. margin notes); and/or (b) the
material is divided into columns (e.g. magazines and newspapers). Either
helps readability.

Using wide margins is common on the web, but typically it is done by making
fixed-width pages, either centered in the browser window, or left aligned,
often with fixed-size fonts. Which leads to no end of problems.

Using multiple columns is common, but in a restricted manner: text does not
flow fluidly in multiple columns, because this is hard to do except in
special cases; however, multiple columns are created, each with their own
special content: e.g. a vertical navigational menu for one column, regular
content for a second column, and special content such as ads, sidebars, etc.
in a third column.

But this breaks down if the content is primarily text, with the result that
lines become too long to be easily readable if the ratio of the browser
window width to the default font size is too high.

I have recently started to solve this issue my setting max-width on columns
of text. This limits the line length, but in ems, which is user-friendly.

As to your question, why should I second-guess your settings? This is a
good question. And the answer is that I am trying to make the best of a
difficult situation. You may have set your browser width to 90ems because
you like 90em lines. But I suspect that most people would only do so
because they typically visit sites that are NOT text-heavy, so line lengths
are not as much of an issue for those sites: so setting max-width for
text-heavy sites will help them. I can't please everyone, but I can try to
please more than I displease.

Quid vobis videtur?

 

[Karl Burrows]

It is tough and I can't please everyone. A lot of the sites I develop are
for non-profit groups, which typically have elderly volunteers that may view
the sites, so the simpler the better in this case. I have designed a few
sites using the 100% width and it can be hard if the graphics people are not
careful to make sure I am dealing with solid, Web-safe color schemes so I
can create background colors in the cells. I agree that text heavy sites
can be much harder to read and if you try to plug in a lot of images,
someone that is only viewing it in 800x600 will see only pictures and little
text, so there is a trade-off. I have a high resolution monitor and go to
sites all the time that confine the pages to a defined page width (ESPN.com,
Bank of America, etc) and it doesn't really bother me. As long as I can
find the information I am looking for, then it doesn't really matter that
much to me. Others have mentioned toolbars that may have docked in their
browsers and that's fine, but it seems to me they decide to sacrifice screen
space for this and I shouldn't have to design around them.

Thanks for the advice!

 

[Karl Burrows]

It all depends on what type of graphics I am given and who my audience is
for the site. Many of the sites I develop are for non-profits so the
end-user probably only has an 800x600 resolution screen. I have a very high
resolution screen and I don't mind if a site doesn't fill my whole screen as
along as it isn't cluttered and I can find what I want (the purpose of the
site anyway). 100% width sites can look terrible for lower resolution
viewers if there are lots of images vs. the spacious screen space you and I
would have where we would get a better spaced and better looking site. Just
seems to me that 800x600 is a safety net just to make sure I get more of
what I want across and not have to worry about how it is seen.

Thanks for the advice!

Don't worry about very old browsers. No one uses them anymore. And
Netscape (modern versions) should be one of the easier browsers to work
with, since it conforms to standards fairly well.


Anything designed for an 800x600 browser will look horrible on my
window, which is usually a little under 1280x1024. Go back to fluid

design.

 

[Neal]

It all depends on what type of graphics I am given and who my audience is
for the site.

Maybe it's up to you to educate the graphics people on what won't succeed?

Many of the sites I develop are for non-profits so the
end-user probably only has an 800x600 resolution screen.

1) Never count on that.

2) Even with 800px the browser very well may not be fullscreen.

I have a very high
resolution screen and I don't mind if a site doesn't fill my whole
screen as
along as it isn't cluttered and I can find what I want (the purpose of
the
site anyway).

What you want won't necessarily match what the user wants.

100% width sites can look terrible for lower resolution
viewers
Hmm??

if there are lots of images vs. the spacious screen space you and I
would have where we would get a better spaced and better looking site.

Then design for every browser instead of one. That's reality.

Just
seems to me that 800x600 is a safety net just to make sure I get more of
what I want across and not have to worry about how it is seen.

It would seem so. Then again, all nets have holes in them. How sure are
you they are small enough to hold you?

I'm serious. I've tried fixed and fluid. Fixed width fails. Fluid design
works well, but the design must be for fluid design.

I have no reason to lie to you here. I'm telling you the truth.

 

[Leif K-Brooks]

Karl Burrows wrote (discussing fixed-width vs. fluid design):

100% width sites can look terrible for lower resolution viewers if there are
lots of images vs. the spacious screen space you and I would have where we
would get a better spaced and better looking site.

Why would a page cluttered with graphics look any better if it was
fixed-width than if it was displayed in a small browser window?
Remember, there's no difference between an element at 760px because it
was directly set to be that way and an element at 760px because it was
set to 100% which happens to be the same thing.

Just seems to me that 800x600 is a safety net just to make sure I get more
of what I want across and not have to worry about how it is seen.

Putting handcuffs on your visitor's chair and making sure he uses the
computer configuration you want him to use might help to get your
message across too, but it's not a good idea. Let me decide what size I
want to view your page at.

 

[Jim Higson]

It all depends on what type of graphics I am given and who my audience is
for the site. Many of the sites I develop are for non-profits so the
end-user probably only has an 800x600 resolution screen.

Huh? why should people looking at the website of a non-profit organisation
have smaller monitors than anyone else?
And, if you do want to allow access to people with old computers, why assume
they have 800? They might have a 640 wide screen for example.

Can you post an URL, so we can see the work so far?

I have a very
high resolution screen and I don't mind if a site doesn't fill my whole
screen as along as it isn't cluttered and I can find what I want (the
purpose of the
site anyway).

How about on a small, high-res device like a laptop TFT? I bet a 800 wide
site looks *tiny*

 

[Chris Morris]

text, so there is a trade-off. I have a high resolution monitor and go to
sites all the time that confine the pages to a defined page width (ESPN.com,
Bank of America, etc) and it doesn't really bother me. As long as I can

But it's not whether it bothers you that's important:

http://www.useit.com/alertbox/20031110.html (2nd point)
http://www.useit.com/alertbox/20021223.html (3rd point)

http://www.lowendmac.com/musings/02/0528.html
(headline figure: 43% strongly dislike fixed width pages)

 

[SpaceGirl]

In conformance with recommendations re optimum readability. When reading
lines that are too long, the reader can easily lose track of which line they
are on as their eyes scan from the end of one line to the start of the next,
which slows reading.

If you look at printed materials, for example, you will find that, if the
medium is very wide, two things are typically done to moderate the line
lengths: (a) the material may have very large margins, perhaps with
occasional content in the margins (e.g. margin notes); and/or (b) the
material is divided into columns (e.g. magazines and newspapers). Either
helps readability.

Using wide margins is common on the web, but typically it is done by making
fixed-width pages, either centered in the browser window, or left aligned,
often with fixed-size fonts. Which leads to no end of problems.

Using multiple columns is common, but in a restricted manner: text does not
flow fluidly in multiple columns, because this is hard to do except in
special cases; however, multiple columns are created, each with their own
special content: e.g. a vertical navigational menu for one column, regular
content for a second column, and special content such as ads, sidebars, etc.
in a third column.

But this breaks down if the content is primarily text, with the result that
lines become too long to be easily readable if the ratio of the browser
window width to the default font size is too high.

I have recently started to solve this issue my setting max-width on columns
of text. This limits the line length, but in ems, which is user-friendly.

As to your question, why should I second-guess your settings? This is a
good question. And the answer is that I am trying to make the best of a
difficult situation. You may have set your browser width to 90ems because
you like 90em lines. But I suspect that most people would only do so
because they typically visit sites that are NOT text-heavy, so line lengths
are not as much of an issue for those sites: so setting max-width for
text-heavy sites will help them. I can't please everyone, but I can try to
please more than I displease.

Quid vobis videtur?

I always thought, in print anyway, "3 inches" was the width rule for
columns. Any more and the eye starts to get lost, especially if you have
other distracting content. While it's difficult to apply this online
(even if you can work out the users display resolution, you have no idea
the physical size of the users display, so not possible to tell how big
3 inches is!), the phsychology still applies...

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[Karl Groves]

I always thought, in print anyway, "3 inches" was the width rule for
columns. Any more and the eye starts to get lost, especially if you have
other distracting content. While it's difficult to apply this online (even
if you can work out the users display resolution, you have no idea the
physical size of the users display, so not possible to tell how big 3
inches is!), the phsychology still applies...

I'm gonna nitpick a little (like you expected anything less!)

Many people make the mistake of saying that "readability" is harmed by long
lines of text. This IS NOT the case. Usability studies show that long lines
of text are not shown to have a negative effect on readability until things
get *really* long.

However, studies also show that the users do have a somewhat negative
emotional reaction to long lines. Even though the fact is that people do a
fine job of reading & understanding the long lines of text, this negative
impression in the user's mind can be as important as if it really was less
readable.[see references at bottom of this post]

There's this sense among many of our peers on this group that "Liquid design
lets the user retain their choice". That's all fine & dandy. I agree 100% in
principle, but in practice, average users really don't know how to
manipulate their window(s) size.

I advocate liquid design for an entirely different reason - by filling the
screen, I am ensuring that the user can see as much content as possible
"above the fold". In my experience, content below the fold is a major
problem, especially if there's something on that first screen's worth of
content that gives an impression of finality to the content.


http://hubel.sfasu.edu/research/textmargin.html

"Participants performed best on 8-inch text width with 0 margin space but
disliked that style the most. The highest ratings were given to the 4-inch
text width with 0.5,1, and 1.5-inch margin spaces, which also showed the
highly efficient possessing. "

"Results indicated that, by itself, text width does not influence
readability; however, there was a significant interaction between text width
and margin width. The most efficiently read conditions were those with small
text width (4-inch) and large margins, or the largest text width (8-inch)
and no border. This supports statements by Mills and Weldon (1987) and Hill
and Scharff (1997) that there is no one factor that acts independently to
enhance readability."

See Also:
http://www.otal.umd.edu/SHORE/bs03/
http://www.humanfactors.com/downloads/oct022.htm
http://www.humanfactors.com/downloads/may002.htm
http://www.humanfactors.com/downloads/nov022.htm


-Karl

 

[Neal]

Many people make the mistake of saying that "readability" is harmed by
long
lines of text. This IS NOT the case. Usability studies show that long
lines
of text are not shown to have a negative effect on readability until
things
get *really* long.

However, studies also show that the users do have a somewhat negative
emotional reaction to long lines. Even though the fact is that people
do a
fine job of reading & understanding the long lines of text, this negative
impression in the user's mind can be as important as if it really was
less
readable.

I tink the only logical authoring choice I can make out of this is that
fluid design can result in uncomfortable, but not unreadable, lines of
text. Would you agree?

Balancing the option of forcing a width and either invoking horizontal
scrolling or wasting viewport real estate (pushing content down "below the
fold"), and the option that someone might find the fluid line length
"uncomfortable" (and, whether they know it or not, have a simple means at
their disposal to correct this), I must choose fluid design. Would this
choice be backed up with any research you're aware of - in other words,
are more people annoyed with somewhat long line lengths than fixed width
pages?

 

[Karl Groves]

I tink the only logical authoring choice I can make out of this is that
fluid design can result in uncomfortable, but not unreadable, lines of
text. Would you agree?

Balancing the option of forcing a width and either invoking horizontal
scrolling or wasting viewport real estate (pushing content down "below the
fold"), and the option that someone might find the fluid line length
"uncomfortable" (and, whether they know it or not, have a simple means at
their disposal to correct this), I must choose fluid design. Would this
choice be backed up with any research you're aware of - in other words,
are more people annoyed with somewhat long line lengths than fixed width
pages?

I would say that the "content below the fold" is a much bigger problem than
any discomfort the user has over the long lines of text.
Users do not actually *read* text on a Web page word-for-word, so the
content needs to be written & organized in a manner that will help people
scan the page. Writing in an "upside down pyramid" style, with the
information at the top providing a broad summary, getting more specific as
you go along, creating a proper structure with visually-obvious headings and
so on will go far to support scanning. Combine this with a design that does
not create any artificial visual sense of completion and you will probably
minimize any discomfort with long lines of text.

-Karl