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 computer screen resolutions under which I check my sites.
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.)
(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).
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.
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.
Copyright © 2008-2017 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
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 https://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 or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Test Your Website Under Different Screen Resolutions under Windows the Easy Way
