Quote:Original post by Poker Champion
Hi - was reading somewhere that you should do web development in a certain screen resolution so that when deployed all users can view your website correctly.

Where were you reading that? Unless you can guarantee your users will be using a given resolution there isn't really a best resolution to use when developing, although the most commonly used by viewers of your site would probably make a good choice. Your design should be usable on any resolution a user might be using. In practice it can be very difficult to get designs to work on smaller resolutions however, and very large resolutions can also present some difficulties in that mant designs will often leave them with some unused screen real-estate.

You're pretty safe to ignore 640x480 resolution (unless it's some specialty site that you know will attract an audience using this resolution), but you should make an effort to have the site display well in 800x600 and 1024x768, as well as scaling up nicely; those 1600x1200 LCDs and larger CRTs are becoming increasingly common, so it's best that your site looks nice on them. If you want to make your site play nicely on mobile/handheld devices you'll most likely want to give them an altered design through thier own stylesheet.

Quote:What is the best resolution to develope in?

As I've already said, there isn't really a best to develop in, but the most common resolution amongst your userbase is probably a safe bet - you'll still need to test your design in a multitude of other resolutions as well however.

I do my development on a dual-monitor setup with one monitor running at 1152x864 and the other at 1024x768 so I can easily test those two, but I also test (by switching the resolution of the secondary display) 800x600 and some of the higher resolutions, as well as taking a quick peek at my layouts in Opera's simulated handheld rendering (SHIFT+F11).

In short, develop in whatever resolution you're comfortable with and then test in anything else your users might concievably be using - don't forget to test with various browsers as well as at different resolutions.

Unless you have a specialty audience that you know will be using a particular resolution you generally should avoid a design that only works at a single resultion.


If you're looking for some good resources on XHTML/CSS based web design you could try W3Schools (XHTML/CSS) and A List Apart (A Guide For New Readers | XHTML/CSS).

As others have pointed out above, the use of XHTML and CSS will greatly help you in mainting this "general layout" for users of all resolutions.

Also make it a point to not use pixels as your units when defining font/image sizes, etc. Use ems for the base font, then everything else in relative terms (i.e percentage). This way the once the base font is set by a viewer's browser taking his resolution into account, everything else will adapt itself.

Another thing to note is not to take image positioning for granted. For example, if you have a 50X50 image, and have perfected your stylsheet to make some other image or text align itself parallel to the image or in some way relative to that image, because although font sizes can change per-user when measured in relative terms, images will always have a fixed pixel area. The best way out of this is either to use strict XHTML/CSS guidelines. eg. use the CSS float property for multiple columns rather than tables, use appropriate <p>aragraphs and <div>s to separate sections rather than excessive use of line breaks, and many other things that only limited time stops me from mentioning.

In short, learn to be XHTML/CSS valid, get rid of age old HTML techniques, and the pieces will fall together on its own and you won't have to worry at all.