Illustration by Bill Mayer

If you're like most, you've spent a lot of time and money designing and decorating your retail space for success. But have you done the same for your Website?

Lately we've seen many Websites that offer good information and function as a great patient communication tool for eyecare professionals-but they're hideous! Why would an optical retailer who projects a professional image through his or her physical store, brochures, stationery, and advertising choose to maintain a Website that is poorly designed, difficult to navigate, and unattractive to boot?

The answer is, no one would choose such a site, but the Web is such a new medium that, in a rush to participate, many businesses (including Webmasters) have published sites that are less than optimal, simply through inexperience. Now that the learning curve has become less steep, many sites are undergoing a redesign.

Hit the Senses

Whether you are redesigning your site or publishing for the first time, here are some tips for not only making your site attractive and professional, but also creating a cyberspace image that mirrors the best points of your physical location.

Choose a domain name your patients will remember. Good one-word optical names are hard to find, but use your imagination and you might come up with a memorable phrase (such as eyewannasee.com).

Or get a name that identifies your practice (such as joneseyecare.com). The main rule is, it must be easy to spell.

Design the site so there's a sense of "flow." A good eyecare center has signs or other indicators so patients know where they are; a good Website does, too. Before you build your site, either draw a flow chart or write an outline, listing all the pages you want. This is your blueprint.

Make sure the site is expandable, should you want to add pages later. This means leaving extra space in the menu area for new links. Every page must have either a menu or-if you want the page to be a "dead end"-a "back to the previous page" button.

There's a dairy store in Connecticut called Stew Leonard's that flows just one way-toward the cash register. Websites with just a few pages work well with this kind of one-way scheme, but if yours has a lot of information, or if you're doing e-commerce, you'll want to offer visitors the choice to jump around.

Web user studies show that most people want to know where they are in a site, where they've been, and where they have yet to go. The best way to accomplish this is with text links rather than graphic menu buttons. You can specify that the unvisited link be in one color, with the already-visited link in another color. Also, large portal Websites such as the Yahoo! directory have a "You are here" text line on every page that displays the path back to the home page.

If you're doing e-commerce-such as providing contact lens refills or selling sunglasses-do some testing with friends and staff members to make sure the ordering process is logical, complete, and unfrustrating.

Choose a color scheme. If your retail space and marketing materials use a specific set of colors, extend that to the Website for greater brand identity. Soothing light greens and blues are good "health colors," and they look good in most browsers, which tend to have default color schemes of gray and blue. If your dispensary is decorated in earth tones, burgundy, or dark green, use these as accent colors (e.g., in navigation bars, rules, or headline type). For the home page or a pre-home "splash" page, dark backgrounds can be dramatic. But no one wants to read large amounts of light-colored copy against a dark background.

A three-color scheme is best, with one dark, one light, and one medium tone. This gives you enough colors to work with but not so many that the site becomes too "busy." And of course you'll want colors that mesh well with your logo.

A book by Lynda Weinman and Bruce Heavin called Coloring Web Graphics (New Riders Publishing) is a great source of ideas for color schemes. The book also explains the concept of "browser-safe colors," a set of colors that you should stick to if you want to avoid the fuzziness and dithering that can occur when someone views your site with a computer that displays only 256 colors. This is a common problem with older computers as well as many laptops, even some new ones.

Design your site to display in a screen with 640x480 pixel resolution. While most desktops have 800x600 or higher resolution these days, older desktops and many laptops still use the smaller format. A good page width is 590 pixels, with the most important text and graphics within the top 300 pixels, so they are viewable when the pages load.

Avoid placing type on busy backgrounds. It's fun to create a background with a logo that repeats or a textured background. But the reality is, it's very difficult to read type on these surfaces. Save it for the navigation bar or as a background box for photos. A white background is always best for the main body of a Web page, but sometimes light-colored backgrounds (tan, pale blue, light olive green) are striking, too. Use black type for the main body copy, with either bolded black or bolded color type for headlines and subheads.

