If you knew the most common mistakes in designing Web pages, you probably wouldn't waste the first two or three months developing a project. Well, here they are! We have talked with Web designers around the country, asking dumb questions, trying to identify trends and common mistakes. Just about everyone had an opinion, and surprisingly, there was a lot of agreement.
These mistakes were grouped and distilled until commonalities surfaced. The resulting ten mistakes are presented in no particular order (we didn't have a beauty contest). Not all of the mistakes are fatal. However, when taken together, they go a long way in developing a philosophy of Web page design.
Rather than present the mistakes in a Wall of Shame, the authors have taken pains to recreate examples of mistakes and their possible solutions. This is sort of like the before and after makeovers you see in computer graphics and publishing magazines.
Solution: Download once, reuse many times. Build subsequent graphic images by combining elements that don't change with elements that do using the <TABLE> structure.
In Figure 11.10, two individual graphic elements are displayed. You can see by the Hypertext Markup Language (HTML) code that to accomplish this, two separate graphic files have been loaded. Because each graphic is a separate file, each is cached in case it might be used again.
Compare the first example to the second. The figures look the same but with a big difference. The body of the graphic (body.gif) was downloaded once into a table structure. The first graphic is displayed using the BORDER option so you can see how HTML adjusts cell size automatically. The part of the graphic that was changed (spot1.gif) was also loaded into the table. What was saved? body.gif was loaded once and cached, ready to be used in the second table. Only the much smaller spot2.gif was downloaded to complete the second graphic.
Solution: Provide alternate text links and textural descriptions of graphic resources.
Don't assume that everyone has the same Web functionality that you do. Design for the lowest denominator. There might be potential visitors out there with visual handicaps who use special software to synthesize text, which allows them to interact with Web pages…if they have text links.
The first example in Figure 11.9 shows a graphics-only page. The second example takes those same links and displays them using a text link menu. A client without the ability to use your graphic links (tables, image maps, <HREF> buttons) will be able to navigate your pages.
Figure 11.9 : The simple addition of a linked text menu increases your page's flexibility.
Solution: Use an adaptive palette and the smallest bit depth possible. Use black-and-white bitmap graphics, reduced grayscale images, or limited color 8-bit graphics.
Reducing your color palette reduces the size of your graphic. It also reduces the amount of color mapping and dithering done on the client side, bringing your pages to the screen faster. So reducing color palette depth and dimensions has a double benefit.
The first example in Figure 11.8 shows our little logo and the full 256-color system palette. The second example shows the same graphic with the colors that are actually used and with color depth set to 4 bits.
Solution: Make it obvious on the splash page what resources are necessary to fully use your site. Better yet, let the user decide which version of your site is appropriate for his equipment.
The first example in Figure 11.7 shows an initial screen (sort of a pre-splash screen) that allows the user to branch to a group of HTML files and resources appropriate for their resources. This is called a front end. Building this flexibility into your Web site makes extra work on your part, but is a really positive design move-especially if you have pages designed for specific browsers or graphic applications.
A different alternative is shown in the second example. This downloads the necessary resources on demand. Unfortunately, most require that they be installed, the system rebooted, and so on-not exactly a smooth flow of information.
Solution: Reduce the saturation of any background tile (take the color out and make it more gray). Use simpler designs for the tile. Make the tile larger.
The first example in Figure 11.6 shows our HY-WIRE logo in all its glory as a repeating background tile. Note how difficult it is to read even the large point size text, let alone the smaller copy. The logo is both too dark and too colorful to allow the text to stand out.
Figure 11.6 : A background graphic should allow text placed on top to be easily read.
The second example uses the logo as a background element, embossed on a much lighter background. See how all the text is easier to read and the logo now becomes a true background. To accomplish this, the original logo was enlarged 200 percent. Its contour was traced, and the saturation was reduced 100 percent. This gray image was then embossed and lightened. A color from the original logo was lightened and then lightly filled over the entire canvas. The result? A lightly embossed tile that is subtle yet full bodied.
Solution: Provide a direct link between any page and the home page.
This function can be accomplished by a word list link or by a consistent icon. The word can be simply Home, which most people understand to be a return to the home page. If you use icons to link to various pages, you might use the dominant icon from the home page.
Figure 11.5 shows versions of a navigation bar displaying increasing levels of control. The first panel simply allows forward and backward movement. The second panel provides links to level-one sections in the HY-WIRE Web site. The third panel includes the HY-WIRE logo, which appeared on the home page-a link to each entry page in the site. The last control panel includes textual explanations of the controls, which is an aid if the icons are not universally understood. If placed in a frame or directly on a page as an image map, you can see how much more power you give the user as navigation ability increases.
Figure 11.5 : Increasing levels of navigation control.
Solution: Use well-dithered Graphical Interchange Format (GIF) thumbnails linked to high-quality Joint Picture Experts Group (JPEG) graphics. Include a description of the subject and its size.
It really doesn't take much more effort to give the reader this control, as Figure 11.4 demonstrates. The first page shows an inline JPEG graphic of approximately 280KB. The second page includes a 39KB thumbnail of the graphic, its description, and size. The thumbnail is linked to the JPEG file.
This has the added benefit for readers whose browsers may not support the file type you embed inline.
Solution: Use the same background color as was on your original graphic. Remove all anti-alias pixels from your graphic in a raster editor such as Photoshop.
A large percentage of Web graphics were created for other purposes, and unfortunately, plopped onto Web pages without thought as to how they will look in their new environment.
The main culprit is anti-alias. When a graphic has been anti-aliased, its outside pixels have been blurred with the background color. The easiest solution is to always use graphics that have been originally created on white backgrounds and set your Web pages' background color to white. Removing anti-alias from one source so you can use it in another is always a compromise and results in something not quite as good as the original.
The first example in Figure 11.3 shows what happens when you place a graphic from various backgrounds on a white page. Each anti-alias halo is a little different because each blend is between the object and a different background color.
The problem of correcting this is made more difficult when the illustration itself has varied colors. The example here is for the most simple case, a black figure. In any case, you will almost always end up with either a slightly larger or smaller graphic.
One solution is shown in the second example of Figure 11.3. Follow these steps-top to bottom, left to right-in Photoshop:
Solution: Use techniques for expanding your creativity. Create a swipe file, read the resources cited in Chapter 3 "Creating Cool Graphics for the Web." Create at least three different versions of your template page design.
There isn't anything fundamentally wrong with developing an identifiable style. If you use a systematic approach to analyzing and solving graphic problems, solutions will take on their own form.
As you might guess, there are an infinite number of possible solutions to every graphics assignment, and your chance of finding the best (or optimum) solution isn't very good. However, if you try several solutions, you have a better chance for success than if you try just one.
Figure 11.2 shows several solutions to our HY-WIRE graphics logo. Even though the same elements were used in each, the results are quite different. Some solutions vary typographic design while others experiment with justification, alignment, overlap, and montage. Which one do you like the best?
Figure 11.2 : A variety of styles can be used to express the same information.
Solution: Unless you're doing this strictly for fun, someone will be evaluating your work-either the person hiring you to make the pages or the person looking at your pages.
If you want the opportunity to design pages again for your current client or for someone else, you had better learn the technology, the tools, client expectations, and user psychology. Revisit Chapter 10, "Understanding Form and Substance: The Dilemma of Web Style," for a discussion of how important this is.
Figure 11.1 is an actual job posting for a Web developer. Read it carefully. What does it tell you about who you will design the Web page for?
Figure 11.1 : Job description for a Web developer.
Now that you've studied our top ten list, get out there on the Web and become a critic! Better yet, become your own best critic. If you can avoid the big ten, there's a great chance that your own Web pages will be both effective and attractive.