Table of Contents:
Introduction
Principles
Preliminary Analysis
Mechanics
General HTML Concerns
Specific HTML Concerns
Graphics
Required Elements
|
|
Graphical Design
Graphical design for web pages must strive to produce pages that are
easy to read and to use, and are also attractive. The size, number,
and arrangement of the images affects the usability of the page as
well as its appearance.
Backgrounds
Use subdued, low-key backgrounds whenever possible. Keep
textures subtle and avoid sharp contrasts within background
images. Dramatic, visually loud backgrounds distract from
the content of the page. Even as a well-coordinated part of
an overall color scheme, dramatic colors should be restricted
to pages with similarly dramatic (important, urgent, exciting)
content. Remember that textures can interact with fonts in
ways that make text unreadable, and do not assume a particular
typeface or size. Test a range of font settings on the browser
(both serif
and sans serif typefaces and a variety of sizes) to be sure
the background does not overwhelm the text. Maintain a high
contrast between the background color and the text colors
(including links).
To set a solid color background, use the background color
(BGCOLOR="#rrggbb") attribute of the body,
rather than a background image.
When using a background
image, also set a background color which closely matches
the predominant color of the image, so the reader is
not subjected to rapid, flashy color changes as the page loads.
Inline Images
Keep the number of purely decorative images as low as can
reasonably be managed, consistent with the goal of producing
attractive pages. Reuse image elements wherever possible, to
take advantage of browser caching. In particular, never create
identical images that are stored in different directories or
under different names.
Inline images should fit on a standard screen (640x480), and,
whenever possible, within the default browser window.
They should also, in most cases, be able to
be printed on standard paper (US Letter size, 8.5 x 11 inch) with
reasonable margins. The width of the entire page
should not exceed 600 pixels (540 if the page is to be printed),
and the height of the entire page should not exceed about 350
pixels for nonprinting pages, or at most 670 pixels for pages
designed to be printed. The size of most individual inline images
should probably be 250 pixels or less in both width and height.
Web pages should be tested on a variety of browsers to verify
that the page looks acceptable. For images, in particular, the
page should be viewed on several platforms (because the system
"gamma" color correction is different on MS-Windows,
X-Window, and Macintosh platforms), and at different color
resolutions (i.e., with 16-color, 256-color, or 16-million-color
palettes) and on a grey-scale monitor, if possible.
Large images should not be shown inline. Instead, use a smaller
thumbnail image within an anchor that links to the
larger image as a separate page. This technique also serves to
make the image more easily downloadable by text-based browsers.
There should be information about the size of the image (both
image size, depth and format, and file size), so the visitor
will know what he's about to let himself in for.
|
|
