Article
Practical Web Design - Fundamentals of Web Design
Part 2: Looking Good
Part 1 of this article discussed the essentials of Web design, the different choices of HTML types, browser compatibility, site navigation, and background colors. Part 2 discusses color schemes, display sizes, text and font choices, margination, and lots more.
Color Schemes
It's not just the surfers that suffer from headaches when they encounter certain color schemes, it's the monitors themselves. Dark text on darker backgrounds is an example of a color scheme that can strain a monitor. If the monitor is only slightly out of calibration, the colors can "separate" and look awful.
Remember, too, that the variations between the designs and configurations of monitors and display controllers will cause colors and graphics to appear differently from one display to the next. Even the same monitor connected to different video cards will display colors and graphics differently. And the difference between Windows and Macintosh displays can cause the Web designer to develop ulcers.
What's a Web designer to do? Well, there are some remedies, though none are perfect. First, it's usually a safe, if outmoded, bet to stick to the traditional 216 "Web-safe" colors that display properly when viewed across different platforms. This is advice that many consider outdated, and rightly so.
From the Guru of Color Design
To quote Lynda Weinman, one of the original gurus of Web design:
"The only reason to use the browser-safe palette is if you have a concern that your Web design work will be viewed from a 256 color (8-bit) computer system. ...[B]ack in 1996, the [majority] of computer users had 8-bit video cards. Today, the minority have them, so the justification for using the browser-safe palette has diminished greatly if you are developing your site for users who have current computer systems.
"There may be [a] resurgence in the need for the browser-safe palette when designing for alternative online publishing devices, such as cell phones and PDAs. Those systems are still in 1-bit (black and white) or 8-bit color. Right now, very few people are designing their Web sites to work on those systems, so the need for the browser-safe color palette is definitely downgraded to a mere shadow of its former glory."
"Browser-Safe" Doesn't Mean What It Used to Mean
So again, the advice to stick to the old palette of 216 browser-safe colors is more to keep users with older systems happy, at the possible risk of limiting yourself unnecessarily to a very limited (and artistically unsatisfying) set of color choices. Again, know your audience. If your site is going to be used by folks who are likely to have more current systems, there's no reason to limit your color choices -- "Today, any consumer with a Gateway or iMac is going to see all the colors you can throw their way," says Weinman.
Conversely, if your site will be used primarily by people with older or more limited systems, you shouldn't challenge them with a blaze of colors that their computers won't handle properly. Weinman provides us with a useful Web page that shows the 216 colors sorted by value, including the hex numbers and RGB values, on her Non-Dithering Colors by Value page.
It's also worth noting that flat-color illustrations, logos with flat colors, or displays with large single-color areas profit the most from being created in browser-safe colors, as the dithering is much more visible and annoying in these displays than, say, in photographs.
Why 216 instead of 256 colors? Depending on which source you check, it's because the remaining 40 colors vary too much between old Mac and PC displays to be included, or because some colors are reserved for the needs of specific operating systems. And if you really want to get picky, because of the color shifts caused by some video hardware, there are really only 22 truly safe Web colors. 22 just aren't enough, by gosh!
About half of the computer users out there use 16-bit color displays, while only 3% are stuck with the old 8-bit displays. So the need to stick to the 216 supposedly safe colors (or the 22 truly safe colors) isn't relevant any longer. But there's still the issue of what looks good on what displays. Here are some options, based on your decisions about who comprises your audience, and how you want to deal with the issue.
A Variety of Choices
To play it extremely safe, stick to the 22-color "really safe palette" and prepare for a challenge -- how in the world do you design an attractive Web page with this selection of colors? I'm sure it can be done; I'm not so sure I could do it myself.
Play it fairly safe and stick to the traditional Web-safe palette of 216 colors. Your 8-bit users, all thirty of them, will be happy, your 16-bit users won't notice too much color shifting if you design carefully, and most people will be fairly happy with your displays. You will find that your artistic choices are extremely limited, though.
Or you can choose not to worry about it at all. Splash colors around at will and let the devil take the hindmost. Of course, on some visitors' displays, your site will look truly awful, but you're not worrying about that, remember? A variant of this approach is to ignore the needs of your 8-bit users and design with the majority in mind.
A number of color resolution problems can be avoided:
- make your .GIFs using transparent backgrounds whenever possible
- keep your .GIFs separate from your HTML colors whenever possible
- minimize "seams" by making .GIFs that are adjacent to HTML background colors partially transparent
- stick to Web-safe colors for the backgrounds of pages and tables whenever possible
Keep in mind that separating .GIFs with background colors from their HTML background equivalents avoids the possibility of noticeable color shifting. Note also that .GIFs are limited to 256 colors, or an 8-bit display. .JPG graphics can use up to 16.7 million colors, or a 24-bit display.
And just to add to the confusion, users of LCD displays such as those found on notebooks and laptops (and some desktops) have contrast issues that render light colors such as silver, beige, and cream indistinguishable from white. If you think a large portion of your audience uses LCD displays, be sure to test your pages on such a display.
Whatever you decide, keep your audience in mind and test, test, test.
Remember that if people are going to print out any part of your page, they're going to most likely print it on white paper. A large number of them are not going to bother with printing in grayscale or turn off background image printing, so keep their needs in mind, especially with pages that are largely text.
Elaborate or "busy" background images can be appealing, but they can also make it tough on the poor slob who clicks the "Print" button in their toolbar only to have their printer use up half its ink to print your background image along with your text. And white text on a dark background might not print at all on some printer settings. You might consider providing a "printable" page that eschews most of the graphics and fancy fonts in favor of an easily-read typeface on a plain white background.