Designing for widescreen laptops

Discussion in 'HTML & Website Design' started by tarponkeith, Oct 16, 2007.

  1. #1
    Ok,

    The other day I got to check out one of my websites on a new widescreen laptop, it looked horrible... It's fluid width, with a couple things set to "float: right" or "float: left"... But because the screen was so wide, it looked messed up... So I checked out some other sites too, and not very many sites look good...

    Is this something we're going to have to start factoring in soon?
     
    tarponkeith, Oct 16, 2007 IP
  2. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What is your web site?

    I design all of my web pages on my wide screen monitor, then I have to spend the time to make it look nice on smaller resolutions. :)

    Without looking at the site, I have a couple of possibilities.

    Use CSS to set a max-width so that it stretches, but not too far. Many people with wide screens don't mind a bit of empty space on the left and right side of their screen.

    You could also try using the 'left' and 'right' positioning properties (try using percentages) instead of the float properties. This can sometimes yield better results, but it really depends on the site.

    Ultimately, I would recommend saving your money and getting a 22" wide screen LCD monitor. I know they are a bit of money, but it will be one of your best investments ever. Then get the "Yet Another Window Resizer" Firefox Extension. This will allow you to resize your window to lower resolutions at the click of a button. With this set up you can test what your web page will look like on the entire range of different resolutions.
     
    ChaosFoo, Oct 16, 2007 IP
    tarponkeith likes this.
  3. tarponkeith

    tarponkeith Well-Known Member

    Messages:
    4,758
    Likes Received:
    279
    Best Answers:
    0
    Trophy Points:
    180
    #3
    Thanks for the advice, I'm going to change it around a bit today using the max-width! appreciate the input :)

    You should go to the services section and offer screenshots of peoples sites on a widescreen for like $0.50 or something, i'm sure some people would love to see how their pages look
     
    tarponkeith, Oct 16, 2007 IP
  4. AstarothSolutions

    AstarothSolutions Peon

    Messages:
    2,680
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It is not only the look of it but also practicalities.

    If you have ever seen heat maps of where peoples eyes go when looking at a site the results are even more pronounced for widescreen monitors with top right etc almost being total dead zones. Previously you put things there and accepted they would be seen but not have big impact. For widescreen users many will not even noticed there is anything there.

    The other consideration is usability as common psychology would have us believe that people are not comfortable reading very log lines of text. My experience of this it does hold up as I use both widescreen and non-widescreen monitors.
     
    AstarothSolutions, Oct 16, 2007 IP
  5. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #5
    That is very sound advice. I always forget to consider human tendencies.

    Do you guys really think that there is a need for screen shots on a wide screen here at Digital Point?
     
    ChaosFoo, Oct 17, 2007 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    They wouldn't hurt. Especially for people who cannot afford a wider screen. I lucked upon a laptop with a wide screen, so I get to see this automatically. But if I still had my $800 Gateway, tough luck for me. A screenshot would be awesome then.

    Though maybe there's already websites which do such things, like the mulitple-browser sites.

    Thx for the tip about window resizers!
     
    Stomme poes, Oct 17, 2007 IP
  7. tarponkeith

    tarponkeith Well-Known Member

    Messages:
    4,758
    Likes Received:
    279
    Best Answers:
    0
    Trophy Points:
    180
    #7
    I think so, with all the webmasters, there's bound to be plenty without a widescreen, that are interested to see how it would look...
     
    tarponkeith, Oct 17, 2007 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    437
    Best Answers:
    0
    Trophy Points:
    0
    #8
    What I do is set a maximum width via CSS (though I have to use an expression for IE 6) and then set the margins of the container DIV that I use (unless I'm using the body directly) to 0 auto to center it for those people who have widescreen monitors with high resolutions and their browsers maximized to fill all that real estate.
     
    Dan Schulz, Oct 17, 2007 IP