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

Painless method to improve platform compatibility testing


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

by Christopher Heng, thesitewizard.com

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.

Why Test Under Different Screen Resolutions?

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.

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.

  1. 800x600
  2. 1024x768
  3. 1280x800
  4. 1400x900
  5. 1680x1050

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

  1. A monitor that can handle the largest screen resolution you want to test

    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.

  2. Sizer

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

Configuring Sizer

If you have not already done so, download and install Sizer.

  1. 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).

    • Show tooltip when resizing windows
    • Show Sizer icon in system tray
    • Add Sizer item to system menu
  2. 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.

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

Conclusion

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.

Copyright © 2008 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

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





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.