View Full Version : What screen resolution to design to???

03-27-2003, 01:00 PM
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.

03-27-2003, 01:07 PM
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 :)

03-27-2003, 01:14 PM
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.

03-27-2003, 02:09 PM
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.

03-27-2003, 02:12 PM
I'd go for #2 as well.

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

03-27-2003, 02:36 PM
That's a good idea, I hadn't thought of that. I knew there was a good reason I come to these forums.

03-27-2003, 02:38 PM
/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...

03-27-2003, 02:52 PM
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; }

03-27-2003, 07:01 PM
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).

03-27-2003, 07:08 PM
You could also you use a java script to check what resolution is being used and to dange the css elements automatically.

03-27-2003, 07:26 PM
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.

03-27-2003, 09:06 PM
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 (http://www1.iastate.edu/~wsthune/courses/fall2003/engl105/) scales to the window size with reasonable consitency (using the browsers mentioned -- all bets are off for other versions).

03-27-2003, 09:25 PM
All right, here's the site so far. A few notes:

<edit>I suppose I can post the URL
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???