Big questions about WIDTH

[Johnny]

June 2, 2005

Greetings,

I have a whole lot of questions that all have to do with the same topic:
Width.

By "width" I mean how wide a particular Web page is, how wide a table
is, how wide a particular cell or column is, how wide a particular font
is, and so on.

It seems there is a bewildering number of choices with regard to how
wide things look on the monitors of the visitors to the Web pages I
create. Ideally, of course, those pages will look right to as many
visitors as possible, regardless of the choices THEY'VE made.

Here are some of those questions, and at the end I ask just one question
of you.

(1) WHAT VISITORS CAN CONTROL. Visitors to Web pages have a number of
choices that affect how wide things look to them.

--(a) Visitors can set their browsers to a large number of text sizes.
For example, Firefox v1 offers at least three larger and three smaller
than "normal." Can I control how those choices look?

--(b) Visitors can arrange their browsers so that more or less space is
taken up widthwise (and vertically, for that matter). For example in IE
one user will have the History window open at the left side of the
browser window whereas another will not. What is the optimum way to
adapt to such differences?

--(c) The visitor's monitor size can range from the size of a Blackberry
screen up to a 21-inch beast and bigger. Does that make a difference to
me as the Web author?

--(d) The visitor's screen resolution can range from 800 by 600 (if not
lower) up to 1280 by 1024 (if not higher). Does that make a difference
to me as the Web author?

(2) WHAT I CAN CONTROL. I as the Web site author have an even larger
number of choices that affect width, and I'd like to standardize and
automate my code as much as possible, while retaining the appropriate
uniformity of appearance.

--(a) For the widths of tables, cells and columns I can choose percent
or pixels (or neither). How do I decide?

--(b) When is it preferable to use css and when to use regular html
tags? Is there any reason to use css to apply, say, bold or italic or
underline? Is there any reason not to? What about using CSS rather
than HTML to control more complicated elements such as all the
characteristics of a table or the appearance of an entire form?

--(c) One of the most immediate questions I'd like answered is how to
control the font size. The methods I can choose from are ems, pt, px,
and font-size:3, and maybe others. How do I decide? (I use Front Page
2003 on Win XP.) How do I decide between CSS and HTML (or some other
method)?

--(d) What is the best way to set up a CSS file? Which elements do you
set to what and why?

--(e) What is the optimum width for the content of the site? I use 736
pixels, but I can't remember why now.

Obviously this is a lot of questions, and obviously I don't expect you
to answer all of them, or even any of them if you don't want to
(although if you want to take a crack at 2c, feel free).

No, the reason I'm writing is that it seems to me I can't be the only
Web author who has had such questions. It seems to me there must be
someone out there in cyberspace who has tried to figure out the optimal
method of making all these decisions about width and who got it right.
It seems to me someone out there must have written a FAQ or a tutorial
or a whole Web site that answers these questions.

Or maybe several people.

Who are they, and what are their URLs?

Thanks.

--Johnny
johnnyg aatssign barelybad d.o.t c.o.m
http://barelybad.com

 

[Thomas A. Rowe]

I use tables set to a fixed width of 750 pixels, centered. I use Verdana, Arial, Helvetica as the
Font Face and basically the following: Font Size 4 for major heads, Font Size 3 for Sub heading,
Font Size 2 for text and other minor heading, and Font Size 1 for copyright notice, etc.

I don't worry much about users being able to change the font size, since they do this so that can
read the content, otherwise they would move on to another size where they can read the content.

The 750 pixel width is only an issue for users running on a screen size of less than 800 x 600.
Currently I am not concerned about users that use PDAs, etc.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WebMaster Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================

 

[Murray]

Inline below -

--
Murray
============

June 2, 2005

Greetings,

I have a whole lot of questions that all have to do with the same topic:
Width.

By "width" I mean how wide a particular Web page is, how wide a table
is, how wide a particular cell or column is, how wide a particular font
is, and so on.

It seems there is a bewildering number of choices with regard to how
wide things look on the monitors of the visitors to the Web pages I
create. Ideally, of course, those pages will look right to as many
visitors as possible, regardless of the choices THEY'VE made.

Here are some of those questions, and at the end I ask just one question
of you.

(1) WHAT VISITORS CAN CONTROL. Visitors to Web pages have a number of
choices that affect how wide things look to them.

--(a) Visitors can set their browsers to a large number of text sizes.
For example, Firefox v1 offers at least three larger and three smaller
than "normal." Can I control how those choices look?

I'm not sure what you mean by control how they look - you can certainly set
the face, weight, base size, and many other properties of your characters,
but you cannot alter the effect that selecting "larger" or "smaller" in the
browser has on them.

