Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.

View Poll Results: What's the minimum screen resolution you design to?

Voters
17. You may not vote on this poll
  • 640 x 480

    0 0%
  • 800 x 600

    10 58.82%
  • 1024 x 768

    4 23.53%
  • other

    3 17.65%
Results 1 to 14 of 14
  1. #1
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts

    What screen resolution to design to???

    Well, I've finally convinced a client I work for to redesign their site. So, I'm sitting there, redesigning to the xhtml 1.0 standard using 800 x 600 resolution and all divs and css. It's all fluid and expands well to higher resolutions. Then I sent an email to our design team (include media manager and graphic artists) and one of them wrote back saying everything overlaps.

    So, I go and look at his monitor and it's set at 640 x 480. Now, I can certainly modify the site to look good at low resolutions, but by doing so, it will create too much empty space at high resolutions.

    So, my question is, what minimum resolution do you code to. I thought 800 x 600 was standard now-a-days. I also got some stats showing that 12% of people still use 640 x 480.

    Just thought I'd get your input.

    PS: I post the site later.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How is your layout arranged? If it's tables then a 640x480 layout is very difficult;

    But if you CSS its no problem - build the columns with floated divs, then at low resolutions they'll drop underneath each other
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    White space?

    Depends on what the intended audience looks like. If there's a certain percentage still using 640x480 i'd say make it at least work decently at that res, optimize for 800x600 and keep it working in higher res's.
    If your present design won't fit on 640x480 and shows too much empty space on higher res's when it does, you're likely using a lot of fixed width content elements like images which diminish flexibility, but I'd have to see it to be able to give any specific comments.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    Well, I've got a bg image that is aligned at the bottom, left corner so regardless of resolution, I want the image in the bottom left. Now I had 2 ways to approach the layout.

    1) layout from the bottom left and expand up and to the right or

    2) layout from the top right and expand down and to the left.

    I chose #2 because I felt at higher resolutions, I want the content on top, and not on the bottom.

    Sorry, I can't post a link, I've got to upload the sample, and I won't be at that site until later. You'll see what I mean then.

  • #5
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    I'd go for #2 as well.
    Omnis mico antequam dominus Spookster!

  • #6
    Banned
    Join Date
    Mar 2003
    Posts
    224
    Thanks
    0
    Thanked 0 Times in 0 Posts

    just a thought

    maybe put a spacer.gif at the bototm with set width of 800. This will stop resizing get smaller than it needs to be :-}

  • #7
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    That's a good idea, I hadn't thought of that. I knew there was a good reason I come to these forums.

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Posts
    676
    Thanks
    1
    Thanked 0 Times in 0 Posts
    bca...
    /me would just a go® for the 800 res...n' as for designing??? /me just a starts® @ the top n' works downnn...sooo.../me would just a go® with your #2 in bothhh cases...hehehe...


    just a whispers® to mat...
    your sig is just a six® lines on ie5 @ 800 res...

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: just a thought

    Originally posted by mattover-matter
    maybe put a spacer.gif at the bototm with set width of 800. This will stop resizing get smaller than it needs to be :-}
    Why go that trouble when you can do this:

    body { min-width:770px; }
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For mudsplat, we are designing it for 800 x 600, and it is not going to be flexible - much easier, and cross-browser friendly.


    The table width we are using is 758 for it.


    To hold everything in place we use three tables.


    Table 1. Stretched to 100% - gets rid of the background, colour it white.
    Table 2. Fixed to 758 pixels. Holds everything else within it where it is meant to be.
    Table 3. Stretched to 100% inside table 2. So everything stays at 758pixels.

    Through doing that, I found that all the browsers display it exactly the same way.

    If you aren't sure what I mean, head over to www.ionsurge.co.uk/new - that will show you what I mean (it is the mudsplat design, still very much under construction).
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #11
    New to the CF scene
    Join Date
    Mar 2003
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could also you use a java script to check what resolution is being used and to dange the css elements automatically.

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Location
    A 4D universe
    Posts
    1,337
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could, but it can be a lot of work checking that all the pages work fine after the javascript conversion has done its thing.
    http://www.mudsplat.com - Web design, print, and marketing solutions.

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Checking resolution is only part of the battle -- window size also comes into play. IE6, NS7, Mozilla 1.2, and Opera 7 all support clientHeight and clientWidth (such as mBody.clientHeight, where mBody has been pointed to the body element via document.getElementById). And then there's text zoom -- a page design for 100% (medium on IE) may not work correctly at lower or higher zooms.

    Still, the problem is not that complex: This site scales to the window size with reasonable consitency (using the browsers mentioned -- all bets are off for other versions).
    Need more emoticons?
    Visit Catman's Private Stock

  • #14
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    All right, here's the site so far. A few notes:

    <edit>I suppose I can post the URL
    http://www.pheasantsforever.org/proto/index.html
    </edit>
    1) The green bars will be changed to some type of graphic. They're there right now so I can see a background.

    2) Div's overlap on 640 x 480

    3) More layout will be added including a small nav structure at the top and a logo in the bottom right.

    Otherwise, let me know what you think.

    Also, can you use min-width in conjunction with width in css???

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •