Web Site Resolutions

Discussion in 'HTML' started by SuperK, Feb 19, 2004.

  1. SuperK

    SuperK Guest

    Folks,

    I've tried to Google up some stuff on this topic but couldn't find anything
    good. I'm sure you've seen this question here before, so please be patient.

    Anyway, what would be a good approach for making your web site look good on
    monitors with different resolutions? I know that I can change the tables'
    and cells' width from fixed size to percentages, but that really won't make
    the web site look the same, just take up the space. I know that I could
    capture the resolution with JavaScript but I don't think this is too
    beneficial. Would I be better off being cautions and designing the web site
    for 800 X 600 and center it on the screen? I need some feedback on this
    issue.

    Thanks!

    K
     
    SuperK, Feb 19, 2004
    #1
    1. Advertising

  2. SuperK

    Chris Morris Guest

    "SuperK" <> writes:
    > I've tried to Google up some stuff on this topic but couldn't find anything
    > good. I'm sure you've seen this question here before, so please be patient.


    It's definitely around in the various archives of groups.

    > Anyway, what would be a good approach for making your web site look good on
    > monitors with different resolutions? I know that I can change the tables'
    > and cells' width from fixed size to percentages, but that really won't make
    > the web site look the same, just take up the space. I know that I could


    If you pick the percentages carefully, it should look approximately
    the same as it does now on browser widths in the 700 - 1100 range,
    while not causing too many problems on larger or smaller windows.

    > capture the resolution with JavaScript but I don't think this is too
    > beneficial. Would I be better off being cautions and designing the web site
    > for 800 X 600 and center it on the screen? I need some feedback on this
    > issue.


    You're right that javascript detection isn't a good idea, but in addition:
    - remember that screen resolution and browser window width are
    independent. Today my browser is at 848 pixels wide.

    - 800 pixels isn't that cautious. I've seen various things that
    can't display that wide (lots of handheld devices that are 640
    pixels wide at the most) and others where it's inconvenient (if I
    was running in 800x600 resolution my browser would be at most 700
    pixels wide to leave room for various other applications)

    So, basically, try to design the site so that it doesn't get
    horizontal scrolling until it's unavoidable. You should, with the
    exception of pages with large images, usually [1] be able to get below
    600 pixels this way (remember, if you get it below 500 without
    horizontal scrolling, someone on 1024x768 can see two side-by-side).

    [1] Some designs, maybe not. It depends.

    --
    Chris
     
    Chris Morris, Feb 19, 2004
    #2
    1. Advertising

  3. Quoth the raven named SuperK:

    > Folks,
    >
    > I've tried to Google up some stuff on this topic but couldn't find
    > anything good. I'm sure you've seen this question here before, so
    > please be patient.


    Google for "liquid design"

    > Anyway, what would be a good approach for making your web site look
    > good on monitors with different resolutions? I know that I can
    > change the tables' and cells' width from fixed size to percentages,
    > but that really won't make the web site look the same, just take up
    > the space. I know that I could capture the resolution with
    > JavaScript but I don't think this is too beneficial.


    No, because the resolution of the monitor is not related to the
    browser window size.

    Further, nothing will happen for the ~15% who have no, or disabled,
    JavaScript.

    > Would I be
    > better off being cautions and designing the web site for 800 X 600
    > and center it on the screen? I need some feedback on this issue.


    http://www.allmyfaqs.com/faq.pl?AnySizeDesign
    http://www.ddj.com/documents/s=2684/nam1012432092/index.html

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Feb 19, 2004
    #3
  4. SuperK

    Andy Dingley Guest

    On Thu, 19 Feb 2004 15:17:16 GMT, "SuperK"
    <> wrote:

    >Anyway, what would be a good approach for making your web site look good on
    >monitors with different resolutions?


    Design for a width of around 800 pixels. This is a reasonable size to
    see an image, and a reasonable size for a line of text. Text lines
    any longer than this become hard to read, just because long lines of
    text are hard to read.

    800 pixels wide is the mininum size of screen you're likely to
    encounter. Anyone with 1200+ width is likely to use their browsers
    windowed.

    If you need bigger width (maybe you're a high-res image viewer) then
    don;t be afraid to go bigger.

    Don't assume you only have 600 pixel height, even in an 800 pixel
    width. If they do, then let them scroll. Most web pages are too tall
    to view on any screen and vertical scrolling is much less annoying
    than horizontal scrolling.

    Phones will be connecting through image-resizing gateways, so stop
    worrying about it (but pay attention to the notes below).

    Now stop thinking about window (and especially screen !) size
    altogether. It's just not a useful way to approach the problem. Use
    any JavaScript testing screen sizes and we'll come and break your
    kneecaps.

    Set your font sizes by using em units and _not_ pixels. This allows
    browser-based resizing, which is a valuable accessibility point.

    Use pixels for sizing where you're doing something vitally pixel-based
    to do with your images. For anything and everything else, use ems.
    Don't even think about writing old table-based code with 1x1 blank
    ..gifs.

    Remember that you have a vague idea what size someone's display
    resolution is, but almost no idea how big the physical screen is, or
    how good their eyesight is. I can read "tiny" text in pixel sizes on
    my laptop (a "poor" screen) but I can;t begin to do so on my desktop
    machine, because I have a huge resolution (supposedly a good thing)
    that actually makes the resolution of each pixel harder (display
    sizes grew at a faster rate than display screens).

    Stop trying to treat the web as rigid paper and deal with it as a flow
    problem. There are plenty of approaches to "liquid" design, where you
    simply stop worrying, supply appropriate hints to the important
    things, and then let the browser sort it out. As my browser knows what
    sort of screen it has to work with, and I've also instructed the
    system on how my eyes can resolve my particular screen resolution,
    then it's in a much better position to do it.

    --
    Smert' spamionam
     
    Andy Dingley, Feb 20, 2004
    #4
  5. SuperK

    Steve R. Guest

    Steve R., Feb 20, 2004
    #5
  6. SuperK

    Steve R. Guest

    Steve R., Feb 20, 2004
    #6
  7. SuperK

    Whitecrest Guest

    In article <ahkZb.3551$>, "Steve
    R." <stevie_ritchie(NOSPAM)@hotmail.com> says...
    > > Design for a width of around 800 pixels.

    > No don't.
    > Design for Any Size:
    > http://allmyfaqs.com/faq.pl?AnySizeDesign


    This page falls apart in a small browser window.....

    --
    Whitecrest Entertainment
    www.whitecrestent.com
     
    Whitecrest, Feb 20, 2004
    #7
  8. SuperK

    kchayka Guest

    Whitecrest wrote:

    > In article <ahkZb.3551$>, "Steve
    > R." <stevie_ritchie(NOSPAM)@hotmail.com> says...
    >> > Design for a width of around 800 pixels.

    >> No don't.
    >> Design for Any Size:
    >> http://allmyfaqs.com/faq.pl?AnySizeDesign

    >
    > This page falls apart in a small browser window.....


    Huh? Seems to work fine for me all the way down to ~400px wide, even
    with my larger than average text size.

    --
    Reply address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Feb 20, 2004
    #8
  9. SuperK

    Andy Dingley Guest

    On Fri, 20 Feb 2004 09:17:58 GMT, "Steve R."
    <> wrote:

    >No don't.


    Oh learn to read the whole fucking message, why don't you.
    --
    Smert' spamionam
     
    Andy Dingley, Feb 20, 2004
    #9
  10. SuperK

    kchayka Guest

    Andy Dingley wrote:
    >
    > Design for a width of around 800 pixels. This is a reasonable size to
    > see an image, and a reasonable size for a line of text. Text lines
    > any longer than this become hard to read, just because long lines of
    > text are hard to read.


    The width in pixels has no relationship to the number of characters on a
    line. The units relative to a line of text is em, not px.

    At my larger-than-average text size, 1000px can be just peachy. An
    artificial limit of 800px can actually _cause_ readability problems,
    especially in a multi-columned page where a column is only wide enough
    for a couple words. Sites like this are very tiring to read.

    40-50em is considered an optimal line length for many users, myself
    included.

    Use the right tool for the job, and all that.

    --
    Reply address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Feb 21, 2004
    #10
  11. SuperK

    Paul Furman Guest

    kchayka wrote:
    >
    > 40-50em is considered an optimal line length for many users, myself
    > included.


    30-35 em matches the typical book width that studies say is ideal though
    50 is certainly readable.
     
    Paul Furman, Feb 21, 2004
    #11
  12. SuperK

    kchayka Guest

    Paul Furman wrote:

    > kchayka wrote:
    >>
    >> 40-50em is considered an optimal line length for many users, myself
    >> included.

    >
    > 30-35 em matches the typical book width that studies say is ideal though
    > 50 is certainly readable.


    30em is too short for my tastes, unless there is generally a lack of
    whitespace. Text that takes up the whole screen without any breaks can
    be tough on the eyes regardless of width.

    40em is near perfect to me. The last studies I heard about (don't have
    a link at the moment) was that optimal line length is actually longer
    than previously thought, 80-100 characters. If I find an article that
    supports this I'll post it, but I'm not going to spend time looking for
    one. My own eyes are proof enough for me, and they say 40em is it.

    --
    Reply address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Feb 21, 2004
    #12
  13. Barry Pearson, Feb 21, 2004
    #13
  14. SuperK

    Paul Furman Guest

    kchayka wrote:

    > Paul Furman wrote:
    >
    >
    >>kchayka wrote:
    >>
    >>>40-50em is considered an optimal line length for many users, myself
    >>>included.

    >>
    >>30-35 em matches the typical book width that studies say is ideal though
    >>50 is certainly readable.

    >
    >
    > 30em is too short for my tastes, unless there is generally a lack of
    > whitespace. Text that takes up the whole screen without any breaks can
    > be tough on the eyes regardless of width.
    >
    > 40em is near perfect to me. The last studies I heard about (don't have
    > a link at the moment) was that optimal line length is actually longer
    > than previously thought, 80-100 characters. If I find an article that
    > supports this I'll post it, but I'm not going to spend time looking for
    > one. My own eyes are proof enough for me, and they say 40em is it.


    There seem to be two options:

    The Ergonomic Pragmatist
    http://www.humanfactors.com/downloads/nov02.asp
    "We apply usability engineering to meet specific business objectives.
    [if] the main objective is speed... we use wider text (about 100
    characters wide). If... the objective is satisfaction... we would use a
    shorter width (about 55 characters wide)."

    This one is better with charts and examples:
    http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm
    They say children & people with bad vision prefer short lines, smart
    people prefer long <g>. If the material is difficult to comprehend, it's
    good to use shorter, if it's suitable for speed reading long is better.
     
    Paul Furman, Feb 21, 2004
    #14
  15. SuperK

    kchayka Guest

    Paul Furman wrote:
    >
    > http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm
    > They say children & people with bad vision prefer short lines, smart
    > people prefer long <g>.


    It then follows that I must be smart. woo hoo! :-D

    --
    Reply address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Feb 22, 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. Joe Bonavita

    form size with different client resolutions

    Joe Bonavita, Dec 19, 2003, in forum: ASP .Net
    Replies:
    5
    Views:
    460
    Joe Bonavita
    Dec 23, 2003
  2. Bluetears76
    Replies:
    1
    Views:
    1,019
    Larry Barowski
    Jul 1, 2004
  3. steve
    Replies:
    2
    Views:
    361
    steve
    Apr 14, 2006
  4. Sebastian Sowa

    screen resolutions

    Sebastian Sowa, Jul 3, 2003, in forum: HTML
    Replies:
    31
    Views:
    1,180
    Isofarro
    Jul 5, 2003
  5. Bruce Chastain
    Replies:
    6
    Views:
    425
    Bruce Chastain
    Oct 27, 2003
Loading...

Share This Page