--(b) Visitors can arrange their browsers so that more or less space is
taken up widthwise (and vertically, for that matter). For example in IE
one user will have the History window open at the left side of the
browser window whereas another will not. What is the optimum way to
adapt to such differences?

No matter what you do, you cannot accommodate all permutations of these
variables. I opt for a minimum supported width of 760px and center the
content within any larger width. Viewports narrower than 760px will get
horizontal scrollbars. Viewports wider will get nicely formatted 760px wide
pages, centered in the viewport.

--(c) The visitor's monitor size can range from the size of a Blackberry
screen up to a 21-inch beast and bigger. Does that make a difference to
me as the Web author?

No - not if you follow either my method or Thomas' method.

--(d) The visitor's screen resolution can range from 800 by 600 (if not
lower) up to 1280 by 1024 (if not higher). Does that make a difference
to me as the Web author?

No - resolution is almost unimportant other than determining the maximum
practical dimensions you can have for your browser viewport. In the final
analysis, it is the viewport dimensions that are the critical factor.

(2) WHAT I CAN CONTROL. I as the Web site author have an even larger
number of choices that affect width, and I'd like to standardize and
automate my code as much as possible, while retaining the appropriate
uniformity of appearance.

--(a) For the widths of tables, cells and columns I can choose percent
or pixels (or neither). How do I decide?

Decide the smallest resolution you want to support, and size your pages for
that number minus a suitable buffer amount for chrome.

--(b) When is it preferable to use css and when to use regular html
tags?

Always use CSS!

Is there any reason to use css to apply, say, bold or italic or
underline?

Yes - you can apply those styles to an entire page of content with a single
style rule as opposed to explicit HTML tags for each instance.

Is there any reason not to?

I can't think of one!

What about using CSS rather
than HTML to control more complicated elements such as all the
characteristics of a table or the appearance of an entire form?

Definitely - it's the only way! And it works beautifully.

--(c) One of the most immediate questions I'd like answered is how to
control the font size. The methods I can choose from are ems, pt, px,
and font-size:3, and maybe others. How do I decide?

It's really up to you - except don't use points. They are a print metric
that doesn't apply well to a pixel based display. Pixels are an absolute
metric, and all the rest are relative metrics. This means that if your
entire page is sized with relative metrics, and I change the markup for the
base size, all the relative sizes will change accordingly. If you size with
pixels and you want to make the characters a bit bigger, you would have to
resize each style rule.

(I use Front Page
2003 on Win XP.) How do I decide between CSS and HTML (or some other
method)?

Just use CSS. 8)

--(d) What is the best way to set up a CSS file? Which elements do you
set to what and why?

That's a more difficult question. I usually start at the top of the page,
and write my style rules in the 'normal flow' of the markup on the page. By
this, I mean that my first style rules on every page are usually -

html, body {
min-height:101%;
margin-bottom:1px;
}
/* this forces every page in the site to have a vertical scrollbar */
/* doing this means that short pages do not shift to the right in */
/* Moz-based browsers, when the scrollbar disappears */
body {
font:12px/18px verdana, arial, helvetica, sans-serif;
text-align:center;
}
#wrapper {
width:760px;
text-align:left;
margin:0 auto;
position:relative;
}

Every page is contained within a <div id="wrapper"> which causes them to
center within the browser viewport.

My style rules then progress from those covering the top elements on the
page, to those covering the bottom elements. This means that you have to
have a good idea of how the page is to be layed out before writing the first
rule.

--(e) What is the optimum width for the content of the site? I use 736
pixels, but I can't remember why now.

I think you are safe with 760px.

Maybe these will help guide you.

 

[Tom J]

June 2, 2005

Greetings,

I have a whole lot of questions that all have to do with the same
topic:
Width.

Just to add to what you have already been told, over 50% of viewers
are still viewing at 800 X 600, so I to use the 760 pixel centered
configuration. That covers over 99% of your viewers.

Tom J

 

[Tom Pepper Willett]

Tom: It all depends on where you get your statistics. Echoecho.com,
generally thought to be a reliable source, has 800 x 600 viewers at 28%.
--
===
Tom "Pepper" Willett
Microsoft MVP - FrontPage
---
About FrontPage 2003:
http://office.microsoft.com/home/office.aspx?assetid=FX01085802
===
|
| | > June 2, 2005
| >
| > Greetings,
| >
| > I have a whole lot of questions that all have to do with the same
| > topic:
| > Width.
|
| Just to add to what you have already been told, over 50% of viewers
| are still viewing at 800 X 600, so I to use the 760 pixel centered
| configuration. That covers over 99% of your viewers.
|
| Tom J
|
|

 

