Critique CSS layout (issues addressed)

Discussion in 'HTML' started by lime, Nov 15, 2004.

  1. lime

    lime Guest

    I have addressed most of the issues listed in the responses to my last post
    "Critique CSS layout (1st go - fingers crossed)". I'm rapt with the progress
    I have made, thanks to all for your past critiques.

    http://www.limelightstudio.com.au/iss/8/

    The issues addressed:

    - Nav uses <li> now
    - No horizontal scroll in IE6 at 850-900 pixels
    - Nav area not fixed, fluid now
    - Added <h#> markup to replace <div>
    - Changed CAPS
    - Darker body text
    - Changed footer layout & colour
    - Made nav links different on hover
    - Mis-alignment of banner in Opera

    It's amazing how much easier CSS layout is when using the correct <h#>
    markup....

    Note: Links don't go anywhere. Font size has remained the same.
     
    lime, Nov 15, 2004
    #1
    1. Advertising

  2. lime

    rf Guest

    lime wrote:

    > http://www.limelightstudio.com.au/iss/8/


    Why do you waste about 20% if my canvas, on the right hand side. Surely the
    text could wrap near the right hand side of my window?

    --
    Cheers
    Richard.
     
    rf, Nov 15, 2004
    #2
    1. Advertising

  3. "rf" <rf@.invalid> wrote:

    > lime wrote:
    >
    >> http://www.limelightstudio.com.au/iss/8/

    >
    > Why do you waste about 20% if my canvas, on the right hand side. Surely the
    > text could wrap near the right hand side of my window?


    Limiting the length of a line is not unreasonable. Depending of the
    size of the font, the outline of the font, the line height, the
    inter-word spacing and the font-stretch, there is a point when lines
    get too long for good readability.

    You won't find a text printed with a 8pt ultra-condensed font with 1ex
    line height on A4 landscape very readable, won't you?

    Whether the line width chosen by lime is sensible, is
    debatable. First of all, it is not dependant on the font
    size. Someone with bad eyesight, who has overridden the font sizes to
    something larger, will find it to short.

    A better way would be something in the lines of
    http://www.uni-koeln.de/~agr30/iss/limelightstudio.com.auiss8.html

    (tested in Opera and Firefox). You can zoom in and out without
    destroying to layout (ctrl + Num+ and Num- in Firefox). Maybe lime can
    consider something in these lines and reconsider to not touch the
    fontsize for the content. Using s smaller size for things like the
    page footer is OK, IMHO.

    I too find many websites having too small a fontsize. Thanks god,
    Opera allows to set a minimum fontsize that can not be overridden by
    css (mine is set to 14px, which is also the 100% fontsize I configured).

    Bye,
    Martin
     
    Martin Bialasinski, Nov 15, 2004
    #3
  4. On Mon, 15 Nov 2004 12:32:43 GMT, rf <rf@.invalid> wrote:

    > lime wrote:
    >
    >> http://www.limelightstudio.com.au/iss/8/

    >
    > Why do you waste about 20% if my canvas, on the right hand side. Surely
    > the text could wrap near the right hand side of my window?


    Easy reading? I don't mind at all. Depends a lot on your window size I
    suppose, but full length text isn't always a good thing...

    Maybe adding:

    min-width: 30em;

    to the rules for #mmhidemiddlebox might be nice.

    --
    Rijk van Geijtenbeek

    The Web is a procrastination apparatus:
    It can absorb as much time as is required to ensure that you
    won't get any real work done. - J.Nielsen
     
    Rijk van Geijtenbeek, Nov 15, 2004
    #4
  5. lime

    lime Guest

    "rf" wrote in message ...
    > lime wrote:
    >
    >> http://www.limelightstudio.com.au/iss/8/

    >
    > Why do you waste about 20% if my canvas, on the right hand side. Surely
    > the
    > text could wrap near the right hand side of my window?


    For you it may be wastage (such a pessimist aren't you ;o)) for me it was
    limiting the length of text for readability.
     
    lime, Nov 15, 2004
    #5
  6. lime

    lime Guest

    "Martin Bialasinski" wrote in message ...
    >> lime wrote:
    >>
    >>> http://www.limelightstudio.com.au/iss/8/

    >>

    > A better way would be something in the lines of
    > http://www.uni-koeln.de/~agr30/iss/limelightstudio.com.auiss8.html
    >
    > (tested in Opera and Firefox). You can zoom in and out without
    > destroying to layout (ctrl + Num+ and Num- in Firefox). Maybe lime can
    > consider something in these lines and reconsider to not touch the
    > fontsize for the content. Using s smaller size for things like the
    > page footer is OK, IMHO.


    Hi Martin, thanks for your effort. I've saved the CSS you've created to have
    a more detailed look later on to learn what you have done there.

    I agree about the footer text - leaving that smaller and I will do a version
    with 100% body text too.

    > I too find many websites having too small a fontsize. Thanks god,
    > Opera allows to set a minimum fontsize that can not be overridden by
    > css (mine is set to 14px, which is also the 100% fontsize I configured).
    >
    > Bye,
    > Martin
     
    lime, Nov 15, 2004
    #6
  7. lime

    lime Guest

    "Rijk van Geijtenbeek" wrote in message...
    > rf wrote:
    >
    >> lime wrote:
    >>
    >>> http://www.limelightstudio.com.au/iss/8/

    >>
    >> Why do you waste about 20% if my canvas, on the right hand side. Surely
    >> the text could wrap near the right hand side of my window?

    >
    > Easy reading? I don't mind at all. Depends a lot on your window size I
    > suppose, but full length text isn't always a good thing...
    >
    > Maybe adding:
    >
    > min-width: 30em;
    >
    > to the rules for #mmhidemiddlebox might be nice.


    I will give that a go as well (I think that's what Martin did in his version
    of the page too)
     
    lime, Nov 15, 2004
    #7
  8. lime

    kchayka Guest

    lime wrote:
    > "rf" wrote in message ...
    >> lime wrote:
    >>
    >>> http://www.limelightstudio.com.au/iss/8/

    >>
    >> Why do you waste about 20% if my canvas, on the right hand side.

    >
    > For you it may be wastage (such a pessimist aren't you ;o)) for me it was
    > limiting the length of text for readability.


    You must be assuming a certain window size and/or text size. Don't.

    With smaller windows, 60% width for the content area can make for
    too-short lines of text, which is also a readability problem. Ditto with
    larger text sizes. BTW, your body text size is still much too small.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Nov 16, 2004
    #8
  9. lime

    Neal Guest

    lime wrote:
    > "rf" wrote
    >> Why do you waste about 20% if my canvas, on the right hand side.

    > For you it may be wastage ... for me it was
    > limiting the length of text for readability.


    Ok. How about your user. What's their viewport size? Hmm?

    Answer: You dunno.

    So what?
     
    Neal, Nov 16, 2004
    #9
  10. lime

    lime Guest

    "kchayka" wrote in message ...
    > lime wrote:
    >> "rf" wrote in message ...
    >>> lime wrote:
    >>>
    >>>> http://www.limelightstudio.com.au/iss/8/
    >>>
    >>> Why do you waste about 20% if my canvas, on the right hand side.

    >>
    >> For you it may be wastage (such a pessimist aren't you ;o)) for me it was
    >> limiting the length of text for readability.

    >
    > You must be assuming a certain window size and/or text size. Don't.
    >
    > With smaller windows, 60% width for the content area can make for
    > too-short lines of text, which is also a readability problem. Ditto with
    > larger text sizes. BTW, your body text size is still much too small.



    True - you have a point.
     
    lime, Nov 16, 2004
    #10
  11. lime

    lime Guest

    "Neal" wrote in message :
    > lime wrote:
    >> "rf" wrote
    >>> Why do you waste about 20% if my canvas, on the right hand side.

    >> For you it may be wastage ... for me it was
    >> limiting the length of text for readability.

    >
    > Ok. How about your user. What's their viewport size? Hmm?
    >
    > Answer: You dunno.


    True.

    >
    > So what?


    put it back to normal...
     
    lime, Nov 16, 2004
    #11
  12. lime

    Chris Beall Guest

    lime wrote:

    > For you it may be wastage (such a pessimist aren't you ;o)) for me it was
    > limiting the length of text for readability.


    Here's a quote on the subject:

    "Line length
    The recommended number of characters in a
    line does not vary between the medium of
    paper and screen, however. A range of 65–75
    characters per line is a comfortable maximum
    for a single column of text in print, with a
    range of 30-40 characters per line common in
    multicolumn layouts. The reason for this maximum
    is based on the characteristics of our
    visual system. We scan a line of text in groups
    of letters, first picking up the exterior shapes of
    word groups, then decoding words as our eye
    bounces along from left to right. The sweeping
    motion of turning our eye back to the left
    becomes increasingly difficult as the line gets
    longer. Our ability to pick the start of the next
    line is decreased by combinations of long lines,
    tight line spacing, and lack of white space on
    the left-hand margin."

    This is from
    http://www.kahnplus.com/download/pdf/uitype_interactions.pdf, which has
    lots of discussion of text presentation considerations.

    Another rule of thumb I vaguely recall is that line length in any given
    font should not exceed the length of the combined upper and lower case
    alphabet in that font.

    In either case, you have to express the desired max-width in terms of
    ems, so that it will scale with the choice of font and font size. And
    the results will vary a bit depending on which font is actually used by
    the browser. Max-width: 30em seems to come pretty close for most cases
    I tested.

    And, of course, the browser has to support max-width...

    Chris Beall
     
    Chris Beall, Nov 16, 2004
    #12
  13. *Chris Beall* <>:
    >
    > In either case, you have to express the desired max-width in terms of
    > ems, so that it will scale with the choice of font and font size.


    'ex' should be even more appropriate.

    > Max-width: 30em seems to come pretty close for most cases


    Although it comes often close to the traditional recommendation, it's too
    narrow, because scrolling is also a (negative) factor, that doesn't have
    to be considered in paged media, where it's easier to find the next first
    word of a page or column.

    --
    "The squeaking wheel doesn't always get the grease.
    Sometimes it gets replaced."
    Vic Gold
     
    Christoph Paeper, Nov 17, 2004
    #13
  14. lime

    Chris Beall Guest

    Christoph Paeper wrote:
    (snip)
    > 'ex' should be even more appropriate.


    Agreed. That might resolve a problem I had with a couple of the fonts I
    tested. 'ex' hasn't been brought up much here; I had to go look it up.

    >> Max-width: 30em seems to come pretty close for most cases

    >
    >
    > Although it comes often close to the traditional recommendation, it's
    > too narrow, because scrolling is also a (negative) factor, that doesn't
    > have to be considered in paged media, where it's easier to find the
    > next first word of a page or column.


    We're into a very subjective area here. I see two conflicting goals.
    To minimize the NEED for vertical scrolling, we want the longest
    possible line length, so as to get as much text as possible 'above the
    fold', but once scrolling is required, we've aggravated the normal
    printed-media situation, since all of our visual reference points will
    jump during the scroll, giving our visual system a real challenge to
    keep its place. That would argue for shorter-than-print-media lines.

    Since we can't control the window or font size, I'd vote for assuming
    that we have little control over what stays above the fold and thus
    should assume vertical scrolling WILL be needed and thus opt for short
    line lengths. But that's my abstract opinion. In any given case I'd
    want to look at the page in totality to see what works best (under a
    wide variety of conditions).

    30em or about 65ex seems like a good starting point.

    Chris Beall
     
    Chris Beall, Nov 17, 2004
    #14
  15. On Wed, 17 Nov 2004 04:00:12 GMT, Chris Beall <>
    wrote:

    >Christoph Paeper wrote:
    >(snip)
    >> 'ex' should be even more appropriate.

    >
    >Agreed. That might resolve a problem I had with a couple of the fonts I
    >tested. 'ex' hasn't been brought up much here; I had to go look it up.


    Not agreed. I spent sometime investigating this and came to the
    conclusion that ex was no improvement at all. It might be for some
    specific fonts, but worse for other fonts - and for most browsers it
    just seems irrelevant anyway. See
    http://www.xs4all.nl/~sbpoley/webmatters/emex.html


    --
    Stephen Poley

    http://www.xs4all.nl/~sbpoley/webmatters/
     
    Stephen Poley, Nov 17, 2004
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    781
    clintonG
    Dec 24, 2004
  2. lime
    Replies:
    47
    Views:
    1,116
    Uncle Pirate
    Nov 17, 2004
  3. Replies:
    1
    Views:
    643
    John Timney \(MVP\)
    Jun 19, 2006
  4. Nik Coughlin
    Replies:
    21
    Views:
    885
    Andy Dingley
    Nov 9, 2007
  5. Nik Coughlin
    Replies:
    0
    Views:
    367
    Nik Coughlin
    Nov 8, 2007
Loading...

Share This Page