Big questions about WIDTH

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Johnny

    Big questions about WIDTH

    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
    barelybad, stuff, fun pix, stuff, crossword, crosswords, flag-desecration, first amendment, frees speech, habitat, habitat for humanity, odd poetry, 20 questions, free surgery, irc, Mensa, IRC, Will Shortz, Shortz



  • Michael Stemper

    #2
    Re: Big questions about WIDTH

    In article <6c492$429f377e $407e5bd5$12943 @EVERESTKC.NET> , Johnny writes:
    [color=blue]
    >I have a whole lot of questions that all have to do with the same topic:
    >Width.[/color]

    A good starting point would be to read
    <http://www.xs4all.nl/~sbpoley/webmatters/flexdesign.html >
    [color=blue]
    >By "width" I mean how wide a particular Web page is,[/color]

    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.
    [color=blue]
    > how wide a table
    >is, how wide a particular cell or column is,[/color]

    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".
    [color=blue]
    >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.[/color]

    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.

    [color=blue]
    >--(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?[/color]

    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.
    [color=blue]
    >--(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?[/color]

    Let the text flow to fit their window. Don't try to constrain it.
    [color=blue]
    >--(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?[/color]

    Not if you don't try to control sizes, widths, et cetera.
    [color=blue]
    >--(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?[/color]

    Ditto.
    [color=blue]
    >(2) WHAT I CAN CONTROL. I as the Web site author have an even larger
    >number of choices that affect width,[/color]

    Not that many, really.
    [color=blue]
    >--(a) For the widths of tables, cells and columns I can choose percent
    >or pixels (or neither). How do I decide?[/color]

    Don't. Let the tables size themselves based upon the data that's in them.
    [color=blue]
    >--(b) When is it preferable to use css and when to use regular html
    >tags?[/color]

    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.
    [color=blue]
    > Is there any reason to use css to apply, say, bold or italic or
    >underline?[/color]

    Yes. It separates your content from the presentation suggestions. This
    makes for cleaner, faster-downloading, more readily maintained pages.
    [color=blue]
    > Is there any reason not to?[/color]

    No.
    [color=blue]
    > What about using CSS rather
    >than HTML to control more complicated elements such as all the
    >characteristic s of a table or the appearance of an entire form?[/color]

    You don't *control* anything. You make suggestions about how things
    might look. But, CSS is the appropriate way to do so.
    [color=blue]
    >--(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?[/color]

    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.
    [color=blue]
    > (I use Front Page
    >2003 on Win XP.)[/color]

    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.
    [color=blue]
    > How do I decide between CSS and HTML (or some other
    >method)?[/color]

    Use each for what it's for. Use CSS to suggest presentation, use HTML
    to provide structural descriptions of your content.
    [color=blue]
    >--(e) What is the optimum width for the content of the site?[/color]

    The width of the portion of the user's browser window that's dedicated
    to displaying content.
    [color=blue]
    > I use 736
    >pixels, but I can't remember why now.[/color]

    Sounds like a random number to me. :->
    [color=blue]
    >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?[/color]

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

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

    Comment

    • kchayka

      #3
      Re: Big questions about WIDTH

      Johnny wrote:[color=blue]
      >
      > 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.[/color]

      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.c om/>

      BTW, one URL you should see come up repeatedly is:
      <URL:http://www.allmyfaqs.c om/faq.pl?AnySizeD esign>

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

      Comment

      • johnSteve

        #4
        Re: Big questions about WIDTH

        On Thu, 2 Jun 2005 11:44:35 -0500, "Johnny" <barelybad@hotm ail.com>
        wrote:
        [color=blue]
        >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[/color]
        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

        Comment

        • Alan J. Flavell

          #5
          Re: Big questions about WIDTH

          On Thu, 2 Jun 2005, Michael Stemper wrote:
          [color=blue][color=green]
          > > how wide a table
          > >is, how wide a particular cell or column is,[/color]
          >
          > 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".[/color]

          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.
          [color=blue]
          > Let the text flow to fit their window. Don't try to constrain it.[/color]

          Indeed.

          Comment

          • David Ross

            #6
            Re: Big questions about WIDTH

            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/>.

            Comment

            • Lachlan Hunt

              #7
              Re: Big questions about WIDTH

              Alan J. Flavell wrote:[color=blue]
              > 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.[/color]

              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://GetFirefox.com/ Rediscover the Web
              http://GetThunderbird.com/ Reclaim your Inbox

              Comment

              • Alan J. Flavell

                #8
                Re: Big questions about WIDTH

                On Sun, 5 Jun 2005, Lachlan Hunt wrote:
                [color=blue]
                > Alan J. Flavell wrote:[/color]
                [color=blue][color=green]
                > > 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.[/color]
                >
                > 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?[/color]

                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.

                Comment

                Working...