Use simple type styles. Most professional Websites use either Times Roman, Arial (or Helvetica), or Verdana-or a combination of two or three of these. Browsers will display type only in fonts that are actually loaded on the user's computer, and most computers have these three typefaces. If your site was created in Futura and a user doesn't have Futura on his or her computer, type will be displayed in a default face that is specified in the browser, for a look you may not like.

Interesting faces such as Mikity, Lucinda, or Copperplate can be used in graphics, but they don't usually work well in html for the above reason. Also, intricate type can appear slightly pixellated; avoid italicized text for the same reason.

Include graphics on every page if possible. Use only high-quality photos: They must be in focus and cropped so that the central object or person is featured and unnecessary background (which only increases download time) is eliminated. Decide on a maximum width for your photos, and size them all to fit within that width (e.g., 200 pixels wide). Have text wrap around photos for a professional look.

Orderly Filing

Use the proper file format for each graphic. One reason many Websites have poor graphics is, the Webmasters chose inappropriate image formats. Use the .jpg format for photos and any line art that has gradient shading. Use the .gif format for line art that's just text, lines, and simple shapes (such as logos and drawings of the eye). For .gifs, always reduce the number of colors in the image as much as possible, which will reduce the file size.

Fun-to-use Web graphics editing programs are Paint Shop Pro (for PC) and Adobe Image Ready (for Mac or PC). Also, Microsoft's Image Composer creates wonderful "arty" effects with photos (converting them into Impressionistic paintings or chalk drawings, for example).

Keep file sizes small. The overall download time that a visitor experiences is determined by the number and size of graphics on a page, as well as the length of the text and number of tables used. In general, the fewer and smaller the graphics, the faster the page will load. One way that large portal Websites minimize download time is to use only hyperlinked text for their navigation menus, instead of graphic "buttons." Avoid silly animations, too. They're fun but usually unprofessional, and their file sizes are often too large. A good guideline is to keep your pages (html file plus all graphics files) to less than 30k total.

Be consistent. It's confusing when one Web page has a different structure than another page, or when you change type faces or colors for no reason. Most Websites have a home page with one style and structure, then sub-pages with a modified one that still contains design references to the home page.

This is because the home page usually serves as a welcoming area that positions your business as well as a table of contents for the rest of the pages, which are for the actual content. To ensure that all sub-pages have the same style and structure, create one, tweaking it until you like it. Then use it as a template for all the others.

Place body text in tables instead of letting it run straight across the entire screen. Readers are encouraged to read more when text is in narrower tables, because they feel as if they are making progress faster each time their eyes hit the end of the line. Make tables that contain text no wider than 400 pixels. Always left-justify body text; centered text is less reader-friendly, though it's fine for headlines or photo captions.

Keep it friendly. Although you'll want a professional image and worthwhile information on the site, you don't have to be boring. While writing the text, pretend you're having a conversation with a patient, using everyday language, not "business-ese" or medical jargon. Keep it short, because people won't read long articles on a computer screen.

It's great to include a history of the practice or an explanation of what astigmatism is, but one or two paragraphs will do. Add personal touches: for staff bios, include a funny quote from each person, and use informal snapshots of people instead of professional photos. Include photos of your physical location, with shots of the frame board and someone trying on glasses. This is a great opportunity to impress people with your product selection and lure them into the store.

Include a map of your location. There are dozens of places on the Internet where you can link to a map, such as MapQuest. Or draw your own in a graphics program such as Paint Shop Pro (saving it as a .gif). This way you can control the colors and include features that won't appear in Internet maps, such as businesses next door.

Designate someone to be responsible for updating the site. It can be a Webmaster or someone in your office with Website experience. Include the date on the home page, so visitors know it's current. Even if you make no other changes to the site, publish it with a new date often.

If you have an online store, someone must also be responsible for checking and processing orders. He or she should check them every day. People who shop online expect fast order turnaround, so if your orders tend to sit around for a week, your patients will probably shop somewhere else on the Internet.

Good Website design is a combination of pleasant, professional appearance and thoughtful attention to visitors' needs. In that respect, it's really no different from designing your physical store. EB

Liz Segr� designs Web sites for the optical industry, and writes frequently on optical issues for the Web and other media. She can be reached at lizs@access-media.net