Graphics and Colors

Information is the reason people visit your pages, however a site with nothing but text is unappealing to most of us. Your choices for graphics and colors will set the tone of the page even before people began reading, so take a moment to think about what the visual design should convey.

Photos, buttons and icons can spice up a web page and make it more appealing for your visitors, however graphics can very easily be overdone. Before you burden your web page's download time with big graphics, consider other techniques for adding visual interest - e.g. colored table cells, colored horizontal rules, or style sheets. They'll also enhance the content, and make it easier for people to read.

Choosing colors
The standard color model used on the Internet is RGB, which consists of a set of three values from 0 (zero) to 255 in decimal notation, or 0 - ff in hexadecimal notation. The colors you choose for your web site may not display consistently across all platforms, monitors, and browsers. The 216 colors in the web-safe color palette will display fairly reliably on 256-color monitors. But more modern --and increasingly more common-- monitors can display millions of web colors. Even the web-safe palette is not consistent on these newer monitors. What should you do? While there is no right answer, whatever color choices you do make, be sure to test, test, test your site on as many browsers, monitor color settings, and platforms as you possibly can.

Accessibility
Always include the alt attribute with each image tag. Any transparent images used to hold positioning (spacer gifs, shim gifs) should have a null alt attribute (alt=""). Web designers/publishers should be cautious with the use of animated gifs, Flash animations, Shockwave and similar technologies as they can cause problems with some accessibility software. Alternatively, you may use JavaScript to create rollovers for an animated effect. Adding javascript rollovers with Dreamweaver is quick and painless. Be aware, however, that some users turn off javascript in their browsers. So, do not make any page functionality dependent on javascript.

Ever wondered how the colors you've selected look to a color blind person? View your page through color blind eyes at http://www.vischeck.com/vischeck/vischeckURL.php. If important information on your page gets lost due to poor color contrast, you should rethink your color choices.

File Size
Make the file size of graphics as small as possible. Use jpg format for photos and gif format for artwork. Resolution should be 72 dpi. Total page download time should not exceed the equivalent of 9 seconds at speeds comparable to a 56K modem, even if your users are on a high-speed connection.

Best practices
Include width and height specifications in image tags. This tells a browser how much space to allow for the image, thereby decreasing page loading time. Do not use the width and height attributes to resize an image; this will increase your page's loading time and may cause your images to display inaccurately.