Main content begins here

Designing Web Sites for Monitor Resolution

Sunday, August 1, 2004

Monitor Resolution, Shmonitor Resolution

If you’ve been ignoring the effect monitor resolution has on your Web site designs then it is time for you to pay attention.

You can witness endless design horrors on the internet but one of the most annoying is lack of concern for monitor resolution. It has to stem from the “my monitor must be the norm” syndrome, which affects nearly everyone in the Universe until they see a familiar web site on someone else’s machine. It slowly dawns on them how different a Web site can be from machine to machine.

When I run across these types of websites, my first thought is that the designer didn’t know about monitor resolution. That can’t be true, can it? Everyone who makes Web sites knows about resolution.

Don’t They?

If you don’t know, here it is: monitors have different display resolutions that can be changed by the user willy-nilly. Some standard resolutions are 640x480, 800x600, and 1024x768. There are many others.

Your Web site looks different on each of these resolutions. Goodness help you if you’ve made your site too large for a particular resolution because people hate to scroll left and right.

You need to pick a minimum resolution before creating art for the web site. It’s a real pain to try to retrofit a site to a smaller resoluton. The current resolution Way Cool Web Design uses is 800x600 if no other size is specified by the client. A number of web sites keep some statistics on monitor resolutions used by their visitors. You may find these useful.

800x600 is not 800x600

OK, so you’ve settled on a resolution to design for. You hop into Photoshop and create a new 800x600 document and start designing away, right? Ugg... not really.

Sure, you can go ahead and make the doc 800x600 but don’t use the whole space because “designing for 800x600” does not mean creating art that fits into 800x600 pixels. Browser chrome (that useless stuff on all sides of the browser like navigation bars, scrollbars, etc.) eats away at your design space.

Set some guidelines up at the "safe" dimensions for 800x600 — you can determine that at Web Monkey. Way Cool Web Design uses 744x410 as a starting place, depending on project requirements.

“Above The Fold” Is Below The Belt

To add insult to injury at having to use such a small width, there’s also “The Fold” to deal with. Although it sounds akin to an Organized Crime Family, “The Fold” is actually instead what the height guideline at 410 is for. That guideline marks the area where a user will need to scroll if items exist below it. It’s fine and dandy to have content below the fold, just know that a user who has his screen set to 800x600 will have to scroll to see it.

Resolution To This Article

There you have it, folks. Monitor resolution for the masses. If you didn’t have this weapon in your Web design arsenal before, now you do. So please stop making me scroll left and right!

I'm very impressed with your web designs and tableless CSS skills... You completed the work very quickly, and it was correct the first time. You are also a good communicator, which always helps.
James B., Owner Bishop Konig Advertising
Copyright ©2001-2017 Way Cool Web Design LLC. All Rights Reserved.