Although the web is moving towards being optimised for browsers viewed at a 1024x768 screen resolution, and pretty much all current 'out of the box' PCs and macs are set up to this resolution by default when they are bought, web designers and developers are constantly aware that to be as compatible as possible our pages should be viewable on all popular resolutions.

If we design a page on a machine, using a resolution of 1280x1024 (many web designers tend to use a resolution of atleast this.) we need to know it will still be usable on screens displaying at 800x600, 1024x768, and increasingly popular widescreen resolutions.

We might also be designing for handheld devices like PDAs or even mobile phone screens.

The old way of checking results of resolutions would be by actually changing the settings of your OS' / monitors display properties globally, which is a right royal pain and messes up your desktop etc.

Luckily if you are a firefox user you can now have a dedicated tool sitting atop your browser window which will display your currently view page in any number of user defined screen sizes via a quick selection from a drop down list.

The screen size tool comes as part of the absolutely indispensable Web Developers Tool Bar plug-in for firefox. The latest update also lets us save a set of our own preset sizes which we can directly select from at will. (Brilliant!)

OK here's the easy guide to getting the screen size tool up and running on your machine:

STEP 1

If you aren't already a firefox user, download and install the firefox browser here.

STEP 2

Download and install the Web Developers Toolbar add-on for firefox here.

STEP 3

After restarting firefox to complete the install of the toolbar, open a page in the browser which you want to check at different screen sizes.

STEP 4

Locate the 'Resize' tool on your smart new Web Developers Toolbar. Try it out by choosing the default preset '800x600' to see what your page looks like at his resolution.

How cool is that! The browser resizes instantly to 800x600 but your system resolution in unaffected!

STEP 5

To add you own preset sizes for later easy-access do the following...

a) Choose 'Edit Resize Dimensions from the resizes drop down.

b) Click the 'Add' to add a new preset.
c) Give your preset a relevant name and enter the width and height by pixels in the boxes provided and hit 'OK'.

Now when you choose the Resize Screen tool from the Web Developers Toolbar you will have all your own list of preset sizes to check you pages.