Top 10 do's and don'ts

By Toni Will-Harris

No matter how attractive a site's design, if it isn't practical, it's not doing its job. Design for the screen involves a new set of requirements to deal with and pitfalls to avoid.

1

Keep graphics files small. Cyberspace has the unique distinction of being the first medium where you can actually bore your readers by being too exciting.

Design for the World Wide Web is a balancing act between the graphic "wow" and the real-time "now." The more graphically intense a site, the longer it can take to download. The longer it takes, the higher the probability that the visitor will leave before it's done.

On intranets, smaller file sizes can help make the system run faster with less overhead. Performance means productivity.

While modems are getting faster, most people on the Web are still connected at 28.8--and even then the Web doesn't always run at top speed.

With a 28.8k connection, your computer can receive, on average, 2K per second.

No one wants to wait even 30 seconds just to see your site logo--if your graphics are too large people will turn them off or jump to another site. If possible, keep all graphics under 20K. Essential graphics for navigation should be less than 10K. You can do this using reduced color palettes, such as a carefully selected 4-bit palette instead of the full 8-bit palette. In some cases this can reduce graphics in half.

For the most efficient files, you must use the right file type. Here's the simple rule for deciding which format to choose:

• If your graphics have many colors, save them as JPG files.
• If your graphics have few colors, choose GIF.
• When using GIF, try optimized palettes that contain only the colors used—they can cut file sizes in half.

Use only the resolution you need. Computer screen displays have an average resolution of 96 dpi (dots per inch) for Windows, 72 dpi for the Mac. This means your graphics should be saved at a resolution not greater than 96 dpi—otherwise you're just wasting your readers' time.

Here are some Web-centric graphic programs that can help reduce your graphics:

Programs to use by themselves:

• CorelXara - This exceptional Windows-based illustration program comes complete with everything you need to create the smoothest, yet most efficient, Web graphics and animations. The program is lightning fast, extremely powerful, yet features a clean, simple interface that makes it great for new users, and design power and flexibility that's great for professionals. Graphic previews of all exports help you create the best-looking, fastest-loading Web graphics. Under $100, Windows only.
• Macromedia FireWorks -  A professional-strength illustration program designed specifically for web graphics. Special effects let you enhance text and graphics. Previews help you create the most efficient graphics.

Programs to use in conjunction
with other graphics programs:

• Adobe ImageStyler and ImageReady - These programs are for professionals who already use graphics programs such as Illustrator or Photoshop. Their Web-specific features include animation and export previews. The interface will be familiar to Adobe users but may be overwhelming to newer users. Windows and Mac.
• Debabblizer - This comprehensive graphics tool helps you optimize Web graphics, reduce palettes and therefore file sizes, and perform batch conversions to and from countless graphics file formats. Windows and Mac.
• Ulead SmartSaver - Find the best balance between image quality and size using this utility. Windows only.
• Autofx Webvise totality - This Photoshop-compatible plug-in lets you preview Web exports so you can create the most efficient files for the Web. Windows and Mac.

2

Keep text files small. Text files rarely need to be longer than 10K. Instead, they should be broken into logical chunks and linked. If a home page doesn't load quickly, visitors can lose interest and jump elsewhere.

3

Design for easy reading. Don't trade readability for style. Make your backgrounds as light as possible (white or pastels—just make sure they use "Web-safe" nondithered colors). If you use a background image, keep the action on the side, out of the way of the text, or make it very light, low contrast, and nondithered. Use black backgrounds only on pages with large text, such as headings, then switch to dark text on a light background for pages with "normal" size text.

Because most computer screens are wider than they are tall, and good typography for the best readability demands shorter line lengths (between 30 and 70 characters per line), it makes sense to put navigation on the left (or right) side of the screen. This layout is becoming increasingly popular because it's practical and allows the site to reserve part of the screen (usually between 150 and 200 pixels) for navigation and identity. Use fixed-width tables to assure that lines don't get too long—no matter the viewer's resolution or window-size.

4