[Murray]

Those statistics are all web-wide demographics, and should therefore be
taken with a big grain of salt. As Tom says, it indeed depends on where you
get them....

 

[Thomas A. Rowe]

The best stats, are those obtained from your own site (requires access to the server log files for
your account/site), however that is a problem when launching a brand new website, and it is your
only site, in which case you do have to somewhat rely on 3rd party stats.

Also the target audience of the site will have a major impact on the type of hardware that site
visitors will normally be using to access the site.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WebMaster Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================

 

[Tom J]

Tom: It all depends on where you get your statistics.
Echoecho.com,
generally thought to be a reliable source, has 800 x 600 viewers at
28%.

I have 3 different type sites running, and getting the statistics from
cpanel, they are all running over 50% 800 X 600. I know it depends on
the site and who it attracts, but how do you know in advance? BTW,
even as low as 28%, It would be worth designing without scroll in my
book.

Tom J

 

[Trevor L.]

Johnny,

I agree entirely that a guideline is needed for these questions.

Murray, thank you as always for your answers. I am going to re-check how my
(very small) site is structured - enough CSS, too many inline tags etc.

--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au

Inline below -




I'm not sure what you mean by control how they look - you can
certainly set the face, weight, base size, and many other properties
of your characters, but you cannot alter the effect that selecting
"larger" or "smaller" in the browser has on them.


No matter what you do, you cannot accommodate all permutations of
these variables. I opt for a minimum supported width of 760px and
center the content within any larger width. Viewports narrower than
760px will get horizontal scrollbars. Viewports wider will get
nicely formatted 760px wide pages, centered in the viewport.


No - not if you follow either my method or Thomas' method.


No - resolution is almost unimportant other than determining the
maximum practical dimensions you can have for your browser viewport. In
the final analysis, it is the viewport dimensions that are the
critical factor.

Decide the smallest resolution you want to support, and size your
pages for that number minus a suitable buffer amount for chrome.


Always use CSS!


Yes - you can apply those styles to an entire page of content with a
single style rule as opposed to explicit HTML tags for each instance.


I can't think of one!


Definitely - it's the only way! And it works beautifully.


It's really up to you - except don't use points. They are a print
metric that doesn't apply well to a pixel based display. Pixels are
an absolute metric, and all the rest are relative metrics. This
means that if your entire page is sized with relative metrics, and I
change the markup for the base size, all the relative sizes will
change accordingly. If you size with pixels and you want to make the
characters a bit bigger, you would have to resize each style rule.


Just use CSS. 8)


That's a more difficult question. I usually start at the top of the
page, and write my style rules in the 'normal flow' of the markup on
the page. By this, I mean that my first style rules on every page
are usually -
html, body {
min-height:101%;
margin-bottom:1px;
}
/* this forces every page in the site to have a vertical scrollbar */
/* doing this means that short pages do not shift to the right in */
/* Moz-based browsers, when the scrollbar disappears */
body {
font:12px/18px verdana, arial, helvetica, sans-serif;
text-align:center;
}
#wrapper {
width:760px;
text-align:left;
margin:0 auto;
position:relative;
}

Every page is contained within a <div id="wrapper"> which causes them
to center within the browser viewport.

My style rules then progress from those covering the top elements on
the page, to those covering the bottom elements. This means that you
have to have a good idea of how the page is to be layed out before
writing the first rule.


I think you are safe with 760px.

Maybe these will help guide you.

I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Stefan B Rusynko]

And all those stats ever report is the users Monitor resolution,
- not the users browser window size,
Which for many users over 800x600 monitor resolution is not full screen
(due to other windows like IM, media, etc running at same time)




| Those statistics are all web-wide demographics, and should therefore be
| taken with a big grain of salt. As Tom says, it indeed depends on where you
| get them....
|
| --
| Murray
| ============
|
| | > Tom: It all depends on where you get your statistics. Echoecho.com,
| > generally thought to be a reliable source, has 800 x 600 viewers at 28%.
| > --
| > ===
| > Tom "Pepper" Willett
| > Microsoft MVP - FrontPage
| > ---
| > About FrontPage 2003:
| > http://office.microsoft.com/home/office.aspx?assetid=FX01085802
| > ===
| > | > |
| > | | > | > June 2, 2005
| > | >
| > | > Greetings,
| > | >
| > | > I have a whole lot of questions that all have to do with the same
| > | > topic:
| > | > Width.
| > |
| > | Just to add to what you have already been told, over 50% of viewers
| > | are still viewing at 800 X 600, so I to use the 760 pixel centered
| > | configuration. That covers over 99% of your viewers.
| > |
| > | Tom J
| > |
| > |
| >
| >
|
|

 

