Handling Different Screen Resolutions

One of the more difficult problems faced by many webmasters is how to handle all of the different screen resolutions which are available. In case you are unfamiliar with the term, screen resolution is the height and width of the monitor in pixels. Most people (over 50%) use monitors which are 800 by 600 pixels in size.

540x384 - Believe it or not, this is the resolution for WebTV.

640x480 -  For smaller, older screens.

800x600 - The vast majority of people have monitors set to this size.

1024x768 - This size is becoming more popular, but still on a 17 inch monitor the characters on the screen are just too small for many people. 

1152x900 - A very large, 21 inch monitor would support this size.

1280x1024 - Now you are getting very large.

With all of these different screen resolutions, how do you make your website look good without adding those annoying horizontal scroll bars to your site?

Here are some good rules along with some HTML code samples to help you out.

Use percentages in tables

An example of percentages is shown below.

<table border="1" width="100%">
    <tr>
      <td width="50%">&nbsp;</td>
      <td width="50%">&nbsp;</td>
    </tr>
    <tr>
      <td width="50%">&nbsp;</td>
      <td width="50%">&nbsp;</td>
    </tr>
  </table>

As you can see, the whole table will take up 100% of the width, and each cell is 50%. This means the table will fit fine wherever it is located. If, on the other hand, actual pixel sizes were used, then there are situations where the table would not fit. For example, if you coded it to be 800 pixels wide, then WebTV viewers would need to scroll horizontally to see your site.

Code your tables for specific sizes which are smaller than your target resolution

You may decide that you want to set your tables to a specific size. Just make sure the width is smaller than your target resolution. An example of using hard coded values in a table is shown below (the table is set to 400 pixels wide and the cells are each 50% of that).

<table border="1" width="400">
    <tr>
      <td width="50%">&nbsp;</td>
      <td width="50%">&nbsp;</td>
    </tr>
    <tr>
      <td width="50%">&nbsp;</td>
      <td width="50%">&nbsp;</td>
    </tr>
  </table>

Leave a little room on the margins

If you do want to target your web site for a specific screen resolution, then it would be wise to leave a few pixels around the edges. This will make it less likely for the browser to add the scroll bars. For example, if your target resolution is 800 pixels wide, then perhaps you should code your tables to 750 pixels.

Check your site in various resolutions

Want to see how your site looks at various screen resolutions? Check out this tool. It will allow you to display it in different sizes.

 

Enter Your URL (don't click the browse button)    Choose Screen Resolution

Careful with the <PRE> lines (lines without formatting)

The <PRE> tag indicates that text is to be included without formatting, even line breaks. Be sure that any lines so included do not exceed 70 characters long, as a general rule.