Testing website designs on different screen resolutions

There is a quick an easy way to check how your latest creation will look on a variety of different screen resolutions.

You'll need to have your screen resolution set to the highest level you'd like to test for (this shouldn't be a problem for the average designer sitting behind their 50inch monitor at a million by a million pixels).

Monochrome squares

Get your favourite image editor fired up and start by creating an image that is 640 x 480 pixels (w x d). Now change the background fill colour and enlarge the canvas size to 800 x 600 pixels with the expansion only occuring to the right handsite and bottom of the image. Repeat this process until you reach the resolution of your monitor.

For reference the standard monitor resolutions that most people use are:

• 640 x 480
• 800 x 600
• 1024 x 768
• 1280 x 1024
• 1600 x 1200

Sidenote: Recent stats show that 800x600 and 1024x768 are the two most commonly used resolutions with 640x480 representing less than 1% of users).

Here's two that I prepared earlier. If you've got two heads or the biggest monitor in the world then you'll have to build your own.

1024x768 full size image

1280x1024 full size image

A more exciting background

If monochrome squares just don't do it for you then you can still use your favourite background image with a minor variation on this idea. Use the rulers in your image editor to place cross hairs or a marker of some form at the corner of each common resolution.

1024x768 full size image

1280x1024 full size image

Testing the new website layout

Once you've setup your background image or used one of those above, checking how your new design will render on different resolutions is easy. Minimise all open programs except your browser window, then resize it until it lines up with the varying markers at each different resolution.

Related Links:

• Making way for fullscreen websites