Considering Monitor Resolution and Screen Size Differences

Nowadays, if you were to buy a new computer system, you’d probably get a 15″ or 17″ monitor. A few years ago, however, 14″ monitors were standard. And not all monitors measure 14″, 15″, or 17″. They can get considerably larger. It’s not uncommon to find someone using a 19″ or 21″ monitor, especially if they work with graphics or 3D applications.

Some people might set their monitor resolutions below the 800×600 standard, which causes on-screen images to get larger. And if an image gets larger on screen and can’t fit in a window, you’ll have to scroll over until you can see the whole image.

The point being here is that incompatibility issues arise when designing your site, which should all be addressed. You should focus on creating a Web site that delivers Web pages compatible for all monitor resolutions and screen sizes.

Normally, designers design Web pages for a resolution containing 800×600 pixels and check the appearance of the page layout at the resolution containing 640×480 pixels. (This process can also be done vice-versa). Either way works fine and its up to you to decide which method is best for your purposes.

We recommend designing your Web pages to have a set width no larger than 600 pixels. This area is about where the checkbox icon resides on your taskbar. If you absolutely need more space, make use of percent measurements. If a Web browser needs more space, it will reduce the area for you without moving elements around too much.

A helpful program called “QRes” is designed for easily switching monitor screen resolutions, which is helpful in testing the compatibility of your Web pages on other monitors. Its available free of charge and can be downloaded at http://www.berend.com/qres.html. You might also want to look into a program called BrowserMaster from ApplyThis Software. A trial version is available at http://www.applythis.com/browsermaster.

If your project space is limited on your hard drive, you may want to consider checking the resolution manually using the Microsoft Windows Control Panel. To do this, simply click on “Start”, “Settings”, and “Control Panel”. Double-click on the “Display” icon and go to the “Settings” tab. Testing the compatibility of resolution differences should be relatively self-explanatory at this point.

You just need to slide the ruler appropriately to the named resolution in the “Screen area” section.

Side Note: Speaking of appearance differences, you might want to consider designing your Web pages for Netscape Navigator or Netscape Communicator. If your pages look good in a Netscape browser, odds are they look nice in Microsoft Internet Explorer. (Internet Explorer tens to be a little more lenient in terms of displaying Web pages more appropriately in terms of how the HTML programmer (or the WYSIWYG Web page development program) designed them to appear.

Leave a Reply

You must be logged in to post a comment.