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

[Michael Stemper]

In article <6c***************************@EVERESTKC.NET>, Johnny writes:

I have a whole lot of questions that all have to do with the same topic:
Width.
A good starting point would be to read
<http://www.xs4all.nl/~sbpoley/webmatters/flexdesign.html>
By "width" I mean how wide a particular Web page is,
A web page is as wide as the portion of the browser window that displays
it. You can do some work to try to make your page wider than that, but
all that will happen is that you'll inconvenience your visitor.
how wide a table
is, how wide a particular cell or column is,
If you allow the browser to do the rendering, and you worry about the
content, the answer to each of these will be "as wide as it needs to be".
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.
The simplest way to ensure this is, by happy circumstance, the way that
requires the least amount of work on your part. Don't try to control
how wide things are, don't try to over-ride the settings that your
visitors have chosen as friendliest for 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?
Your question's unclear. You control how text looks by selecting a
font-family (preferably with CSS). That has nothing to do with which
size setting a visitor chooses. If you select "Times New Roman", that
determines how it looks. Then, the visitor uses "Increase" or "Decrease"
to match their viewing environment. That determines how big things are.
--(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?
Let the text flow to fit their window. Don't try to constrain it.
--(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?
Not if you don't try to control sizes, widths, et cetera.
--(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?
Ditto.
(2) WHAT I CAN CONTROL. I as the Web site author have an even larger
number of choices that affect width,
Not that many, really.
--(a) For the widths of tables, cells and columns I can choose percent
or pixels (or neither). How do I decide?
Don't. Let the tables size themselves based upon the data that's in them.
--(b) When is it preferable to use css and when to use regular html
tags?
Use HTML to provide content and information about it, such as whether
some text should be emphasized, or is an ordered list. Use CSS to suggest
how various classes of items should be presented.
Is there any reason to use css to apply, say, bold or italic or
underline?
Yes. It separates your content from the presentation suggestions. This
makes for cleaner, faster-downloading, more readily maintained pages.
Is there any reason not to?
No.
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?
You don't *control* anything. You make suggestions about how things
might look. But, CSS is the appropriate way to do so.
--(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?
Use EM or %. Don't make anything smaller than 1 EM or 100%, except for
disclaimers or copyright notices. This way, every viewer will get the
information displayed with their customary text size.
(I use Front Page
2003 on Win XP.)
Not relevant. What's relevant is the fact that your visitors will be using
many browsers, running on many OSes and on many different hardware platforms,
as you previously noted.
How do I decide between CSS and HTML (or some other
method)?
Use each for what it's for. Use CSS to suggest presentation, use HTML
to provide structural descriptions of your content.
--(e) What is the optimum width for the content of the site?
The width of the portion of the user's browser window that's dedicated
to displaying content.
I use 736
pixels, but I can't remember why now.
Sounds like a random number to me. :->
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?

<http://www.xs4all.nl/~sbpoley/webmatters/flexdesign.html>

Hope this helps.
--
Michael F. Stemper
#include <Standard_Disclaimer>
Always use apostrophe's and "quotation marks" properly.

[kchayka]

Johnny wrote:

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.

Indeed, you are not. If you search the google newsgroup archives, you
can get your own answers to just about all your questions. These topics
come up on a regular basis. Many of us are tired of hashing over them ad
nauseam.

<URL:http://groups.google.com/>

BTW, one URL you should see come up repeatedly is:
<URL:http://www.allmyfaqs.com/faq.pl?AnySizeDesign>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[johnSteve]

On Thu, 2 Jun 2005 11:44:35 -0500, "Johnny" <ba*******@hotmail.com>
wrote:

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

snipped

Decide what is the minimum that you want people to see. Then expand
from there.
the goal is to get them to expand the page.

This is why the top left corner of any webpage is so important

cheers
johnSteve

[Alan J. Flavell]

On Thu, 2 Jun 2005, Michael Stemper wrote:

how wide a table
is, how wide a particular cell or column is,
If you allow the browser to do the rendering, and you worry about
the content, the answer to each of these will be "as wide as it
needs to be".

This is certainly a good starting point, and I agree will often prove
to a fine choice.

However, if you *know* how wide some of the columns are (e.g if one
column always contains 4 digits, whatever) then it can be useful to
specify the cell width of those specific columns, to avoid the browser
allocating too much space to it and maybe cramping the width of some
other column. Specify that kind of width in em units, logically.

Leave the browser to distribute the remaining space amongst the other
columns, as you say.

Specifying a table cell width in CSS can be a bit of a chore, since
the <td> and <th> elements are not children of the <col>. So it looks
like putting a class on every affected <td> and <th> and styling that.
Let the text flow to fit their window. Don't try to constrain it.

Indeed.

[David Ross]

First of all, use pixels only for graphics that must be seen
full-sized. Otherwise (including graphics that can be displayed
reduced in size), use percentages. This uses the percentage of
available width, based on other elements in the same horizontal
space and on the size of the window (per the user's choice).

In a table, explicitly specify widths only if it is necessary to
constrain the width of a column in order to allow more space for
other columns.

See <URL:http://www.anybrowser.org/campaign/abdesign2.html>. Pay
special attention to the headers "Tables" and "Screen Size".

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.

[Lachlan Hunt]

Alan J. Flavell wrote:

Specifying a table cell width in CSS can be a bit of a chore, since
the <td> and <th> elements are not children of the <col>. So it looks
like putting a class on every affected <td> and <th> and styling that.

Why not just style the col (or colgroup) element itself, rather than
adding superfluous class attributes everywhere, since 'width' is one of
the few styles that can be applied to table columns?

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox

[Alan J. Flavell]

On Sun, 5 Jun 2005, Lachlan Hunt wrote:

Alan J. Flavell wrote:

Specifying a table cell width in CSS can be a bit of a chore,
since the <td> and <th> elements are not children of the <col>.
So it looks like putting a class on every affected <td> and <th>
and styling that.

Why not just style the col (or colgroup) element itself, rather than
adding superfluous class attributes everywhere, since 'width' is one
of the few styles that can be applied to table columns?

I think you caught me on a bad day. What I said:

| the <td> and <th> elements are not children of the <col>

was not wrong, but in this respect I seem to have used it to support
the wrong conclusion. Sorry.