Simply cruise the Web — especially areas with lots of personal pages, like the GeoCities site or AOL's Hometown area — and you can find many examples of badly designed pages. But what is it that makes these pages bad? Of the many design mistakes you can make, three are common among new Web page creators: slow-loading pages, ugly color combinations, and small text.
Slow-loading pages
This is the No. 1 bane of Web page design, whether amateur or professional. People think they're designing a magazine and throw large, uncompressed graphics around, several per page. Then they add cute little design elements, each of which has to be sent as a separate file by the Web server. As each of the different elements comes in, the page design shifts and shimmies in a manner guaranteed to cause motion sickness. When a page of yours loads slowly, it's usually due to the fact you are committing one of two major errors.
Ugly color combinations
Many Web page publishers don't much care if the color combinations they use are attractive or not. Others care, but can't critically appraise their own work and see how ugly and/or difficult to use the result is.
You may understand that certain color combinations can be ugly, but maybe it seems odd for us to say that bad colors can lead to difficult-to-use pages. The reason is that on the Web, color identifies hyperlinks, with unused links and recently used links having different colors. The standard colors for links are blue for unvisited links and purple for visited links. If you change these colors, your visitors have trouble identifying which links they've visited and which links they haven't.
If you simply must change the link colors, try to use color combinations that are analogous to the standard ones — a lighter, eye-catching color for unvisited links, and a dull color for visited ones. This is at least similar, conceptually, to the standard colors. Then test the design on a few people and see if they can quickly figure out which links are which.
Now, back to ugly. Just because the Web makes it possible to use various color combinations doesn't mean you should do so. Black text on a white or off-white background is what people are used to, and is always the safest choice. And with this combination, the standard link colors show up really well. You can use a graphical bar at some consistent location on the page to give your Web pages a colorful, graphical look without sacrificing predictability and readability within the body of each page.
A few other color combinations work fairly well, but many don't. Remember also that some users run their monitors in 256-color mode and that only 216 colors out of the 256 — the Web-safe color palette — are the same on PCs and Macs. So a color combination that looks good on your system may look poor on a system with fewer colors; likewise, colors that look good on a PC may not look so hot on a Mac.
Small text (And large text, too)
A common mistake people make is to use small text on their Web pages. Small text does look kind of cool, and it allows you to pack in a lot of information. Because of these temptations, even large Web sites, such as early versions of the Microsoft site, have made this mistake. The trouble is that small text becomes very small text when viewed on a high-resolution monitor. So small, in fact, that many of the people who visit your Web site may not be able to easily read the text on your page.
Less common, but equally harmful, is text that's too large. You don't need to design Web pages with text that's readable from 20 feet away. Really. (People with true vision problems switch Windows and/or their browser to display text in extra-large size, so they have a way to read text that starts out normal size.) This looks awful, especially when viewed on a system with relatively low resolution, such as 800 x 600 resolution.
Both of these problems are made worse by the increasing tendency to embed much of a site's text in graphic images. This text always has a consistent look, because it is treated by the browser as a graphic image, but that look can easily be too small or large. When you save text as image files, the text can't be resized by the browser to accommodate different browser settings. So the user can't fix any problems they're having with graphically displayed text.
So what's "normal-size" text? Glad you asked. There's not one exact normal size, but there's a normal range. To find it, match the text size in your Web page to the text size in a few Web pages you like. Then ask several people — not all younger and hawk-eyed, nor all older and less visually acute — to tell you if they can easily read the text while sitting comfortably a couple of feet from the computer. If not, fix the problem before it becomes a burden for your Web site visitors.
Slow-loading pages
This is the No. 1 bane of Web page design, whether amateur or professional. People think they're designing a magazine and throw large, uncompressed graphics around, several per page. Then they add cute little design elements, each of which has to be sent as a separate file by the Web server. As each of the different elements comes in, the page design shifts and shimmies in a manner guaranteed to cause motion sickness. When a page of yours loads slowly, it's usually due to the fact you are committing one of two major errors.
- Error # 1 involves a lack of care with one or two individual graphics. By keeping these graphics files large, you doom the whole page to slow loading.
- Error #2 is to use graphics in a profligate manner in general. Highly designed pages can have lots of little graphical elements that cause many separate file transfers as the page loads. Unless the page is carefully designed, the page actually shifts a bit as each graphic comes in. The overall effect can be quite disconcerting.
Ugly color combinations
Many Web page publishers don't much care if the color combinations they use are attractive or not. Others care, but can't critically appraise their own work and see how ugly and/or difficult to use the result is.
You may understand that certain color combinations can be ugly, but maybe it seems odd for us to say that bad colors can lead to difficult-to-use pages. The reason is that on the Web, color identifies hyperlinks, with unused links and recently used links having different colors. The standard colors for links are blue for unvisited links and purple for visited links. If you change these colors, your visitors have trouble identifying which links they've visited and which links they haven't.
If you simply must change the link colors, try to use color combinations that are analogous to the standard ones — a lighter, eye-catching color for unvisited links, and a dull color for visited ones. This is at least similar, conceptually, to the standard colors. Then test the design on a few people and see if they can quickly figure out which links are which.
Now, back to ugly. Just because the Web makes it possible to use various color combinations doesn't mean you should do so. Black text on a white or off-white background is what people are used to, and is always the safest choice. And with this combination, the standard link colors show up really well. You can use a graphical bar at some consistent location on the page to give your Web pages a colorful, graphical look without sacrificing predictability and readability within the body of each page.
A few other color combinations work fairly well, but many don't. Remember also that some users run their monitors in 256-color mode and that only 216 colors out of the 256 — the Web-safe color palette — are the same on PCs and Macs. So a color combination that looks good on your system may look poor on a system with fewer colors; likewise, colors that look good on a PC may not look so hot on a Mac.
Small text (And large text, too)
A common mistake people make is to use small text on their Web pages. Small text does look kind of cool, and it allows you to pack in a lot of information. Because of these temptations, even large Web sites, such as early versions of the Microsoft site, have made this mistake. The trouble is that small text becomes very small text when viewed on a high-resolution monitor. So small, in fact, that many of the people who visit your Web site may not be able to easily read the text on your page.
Less common, but equally harmful, is text that's too large. You don't need to design Web pages with text that's readable from 20 feet away. Really. (People with true vision problems switch Windows and/or their browser to display text in extra-large size, so they have a way to read text that starts out normal size.) This looks awful, especially when viewed on a system with relatively low resolution, such as 800 x 600 resolution.
Both of these problems are made worse by the increasing tendency to embed much of a site's text in graphic images. This text always has a consistent look, because it is treated by the browser as a graphic image, but that look can easily be too small or large. When you save text as image files, the text can't be resized by the browser to accommodate different browser settings. So the user can't fix any problems they're having with graphically displayed text.
So what's "normal-size" text? Glad you asked. There's not one exact normal size, but there's a normal range. To find it, match the text size in your Web page to the text size in a few Web pages you like. Then ask several people — not all younger and hawk-eyed, nor all older and less visually acute — to tell you if they can easily read the text while sitting comfortably a couple of feet from the computer. If not, fix the problem before it becomes a burden for your Web site visitors.