An important
goal of page design is to make websites viewable by as many visitors as
possible, despite monitor resolutions and differences in display sizes between
browsers, systems and platforms. Three methods are commonly used or combined to
present visitors with a similar experience regardless of combination of system
and browser they use to view web pages.
SINGLE SIZING
Based upon a
site visitor profile or Internet average profile, the sitebuilder selects one of
the smaller resolutions, limiting page width to a specific size. Often a
resolution of 800 X 600 is chosen - the most common resolution in desktop usage,
and also generally viewable by most laptop systems. 640 X 480 resolution is
another possible single size choice, however usage is being superceded by the
trend toward larger monitors.
Pages designed
for lower monitor resolution are also viewable by monitors set to higher
resolution. Monitors with higher settings simply add blank space to the area
outside the content. It is recommended that content be centered, so that an
equal blank area appears on both sides of the viewers screen, no matter which
resolution the page is viewed in. The amount of blank space will be individually
determined by the visitors browser.
DEFINING WIDTHS AS
PERCENTAGES
The HTML
standard allows widths of tables and forms to be defined as a specific number of
pixels, or as a percentage of the browser window. By using the percentage
option, the elements defined are seen in relationship to the viewers own browser
window. The percentages used to present a full window view are most often
between 80 and 100 percent.
When using
percentages, carefully test the page in various browser window widths to assure
sure that page elements appear in the desired layout. What appears on separate
lines in a narrower view may be strung out in a single line across a wider
screen.
The
Bookmarklets below provide instant window resizing within your browser.
Right-click on each link and select "Add Bookmark" or "Add to Favorites" to save
each Bookmarklet.
This online Monitor
Resolution Tester may also be used to preview webpages in a variety of
resolutions.
JAVASCRIPT
REDIRECTION
The quest
for personalization can lead to the choice of presenting each visitor with a
version of the webpage tailored to individual monitor resolutions. A browser
detection/redirection script may be used to detect monitor resolution. When the
visitor enters the page, they are automatically redirected to a page created to
be specifically viewable in their own monitor resolution. Javascript redirection
of this type only works for version 4.x and higher browsers. Aid graceful
degradation to lower resolutions and graphics settings by choosing the smallest
version of the page as the default. Redirect only if a larger resolution is
successfully detected.
INDIVIDUAL IMAGE
RESIZING
In conjunction
with any of these methods of size personalization, individually sized images may
be served for differing screen sizes. A javascript is used to place differently
sized images, depending upon the monitor resolution detected.
RESOURCES
AND FURTHER STUDY
Two
cut-and-paste javascripts are available from the Javascript Source:
-
Page Resolution Redirect Javascript
-
Image Resolution Javascript
-
A Perfect Fit, by Lisa Rowe of the Web Design Clinic, gives specific
advice for determining and applying limits to page widths and heights.
-
Sizing Up the Browsers from WebMonkey is an excellent reference for
making the most of screen real estate in the popular browsers.
| 
