Accommodate different display resolutions
One size does not fit all—careful planning is needed

An acknowledged challenge of web site design is creating a layout that can be viewed on a wide variety of display sizes and resolutions. Your site may be viewed on anything from a small laptop to a large, widescreen monitor, not to mention cell phones.

A layout that looks fantastic on one monitor may look terrible on another. On smaller monitors, important information or even navigation elements may be off screen. On larger, high-resolution monitors, there may be large blank areas, unusually wide paragraph widths, or graphics may appear too small.

While the trend is toward larger, higher-resolution displays, there are enough lower-resolution displays in use to continue designing web sites to accommodate them:

No web site layout will work perfectly on all displays. The key is to strike a balance that takes advantage of larger displays sizes, honors users with smaller displays, and provide a great online experience for both.

Tips:

• Make sure the most important information on your home page is visible without scrolling on a display set to 800x600 resolution. This is especially critical for navigation elements or key features your web site visitors use regularly.
   
• Use a page layout structure that specifies main text areas as a percentage of the page width, rather than a fixed pixel width. Some call this a 'fluid' or 'liquid' layout. This allows the text to rewrap depending on the size of the monitor. This is a great way to avoid side-to-side scrolling on smaller monitors and large blank page areas on larger monitors
   
  In some cases, this solution may result in very wide paragraph widths, especially on large widescreen displays. One way to accommodate this is to use a text area percent around 70-80%. This will leave a margin in the right side of the layout and reduce the width of the paragraph.
   
• Consider a centered page layout structure designed around an 800x600 size. When viewed on higher-resolution displays, the layout will appear in the middle of the display, without an unusually large amount of blank space on the right side.
   
• When using text within graphics (navigation buttons, banners, graphic callouts), that text will appear smaller as the display resolution increases. Graphical text that is large and easy to read at 800x600 may appear small and difficult to read at 1280x1024 or higher. Be sure to test graphical text at high resolution settings.

Need help making your site work better on different displays? Consider our web site maintenance service.

(1) Source: www.w3schools.com, January 2005