How to Test Your Website Under Different Screen Resolutions under Windows the Easy Way

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 doesn't 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 I tell them.  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.

Why Test Under Different Screen Resolutions?

As a website owner or web designer you have to take into consideration what are the most common screen resolutions for the intended target audience of the website to determine what web page width is suitable for the website.

Have you visited a website that has a web page width too wide for your monitor or browser window?  Then you know, if you've got to use the horizontal scroll bar to go back and forth, reading and/or looking for information on the page can be difficult, not to mention annoying, especially if the website has information you're interested in. 

To avoid "click aways" (that's when you've lost a visitor), it's generally a good idea to optimize your site and test your pages under the commonly used screen resolutions so that you can be sure that your page is scaleable, or even 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 visitors have a lower resolution than you may have.

Designing for the Most Common Screen Resolution

Designing for the most common screen resolutions is not hard if you understand the intended audience’s needs and expectations. Having done your research on the intended audience, you would also know what computer skills and type of technology they have and are comfortable with.

The W3 Schools browser statics as of this writing show that 1024 x 768 has a 57% share of the screen resolution trend. 

Most users have 1024×768 or higher, but a large minority have 800×600.

Common Resolutions to Check

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.

What You Will Need

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 here.   Unfortunately, at the time this article was written, it will not work under Windows Vista.

Configuring 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.

Description: 800x600

Width: 800

Height: 600

Description: 1024x768

Width: 1024

Height: 768

Description: 1280x800

Width: 1280

Height: 800

Description: 1400x900

Width: 1400

Height: 900

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.

Checking Your Site under Different Screen Resolutions

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.

In Summary

Checking your website under different screen resolutions allows you to make sure that your site is usable and enjoyable under the conditions that they are accustomed to when loading your site's pages.  If it's not, you've lost your purpose... "through traffic" and repeat visitors.

Jerry Higdon contributes to several Internet Digests at the Resource Center published by Envisiondustry.net.  You will find useful articles and resources on internet marketing, website design, website branding, search engine and website optimization (SEO), including article submission, social networking and backlinking.

Additional Information