There are many methods available to test a web page under different screen resolutions. This article describes an easy-to-use method for Windows users that does not require you to actually switch resolutions.
I find that the more complicated it is to test under various conditions, the less likely that webmasters will actually do such testing, no matter what they read on thesitewizard.com or elsewhere. As such, the method I describe here is really the most painless way I've found (so far) to test a page under different resolutions in different browsers.
It's generally a good idea to test your web page under the commonly used screen resolutions so that you can be sure that your page is usable under the different resolutions. If you have a multi-column layout, you may also want to check that your columns align correctly and are still viewable when your visitor has a lower resolution than you have.
Here are some of the more common screen resolutions I've encountered on my sites lately. Your site's mileage may vary, since it probably caters to a different audience. thesitewizard.com tends to have a lot more technically-savvy visitors, resulting in a number of people using the higher resolution screens.
There are of course other resolutions. For example, some monitors come with a 1280x1024 resolution while others have a default resolution of 1920x1200. I've also omitted 640x480 from the list since few people appear to use such monitors nowadays.
Basically, if you want to test your website under all the resolutions listed above, you obviously need a monitor that can handle the largest-sized resolution listed. If not, just test all the resolutions that are lower or equal to your current resolution.
Sizer is a free lightweight Windows utility that allows you to resize any active window on your desktop. It's a very useful tool for web designers. You can get it at http://www.brianapps.net/sizer/.
If you have not already done so, download and install Sizer.
After installing sizer, run it and put a check in the following configuration items at the bottom of the window (if it's not already checked).
Click the "Add" button. A duplicate configuration of the currently selected resolution profile is created. Enter the following values into the appropriate boxes. Each time you finish one resolution profile, click the "Add" button again for the next one. Don't bother to add resolutions that are larger than your current screen resolution, though. You also don't need to add your current screen resolution, since you can simply maximize your browser to obtain that.
Feel free to add other resolutions to the list or delete those you don't want.
When you're done, you might want to select each item and click the "Move Up" or "Move Down" button to sort your menu in whatever order you wish. It doesn't affect the program operation, but it makes it easy for you to find the correct resolution to use when you need it. Then click the "OK" button to accept your changes.
Whenever you want to test how your site appears under different resolutions, open your page in your browser and click somewhere in the browser window to make it the active window.
Right-click the Sizer system tray icon and select the resolution you want. Sizer will automatically resize your browser so that it uses that particular resolution.
Another method to resize the browser is to open the system menu of the application you want resized. The system menu is the icon at the top left of your application window. It can be activated by clicking it or just hitting the Alt+Space keys on your keyboard. From the system menu that appears, click the "Resize/reposition" item to see the list of resolutions you configured earlier.
Checking your site under different screen resolutions allow you to make sure that your site is usable under the conditions that visitors to your site may be facing when loading your site. Using the Sizer utility, testing such varied situations becomes extremely easy for the webmaster.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as: