Different screen resolutions

Discussion in 'HTML' started by Guest, Nov 12, 2004.

  1. Guest

    Guest Guest

    The few sites I've designed have been "optimized" for an 800 * 600 display.
    Some of them have a graphic banner at the top, usually 800 px wide. How do
    the experienced ones here handle the layout for people who may view the site
    at 1024 or greater? i.e. do you centre the graphic and accept white space on
    either side, put in a table with a coloured cell background that "reveals"
    itself at higher rez, design multiple sites for different rez, avoid the
    problem by not using size-specific graphics. . .

    Opinions and ideas?

    M
    Guest, Nov 12, 2004
    #1
    1. Advertising

  2. <M wrote:

    > The few sites I've designed have been "optimized" for an 800 * 600
    > display.


    http://www.allmyfaqs.com/faq.pl?AnySizeDesign

    > Some of them have a graphic banner at the top, usually 800 px
    > wide. How do the experienced ones here handle the layout for people who
    > may view the site at 1024 or greater?


    I tend to use two background images, one on a child element of the other.
    The parent element has a horizontally tiling image that lines up with a
    non-repeating left or right aligned background image on the child. The
    transition is fairly smooth, it would probably be better if I were more
    expert with graphics utilities.

    > put in a table


    http://www.allmyfaqs.com/faq.pl?Tableless_layouts

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
    David Dorward, Nov 12, 2004
    #2
    1. Advertising

  3. Guest

    Dave Patton Guest

    "<<M>>" <> wrote in
    news:TJbld.96601$VA5.42500@clgrps13:

    > The few sites I've designed have been "optimized" for an 800 * 600
    > display. Some of them have a graphic banner at the top, usually 800 px
    > wide.


    In other words, even for your 'target audience', running their
    desktops at 800x600, you intend to force horizontal scrollbars
    on them? The browser viewport in a maximized browser, on a system
    with a desktop of 800x600, will almost never be 800 pixels wide.

    > How do the experienced ones here handle the layout


    Fluid design.

    --
    Dave Patton
    Canadian Coordinator, Degree Confluence Project
    http://www.confluence.org/
    My website: http://members.shaw.ca/davepatton/
    Dave Patton, Nov 13, 2004
    #3
  4. Guest

    brucie Guest

    In alt.html <<M>> said:

    > The few sites I've designed have been "optimized" for an 800 * 600 display.


    http://allmyfaqs.com/faq.pl?AnySizeDesign


    --
    the facts and opinions expressed by brucies
    l i t t l e v o i c e s
    are not necessarily the same as those held by brucie.
    brucie, Nov 13, 2004
    #4
  5. Guest

    Guest Guest

    "Dave Patton" <> wrote in message
    news:Xns959FA44F88168mrzaphoddirectcaold@24.71.223.159...
    > "<<M>>" <> wrote in
    > news:TJbld.96601$VA5.42500@clgrps13:
    >
    > > The few sites I've designed have been "optimized" for an 800 * 600
    > > display. Some of them have a graphic banner at the top, usually 800 px
    > > wide.

    >
    > In other words, even for your 'target audience', running their
    > desktops at 800x600, you intend to force horizontal scrollbars
    > on them? The browser viewport in a maximized browser, on a system
    > with a desktop of 800x600, will almost never be 800 pixels wide.


    Gosh thanks for that info. Not relevant to my question but I get what
    you're saying. I should have been more explicit -- my banner is optimized
    for an 800 px screen, not actually that wide.

    > Fluid design.


    Every ng has to have its share of useless goofs and I guess you're one of
    them for this ng.
    I'm looking for experienced guidance and I get "fluid design" from you.
    I think I can safely strike you from my list of helpful resources here.


    M
    Guest, Nov 13, 2004
    #5
  6. Guest

    Guest Guest

    "brucie" <> wrote in message
    news:...
    > In alt.html <<M>> said:
    > http://allmyfaqs.com/faq.pl?AnySizeDesign


    Thanks for the info. It'll take me sometime to work through the material.

    My problem is that when I render my page layout with CSS, not everyone sees
    it correctly in their browsers. From my -- admittedly limited -- research on
    CSS text formatting appears consistent across browsers, but there are
    differences in how layout elements are rendered between different browsers
    and even between different browser versions. Otherwise, I'd love to use CSS
    totally. (You can refer to my earlier post in this ng for a specific example
    of a page I tried with CSS. My IE6 and Firefox on Win98SE render it
    perfectly. Others using IE6 on XP see it jumbled as do some Mac user friends
    of mine.)

    Even then CSS doesn't solve the banner graphic issue as I understand it. At
    a different resolution the banner won't change size to match so that leaves
    me with the same problem. Do I "float" the graphic so that it re-positions
    at higher rez, or do I fix it absolutely? And when the screen resizes, what
    do I do with the extra "real estate" across the screen?

    Right now I essentially use variations of David's solution above but was
    wondering if anyone had a different take on the matter. I've seen the odd
    sight that has a link for different resolutions where graphics are resized
    accordingly but that's an ungainly solution to me.

    M
    Guest, Nov 13, 2004
    #6
  7. In article <0Odld.149309$df2.132560@edtnps89>, "<<M>>"
    <> wrote:

    > Every ng has to have its share of useless goofs and I guess you're one of
    > them for this ng.


    Oh, Hell no!

    > I'm looking for experienced guidance and I get "fluid design" from you.


    The experienced posters in this newsgroup just keep pushing it. Can't
    fathom why.

    > I think I can safely strike you from my list of helpful resources here.


    Now you'll get the goofs.

    leo

    --
    <http://web0.greatbasin.net/~leo/>
    Leonard Blaisdell, Nov 13, 2004
    #7
  8. Guest

    C A Upsdell Guest

    "<<M>>" <> wrote in message
    news:0Odld.149309$df2.132560@edtnps89...
    > "Dave Patton" <> wrote in message
    > news:Xns959FA44F88168mrzaphoddirectcaold@24.71.223.159...
    >> "<<M>>" <> wrote in
    >> news:TJbld.96601$VA5.42500@clgrps13:
    >>
    >> > The few sites I've designed have been "optimized" for an 800 * 600
    >> > display. Some of them have a graphic banner at the top, usually 800 px
    >> > wide.

    >>
    >> In other words, even for your 'target audience', running their
    >> desktops at 800x600, you intend to force horizontal scrollbars
    >> on them? The browser viewport in a maximized browser, on a system
    >> with a desktop of 800x600, will almost never be 800 pixels wide.

    >
    > Gosh thanks for that info. Not relevant to my question but I get what
    > you're saying. I should have been more explicit -- my banner is optimized
    > for an 800 px screen, not actually that wide.
    >
    >> Fluid design.

    >
    > Every ng has to have its share of useless goofs and I guess you're one of
    > them for this ng.
    > I'm looking for experienced guidance and I get "fluid design" from you.
    > I think I can safely strike you from my list of helpful resources here.


    Fluid design was excellent advice. Ignore it at your peril.
    C A Upsdell, Nov 13, 2004
    #8
  9. Guest

    Lois Guest

    "<<M>>" wrote in part:
    : Even then CSS doesn't solve the banner graphic issue as I
    understand it. At
    : a different resolution the banner won't change size to match so
    that leaves
    : me with the same problem. Do I "float" the graphic so that it
    re-positions
    : at higher rez, or do I fix it absolutely? And when the screen
    resizes, what
    : do I do with the extra "real estate" across the screen?

    Maybe the banner can be fluid too to a degree. A URL to the page
    would help.

    I have a sort of fluid header at www.wordsweave.com. The main image
    is left-aligned, and a secondary one fills the rest of the space,
    whatever that is. Would something like that work for you?

    Lois
    Lois, Nov 13, 2004
    #9
  10. Guest

    Toby Inkster Guest

    <<M>> wrote:

    > How do the experienced ones here handle the layout for people who may
    > view the site at 1024 or greater?


    By creating websites that are canvas-size-agnostic.

    http://hardcandy.org/
    Looks fine at 544x372 (WebTV size) and looks fine at 1600x1200 and even
    higher.

    It's really not hard. An HTML page is fluid "by default" -- the only
    things that can stop it being fluid are design decisions made by the
    author -- in particular when setting widths.

    If you want your page to remain fluid, think carefully before making
    design decisions -- especially ones regarding widths. When you're about to
    set a width, think:

    - Do I need to specify a width at all? Can I leave out the width
    entirely and let the user's browser calculate the best width?

    - If I do need to specify a width, can I specify it in percentage
    terms instead of an absolute width?

    - If I can't specify a width in percentage terms, can I at least
    specify the width in em units instead of pixels, so to help the
    page adjust to user font-size changes?

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Nov 13, 2004
    #10
  11. If you want a banner to span the screen at any screen res, one great method is
    to design it so it can be split up into sections with spacers that increase
    their width as the browser size does.

    For instance if the banner was originally one single image layout like...

    [photo][logo][photo]

    and that worked on 800x600, you would then split the image and insert spacers
    with the width set at 100% on them.

    [photo][spacer][logo][spacer][photo]

    This clearly will not work with just any banner design though, but if you start
    from scratch you can design something that works.

    Here's code for it that will work. Just change the TD width where necessary to
    your images width. Also IMG height of the spacers...

    <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%><TR><TD WIDTH=8><IMG
    SRC=image1.gif></TD><TD><IMG SRC=spacer.gif HEIGHT=8 WIDTH=100%></TD><TD
    WIDTH=8><IMG SRC=image2.gif></TD><TD><IMG SRC=spacer.gif HEIGHT=8
    WIDTH=100%></TD><TD WIDTH=8><IMG SRC=image3.gif></TD></TR></TABLE>

    If you find that the specers are creating way too much space, you could do
    something like...

    [photo][logo][photo][spacer][photo?]
    Matthew Superstar Swass, Nov 13, 2004
    #11
  12. Guest

    brucie Guest

    In alt.html Matthew Superstar Swass said:

    > <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%><TR><TD WIDTH=8><IMG
    > SRC=image1.gif></TD><TD><IMG SRC=spacer.gif HEIGHT=8 WIDTH=100%>


    what a pile of shit.

    --
    the facts and opinions expressed by brucies
    l i t t l e v o i c e s
    are not necessarily the same as those held by brucie.
    brucie, Nov 13, 2004
    #12
  13. <<M>> enlightened us with:
    > My problem is that when I render my page layout with CSS, not
    > everyone sees it correctly in their browsers.


    Make sure you acknowledge the difference between "not correct" and
    "just a bit different".

    > From my -- admittedly limited -- research on CSS text formatting
    > appears consistent across browsers, but there are differences in how
    > layout elements are rendered between different browsers and even
    > between different browser versions.


    That shouldn't be a problem. That's only an issue if you want your
    page to look to-the-pixel exactly the same as your design. That is
    something impossible - if you want that, design for paper and not for
    the web.

    Sybren
    --
    The problem with the world is stupidity. Not saying there should be a
    capital punishment for stupidity, but why don't we just take the
    safety labels off of everything and let the problem solve itself?
    Sybren Stuvel, Nov 13, 2004
    #13
  14. Guest

    Karl Core Guest

    "Matthew Superstar Swass" <> wrote in message
    news:...

    > Here's code for it that will work. Just change the TD width where
    > necessary to
    > your images width. Also IMG height of the spacers...
    >
    > <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%><TR><TD
    > WIDTH=8><IMG


    Please refrain from ever giving HTML advice again.

    -Karl
    Karl Core, Nov 13, 2004
    #14
  15. Guest

    Guest Guest

    "Sybren Stuvel" <> wrote in message
    news:...
    > Make sure you acknowledge the difference between "not correct" and
    > "just a bit different".


    No this was grossly scrambled.. The text and the banner all wound up jammed
    together at the top of the page. It's bizarre because it looked fine on my
    version of IE6 on Win98. (Looked fine in my Firefox too). Another reported
    it looked fine on her system too. However, my friend's IE6 / XP combo
    scrambled it. Bad enough to worry about different browsers, different
    version numbers of the same browser but now we gotta worry about the OS
    too?! (BTW, several mbrs here reported it looked fine on their various
    versions of Opera, Mozilla, etc but others reported it looking scrambled on
    their IE6 as well.)

    One of the other members here pointed me off to several articles in an
    effort to be genuinely helpful. One such article described the incredible
    convolutions one Webmaster went through to ensure his 100% CSS site was
    compatible with the most popular browsers out there. It involved
    Javascript-sniffing, multiple CSS sheets, tweaks, etc. It did nothing to
    sell me on the virtues of using CSS for layout. CSS is supposed to be easy
    and seems to be anything but. :)

    M
    Guest, Nov 13, 2004
    #15
  16. Guest

    Guest Guest

    "Lois" <> wrote in message
    news:0cild.41$...
    > "<<M>>" wrote in part:
    > I have a sort of fluid header at www.wordsweave.com. The main image
    > is left-aligned, and a secondary one fills the rest of the space,
    > whatever that is. Would something like that work for you?


    That seems to be the common answer and the one I had thought of myself. I
    will probably go with something like that. Thanks.

    M
    Guest, Nov 13, 2004
    #16
  17. Guest

    Guest Guest

    "Toby Inkster" <> wrote in message
    news:p...
    > It's really not hard. An HTML page is fluid "by default" -- the only
    > things that can stop it being fluid are design decisions made by the
    > author -- in particular when setting widths.


    Understand you. My question was more to do with aesthetics. Right now, I've
    left my banner left-aligned. At higher rez, that opens up wasted real estate
    to the right that I want to "fill" with something that still pleases the
    eyes. My banner is a photo, not suitable for tiling.

    M
    Guest, Nov 13, 2004
    #17
  18. Guest

    Guest Guest

    "Matthew Superstar Swass" <> wrote in message
    news:...
    > If you want a banner to span the screen at any screen res, one great

    method is
    > to design it so it can be split up into sections with spacers that

    increase
    > their width as the browser size does.


    Thanks. That's a good idea. It won't work in this particular case, but I'll
    keep it for future ref.

    M
    Guest, Nov 13, 2004
    #18
  19. On Sat, 13 Nov 2004 18:59:12 GMT, <<M>> <> wrote:

    [snip]

    > It involved Javascript-sniffing, multiple CSS sheets, tweaks, etc.


    Which article was that? I'm intrigued. By the way, browser detection by
    virtually any means is flawed. Too many vendors make determined attempts
    to spoof themselves for it to be reliable.

    [snip]

    > CSS is supposed to be easy and seems to be anything but. :)


    CSS *is* easy. It's browser bugs that make things difficult. In my
    experience, IE causes the most problems, but older versions of probably
    every browser make a contribution.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Nov 13, 2004
    #19
  20. Guest

    Guest Guest

    To Dave Patton (& his fans)

    You may think that simply putting down the phrase "fluid design" makes you
    seem Buddha-like where a few vague words are meant to imply vast wisdom. It
    doesn't. You'll simply come off as a git of limited knowledge trying to fake
    it. (I checked out your page. . .)

    Something more specific like an example website, some sample code, pointers
    to a helpful article etc. would be useful. See the rest of this thread for
    examples.

    FWIW


    M
    Guest, Nov 13, 2004
    #20
    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:
    459
    Joe Bonavita
    Dec 23, 2003
  2. steve
    Replies:
    2
    Views:
    358
    steve
    Apr 14, 2006
  3. Sebastian Sowa

    screen resolutions

    Sebastian Sowa, Jul 3, 2003, in forum: HTML
    Replies:
    31
    Views:
    1,178
    Isofarro
    Jul 5, 2003
  4. Phillip Mann

    Screen Resolutions

    Phillip Mann, Feb 24, 2007, in forum: HTML
    Replies:
    5
    Views:
    409
    Bernhard Sturm
    Feb 26, 2007
  5. Brent
    Replies:
    8
    Views:
    193
    Thomas 'PointedEars' Lahn
    May 10, 2004
Loading...

Share This Page