[Tom Pepper Willett]

"It would be worth designing without scroll in my book."

I totally agree.

 

[Murray]

Trevor:

You're welcome. I hope they helped.

 

[Johnny]

==================
June 4, 2005

Murray,

Thanks you so much for such a detailed answer. It has been by far the
best I've received, and I appreciate the time it must have taken you to
respond so thoroughly.

I do have a question aboit some CSS you suggested, quoted below.

body {
font:12px/18px verdana, arial, helvetica, sans-serif;
text-align:center;

I'm unfamiliar with most of CSS anyway, so maybe this is a dumb
question, but how does "font: 12px/18px" work?

Also, can you recommend a URL or two where I can learn CSS from the
ground up? How did you learn?

Thanks again.

--Johnny
==================

 

[Murray]

Inline below -

--
Murray
============

==================
June 4, 2005

Murray,

Thanks you so much for such a detailed answer. It has been by far the
best I've received, and I appreciate the time it must have taken you to
respond so thoroughly.

You're welcome. No doubt, I'll have a chance to use it again.

I do have a question aboit some CSS you suggested, quoted below.


I'm unfamiliar with most of CSS anyway, so maybe this is a dumb
question, but how does "font: 12px/18px" work?

It's shorthand for the following -

font-size: 12px;
line-height: 18px;
font-family: verdana, arial, helvetica, sans-serif

Many of the related styles can be aggregated into a shorthand
representation. Another I use frequently is -

margin:0;
padding:0;

which is shorthand for -

margin-top:0;
margin-right:0;
margin-botton:0;
margin-left:0;

padding-top:0;
padding-right:0;
padding-bottom:0;
padding-left:0;

Also, can you recommend a URL or two where I can learn CSS from the
ground up?

There are some excellent (dreamweaver related tutorials by Adrian Senior at
the Macromedia Developer Center -

http://www.macromedia.com/devnet/mx/dreamweaver/articles/css_bgimages_pt2.html

and there are also excellent ones in other places too - start with
http://www.bignosebird.com, and GOOGLE for others.

How did you learn?

Reading tutorials, trying things, and gradually working first text styling,
then container styling, and finally positioning into my daily methodology.
It took a while, but once the light came on it was much easier.

 

[Murray]

Inline below -

--
Murray
============

==================
June 4, 2005

Murray,

Thanks you so much for such a detailed answer. It has been by far the
best I've received, and I appreciate the time it must have taken you to
respond so thoroughly.

You're welcome. No doubt, I'll have a chance to use it again.

I do have a question aboit some CSS you suggested, quoted below.


I'm unfamiliar with most of CSS anyway, so maybe this is a dumb
question, but how does "font: 12px/18px" work?

It's shorthand for the following -

font-size: 12px;
line-height: 18px;
font-family: verdana, arial, helvetica, sans-serif

Many of the related styles can be aggregated into a shorthand
representation. Another I use frequently is -

margin:0;
padding:0;

which is shorthand for -

margin-top:0;
margin-right:0;
margin-botton:0;
margin-left:0;

padding-top:0;
padding-right:0;
padding-bottom:0;
padding-left:0;

Also, can you recommend a URL or two where I can learn CSS from the
ground up?

There are some excellent (dreamweaver related tutorials by Adrian Senior at
the Macromedia Developer Center -

http://www.macromedia.com/devnet/mx/dreamweaver/articles/css_bgimages_pt2.html

and there are also excellent ones in other places too - start with
http://www.bignosebird.com, and GOOGLE for others.

How did you learn?

Reading tutorials, trying things, and gradually working first text styling,
then container styling, and finally positioning into my daily methodology.
It took a while, but once the light came on it was much easier.

 

[Trevor L.]

A good source for learning CSS is
http://www.w3schools.com/css/default.asp

--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au

==================
June 4, 2005

Murray,

Thanks you so much for such a detailed answer. It has been by far the
best I've received, and I appreciate the time it must have taken you
to respond so thoroughly.

I do have a question aboit some CSS you suggested, quoted below.


I'm unfamiliar with most of CSS anyway, so maybe this is a dumb
question, but how does "font: 12px/18px" work?

Also, can you recommend a URL or two where I can learn CSS from the
ground up? How did you learn?

Thanks again.

--Johnny
==================

I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html