Design for 256 colors (8-bit) and 640x480 resolution. That's the lowest common-denominator for people with older computers. Many people viewing the Web can only see 256 colors at a time on their computer screen, so creating 24-bit photo-realistic files is usually overkill. Create and view your Web site at 640x480 because that's the screen resolution many of your readers will use.

That said, this is changing. As more people get newer computers, they can see more colors (thousands to millions) and higher resolution. Current statistics say that only about 11% of site visitors have only 640x480 resolution, and only 8% have only 256 colors. That number is also decreasing by about 1% every three months.

That said, it's still a good idea to design your entire page for 800x600, but keep the text portion of your site within 640x480. That way you get the best of both worlds. People with older computers will still be able to read your content, even if some parts of the page require scrolling.

Also, as LCD display prices drop, more people will buy them. Many LCD displays can "pivot" to show the screen in portrait mode (more like a normal piece of paper). In that mode, the displays show 768 wide by 1024 tall, so designing for 800 wide is too wide. So still don't design for 800 wide, design for around 740 wide.

5

Use "ALT" tags on graphics. ALT text appears before the graphic does, or in place of the graphic for users who have turned graphics off for speed. If you don't use ALT text, then users may just see a bunch of boxes with no explanation of what they are. This is extremely important, and easy to add. NetObjects Fusion automatically adds the filename of the graphic, but you should still take a moment to make sure the ALT text is truly descriptive. If you're using a graphic in place of a paragraph or more of text, type the same text into the ALT box—even long blocks of text will appear in the browser so people can read it before the graphic downloads.

6

Include contact information on every page! Web readers often want or need to contact the people who created and run the Web sites—often to ask you more information about your products or services. It's important to include your company name, address, e-mail address, and your phone and fax numbers on every page. If you don't want people calling, include your e-mail and mailing address at the very least.

Why? Because people often save pages to disk, or print them. If you don't include this information, chances are good they won't be able to contact you, or find your site again to get that contact information.

Every page should have the site's main URL included, usually at the end of the page. This helps users return to the page (if they've saved it to disk and want to go back to your site later) and it ensures that when the page is printed, readers still know where the page is from.

With a program such as NetObjects Fusion, it's easy to include this information on every page; simply put it in a single MasterBorder.

7

Keep your site fresh. Unlike printed matter, a Web site is not a one-time project--it's an on-going one. Be prepared to update your site, at least once a month, adding new information, discarding anything out-of-date.

Repeat visitors are always desired, so give them something to come back for. Try to include a "hook": a service or current information tied to your expertise that will bring users back to your site regularly. On my site, we offer EsperFonto, the Web's only interactive typeface selection system, something people come back to use often.

Your Server may send you statistics showing you which pages were accessed most often--and this will help you focus your site on what your visitors like the best (or tell you if visitors can't follow your navigation).

8

Be generous. The Web is no place for skimpy "capsule" information. The more detail you provide, the more of a service you offer, and the more reason you give people to visit your site.

9

Be backward compatible. Using cutting edge technology can exclude readers. Many if not most users will be at least one generation behind, so don't shut them out.

10

Test your site as visitors will see it. Connect to it at 14.4 and 28.8 to see how fast it really is—too many sites are shown-off in-house, directly from the hard disk. This hides performance errors and gives viewers an unrealistic experience.

At 14.4 site visitors will receive as much as 1K per second (that's a best-case scenario). At 28.8 it can be as much as 2K per second.

See it as your visitors will—and this means viewing your site at several resolutions (640x480, 800x600, 1024x768) and color depths (256, 16-bit, 24-bit), on several browsers (Netscape 2 and later, Microsoft Internet Explorer 2 and later) and OS's (Windows, Mac). While no site looks identical on all monitors, browsers, and computers, you can design sites that look good on all—but only if you test the site on all. For more testing tips, see Testing, 1, 2,3

About the Author

Toni Will-Harris is a writer, designer, and naturalist who runs the Point Reyes Chipmunk Observatory and Gardens. She can be reached at Toni@Will-Harris.com. This picture is not recent—or actual size.
 

Illustration: Business Constructions by Russell Thurston for www.artville.com