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.

List of Some Computer and Mobile Phone Resolutions to Test Under

Here are some of the computer screen resolutions under which I check my sites.

  1. 640x480
  2. 800x600
  3. 1024x768
  4. 1280x800
  5. 1366x768
  6. 1400x900
  7. 1680x1050

Nowadays, I also test thesitewizard.com's pages under the following screen widths, to make sure that the site can be read (more or less) comfortably with modern mobile phones (smartphones) and tablets. (In case you're not familiar with my terminology below, "portrait" refers to the phone when held in the normal vertical position, and "landscape" is when you turn it so that the screen is wider than it is tall.)

  1. 240 pixels (old Android portrait mode)
  2. 320 pixels (iPhone portrait)
  3. 384 pixels (Android Nexus portrait)
  4. 480 pixels (iPhone 3 and 4 landscape mode)
  5. 568 pixels (iPhone 5 landscape)
  6. 600 pixels (Android Nexus landscape, Kindle portrait)
  7. 768 pixels (iPad portrait)

(The iPad and Kindle landscape widths of 1024 pixels are already included in my list of desktop computer resolutions above.)

There are numerous other resolutions in existence, but I usually only test using these, since it's neither practical nor necessary to test under every possible resolution. If the site works with these, it should be fine with resolutions between these numbers (or so I hope).

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.

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