Let's say you normally use a screen resolution of 800x600 or higher, but want to design your pages for 640x480. Or perhaps you use a higher resolution than 800x600, but want to design for 800x600. How can you be sure your pages look right at the lower resolutions?

The obvious answer is to change your screen resolution to the one you're designing for. But even with a program like QuickRes that lets you quickly change your resolution without rebooting, this is a bit of a hassle. All your open windows get resized, and things get moved around on the screen. After switching back, you have to put things back how you like them. And if I set my 21" monitor to 640x480, what I see is really not much like what it'll look like on a 14" or 15" monitor - everything is much larger.

What works much better for me is to simply resize the browser window so that it's about 640x480 (or whatever size I want to see it at). You don't need to be completely exact with this - it's not possible to know just exactly how your pages will look on someone else's system. You don't know how they'll have their browser configured - which tool bars they'll have showing, what default font and font size they're using, etc. There's also a lot of variation among the various platforms. If you get the width pretty close, you'll get a pretty good idea of how things will look - most of the variations will be in height rather than width. Of course, some users will browse at less than full screen even when using 640x480 - but you can't cater to everyone.

Thanks to a tip posted by a ZDU student in one of my ZDU classes, I have found a good way to quickly and easily size my browser window to a specific size. This student suggested making up a couple of images, one 640x480 and one 600x800. To view at 640x480, just display the 640x480 image on the screen using whatever program you use to display images. Then fit your browser window to fit the image.

Click here to see an example of how I do this.

Here are two images you can use for this. The blue one is 640x480. The black one is 800x600. They're displayed here in a smaller size, but when you save them, you'll find they're the correct size.

640x480 gif - 2K


800x600 gif - 2K