1 of 5

Write now Article Tools

A designer's, and programmer's, worst nightmare: varying monitor resolutions. Why do computer manufacturers do this to us?! I remember the good old days, when 800x600 was standard, and anybody who had a resolution otherwise was out-casted. Luckily, there are several simple techniques any designer or coder can use to make sure a website layout looks nice for everyone.

1) Have valid coding We should all do this anyway, but do it for one more reason. This solves cross-browser issues. For instance, if you don't have valid coding, a layout may get centered in Firefox but not in IE. A bigger issue, which has more to do with fitting into different resolutions, is div width, height, etc. I've never understood why, but Safari, IE, and Firefox all have different opinions of what a pixel is depending on what the specified object width and height we are talking about.

It doesn't take a lot of time, just go to the CSS and XHTML validator websites by w3, and validate your code. If you practice good coding anyway, you should only have a few errors.

CSS Validator: http://jigsaw.w3.org/css-valid ator XHTML Validator: http://validator.w3.org/

2) Center layouts Even if you have a very wide layout, center it. It may fill up your screen and look pleasant, but it's most likely tucked away in the corner for somebody with a larger resolution. Balance is key to any good design, and although centered layouts be seem so basic, it's almost necessary to get a nice effect.

3) Be careful of header size According to design standards, a header should be no more than 1/3 of the page size. What's the page size though? We're back to our original problem. I usually go for 1024x768 as my base case, so I never make a header over 300 pixels in height. 200 pixels or less would probably be best considering there are still few people with 800x600 resolutions.

People hate scrolling to get the information they need. Your visitor should only scroll if their continuing reading, but not to find the first bit of text.

4) Simple backgrounds It is important to remember that some of your visitors will be seeing more background space than others. If they have a huge screen, why would you make them look at that much hot pink, or at those technicolor swirls for your background? It may be fine for you if you only have a quarter inch on each margin, but think about others.

5) Use set margins The simple CSS codes for margin-left: and margin-right: can do wonders. You can stretch any layout until it reaches, say, only 50px on each side. Just be sure you know what your doing with your header, footer, sidebar, and content areas. Will they look funny when stretched? When smashed together? You'll need to set strict standards for them too.

6) Fluid Layouts Read up more on fluid layouts. They are very versatile and stretch to your visitors resolution seamlessly. There are even codes out there that let you put advertising space in the extra area for anyone who has a resolution bigger than your layout. There are many other tutorials out on the web that will teach you new, and impressive, techniques for dealing with alternate screen resolutions.

Learn more about this author, Brenna Mae.
Click here to send this author comments or questions.

Add your voice

Know something about Web design tips: Fitting all monitor resolutions?
We want to hear your view. Write now!