|
One of the questions I’m often asked is, “Why are so many Web sites ugly or nonfunctional?”
One answer is that many of those sites look great and work fine on the designer’s compute—but are not designed to be friendly to your computer.
Sometimes a Web page displays a message on it such as: “This site displays best at 800
x 600 screen resolution in Internet Explorer 4.0 or higher.” In this case the Web designer knows the limitations of the site, and wants you to know that he/she is aware that it doesn’t display well on your system. In other cases, the Web designer may not realize the design limitations.
If your Web site needs a message such as the one above, you are probably turning away over half of your visitors for no good reason. Whether you hire a Web designer, buy Web design software, or learn HTML, you should know how to make some basic checks on the technical aspects of your Web pages.
What Does It Really Look Like?
A Web page is very different than a printed page. With a printed page you can specify what you want printed, how big you want it to be, what colors you want it, and where you want it. Suppose your printer is loaded with paper of various sizes. If you then print several copies of the same document it will look great on some pages, but on others the right-hand side gets chopped off while on others there is a huge white margin around everything. This is equivalent to the effect of different screen resolutions on how your Web page will appear on various computers—and it is only the start of the variations in what will be displayed.
What Is HTML?
The code behind the Web is HyperText Markup Language (HTML), and it lets you provide the browser with a logical overview of how you want to present something. (Keep in mind that you don’t need to know HTML to utilize most Web design software programs.) If you care to write HTML directly to get an idea of how it works, open up a plain text editor (Notepad in the Accessories menu on Windows 95/98, or Simpletext on a Mac) and type in the following:
<HTML>
<BODY>
<P>Hello <B>world</B>
<P>How are you?
</BODY>
</HTML>
Now save it as “index.html” and open it up in your Web browser (from the browser menus use File-Open-Browse). You will find that the <P>’s start new paragraphs, and whatever you put between <B> and </B> is bolded. Whatever goes into <> is called a “tag” or a formatting instruction. You now know enough to make basic text-only pages. The more tags you learn, the more complex the pages you can make.
The HTML code you write doesn’t specify the precise appearance of your page. Rather, the browser uses the code to “render” the page subject to the configuration of the computer being used.
Desktop Settings
If you run Windows 95/98, you can access your desktop settings by pointing your mouse at an empty spot on the desktop (the starting screen background where all those icons are displayed) and clicking the right mouse button (click the background, not an icon). This brings up a menu like the one shown. (See Figure 1.) Move the mouse down to “Properties” and click with the left button. You will get a menu of various settings from which you can configure such things as background pictures, screen savers, and sound themes, as shown in Figure 2. We are interested in the display properties of size and color settings found under the tab “Settings.”
Color
Under the color menu you might get a list of choices from “4 bit” (16 colors) to “32 bit.” However, 16 colors is very limiting, and only a tiny fraction of computers are still set to such a limited color depth. What is a concern is the roughly 10 percent of your site visitors who will be using a color depth of 256 colors. Variations in the display are small for the higher color depths. There can be a big difference, however, between how something looks at 256 colors and at “True Color.”
The difference is illustrated by the two screen shots superimposed in the image on page 122. (See Figure 3.) This is the same Web page being shown on the same computer, but with “True Color” on the top, and 256 colors on the bottom. In the bottom case the computer cannot display the colors chosen for the background image, so it approximates the color by “dithering.” It sets various pixels to colors it does know about to provide the correct average color.
This is one of the ways browsers can deal with colors they cannot actually display, and as you can see, the effect on the readability of the page and the quality of the graphics can be devastating. Another thing that can happen is simple rounding off. For example a very light color might be displayed as either pure white or as a darker color than intended (depending on which is closest of the 256 colors the machine knows about).
If you find undesirable effects when viewing your Web site at any color depth, then try remaking the images with the standard 256 color palette. This is a bit limiting, but it is safe because all computers will display the colors at the same shade. Setting this palette is dependent upon your graphics software. You may have an option to apply something like a “standard windows colors” palette. Make your own palette by specifying colors as a set of {red, green, blue} numbers. Most of the “safe” palette can be found by restricting these numbers to be one of 0, 51, 102, 153, 204, or 255. (If your program uses hexadecimal, the corresponding numbers are 00, 33, 66, 99, cc, ff.) This provides 6 red, 6 green, and 6 blue shades, for a total palette size of 6 5 6 5 6=216 colors.
|
