25 Steps Toward Reader- Friendly Web Sites
By Roger C. Parker Summary:Planning:
Starting with a purpose, knowing your audience, establishing an information hierarchy, and determining the image you want to project.Designing: Keeping things simple, avoiding unintentional crowding, working with colors, using the most appropriate typefaces, avoiding long lines of text,
inserting frequent subheads.Building: Assembling all the pieces, using forms, designing for speed, using Web-safe colors, keeping visitors informed, showing restraint, working efficiently, checking your spelling.Publishing: Promoting your site, establishing reciprocal links, keeping your site fresh, checking your site daily, following up with visitors.Successful Web sites require more than eye-catching graphics and snappy writing. If you want your Web site to succeed, you need to provide the information your
prospective buyers or supporters need in as reader-friendly a manner as possible. This requires care at each step of the Web site creation process. As a guide, keep the following ideas in mind as you proceed through the four major steps involved in creating your Web site, i.e. Planing, Designing, Building, and Publishing. At each step, aim to create as reader-friendly a Web site as possible.
Planning Start With a Purpose Have a clear set of objectives in mind before beginning work on your Web site. Write down the action you want your Web site visitors to take. Do you want them to join your organization, request more information, hire you as a consultant, or make an immediate purchase
on-line? There's a world of difference between Web sites intended to invite prospects to request information and Web sites intended to make immediate sales. Every page of your Web site, and every word and graphic on every page, should support your Web site's goals. Clearly defined objectives help you focus your energies on creating a Web site that will both avoid wasting your Web site visitor's time and help you get the results you desire. Know your audience Analyze your audience in terms of their attitudes, existing knowledge, and motives. Put yourself in your audience's shoes and ask yourself: "What information do I need to make a decision?" "What are the pressing problems I'm seeking solutions to?" "What obstacles must I overcome to get the response I'm after?"
Your answers to these questions will help you determine the information you need to provide the right content for your Web site. Establish an information hierarchy. Before you turn on your computer, you should have a good idea of the relative importance of the information you're
going to communicate. You should be able to separate your most important ideas from secondary ideas and information that is merely supportive. The clearer the idea you have of the relative importance of the various text and graphic elements that comprise your message, the easier it will be for you to set up a reader-friendly, easy-to-navigate Web site. Determine the image you want to project
Decide whether you want to project a conservative or a contemporary image. Or, do you want to appear formal or informal? Do you want to appear affordable or expensive? The type of image you want to project will determine the most appropriate colors and graphic accents for your Web site. As a starting point, take the time to review the various templates that accompany NetObjects Fusion. Notice how
differently you react to each of them. Notice how differently you respond to the Fred's Bank template than you do to the Venezia template. Hint: Use the up/down cursor control keys on your keyboard to quickly scroll through the various templates. Note: NetObjects Fusion only installs some of the styles you can use—there are dozens more on the program CD. Use eFuse's Stylizer to quickly view all the styles at your command. Design Keep things simple
There is beauty in simplicity. Choose the simplest design that can communicate your message and make navigation as easy as possible. Although commonly used features, such as frames (that display more than one page on the visitor's browser at one time), may be sometimes appropriate, in most cases they add unnecessary complexity to your Web site, make it difficult for your visitors to bookmark and print pages, and slow down its performance. Avoid unintentional crowding The layout you choose for your Web site should reflect your site's contents as well as build in white space (or breathing room). A Web site consisting entirely of text, i.e. long articles, requires a different layout than one intended for large graphic images. The easiest way you can build breathing
room into each page of your Web site is to use NetObjects Fusion's MasterBorders feature that ensures that top and side margins will remain consistent from page to page. Choose the most appropriate colors Visitors to your Web site will make immediat e "stay" or "move on" decisions based on the colors used on your Web site. Color not only influences the mood, or image, your Web site projects, it also determines how easy or hard visitors will find your Web site to read. Choose the wrong colors and your Web site will project an image at odds with the message you're trying to communicate. Worse,
choose the wrong combination of text and background colors, and readers will find your message nearly impossible to read! (You're always safe sticking with the colors used in the templates provided with NetObjects Fusion.)
Strive for maximum foreground/background contrast When choosing your own colors for your Web site, make sure there is always sufficient contrast between foregroun d (i.e. text, link, and visited link) colors and the background the text appears against. If there is insufficient foreground/background contrast, visitors to your Web site will have difficulty reading your text. Keep text lines short.
Use the minimum number of colors Often, the most beautiful Web sites are those that use the fewest colors. A few well-chosen colors used consistently throughout your Web site projects an image of professionalism. In addition, the restrained use of a few repeating colors makes it easier to use color to add impact, or selective emphasis, when desired.
This site uses only four basic colors—black, white and two web-safe blues. A lighter shade of this blue (used in the background of the home and section pages) was created in CorelXara by creating an "ordered dither."
As you preview the templates that accompany NetObjects Fusion, notice how they are typically created using only a few colors. NetObjects Fusion makes it easy to choose and use a consistent palette for each of your Web sites by creating custom color palettes for each of your clients or Web sites. This makes it easy to consistently choose precisely the right colors, instead of allowing inadvertent changes to creep in. Choose the most appropriate typefaces One of the best ways to influence the image or mood of your Web site is to set headings in distinctive typefaces. The simplest way to do this is to create graphic images of the headings, using a program such as Paint Shop Pro, Photoshop, or Xara (Click here to read more about setting text as graphics. Click here to read how to set graphic text automatically in NetObjects Fusion.)Delicate, serif typefaces (such as Fairfield or Garamond) communicate a more formal and traditional image than thick, heavy, sans serif typefaces such as Arial Black or Frutiger Black, which are more modern. Always keep your intended image in mind when choosing typeface designs for text that will be downloaded as
formatted graphic images. If you're not sure what image a typeface conveys, visit EsperFonto, the Web's interactive typeface selection system. Avoid long lines of text that extend from
edge to edge of the computer screen. Long lines of text are extremely hard to read. Worse, they give your Web site a claustrophobic, "filled up" image that discourages visitors from staying. Instead, use tables to control, or use NetObjects Fusion's text block feature to create columns of text surrounded with plenty of white space to the left and right. To read more about type on the web, click here. Insert frequent subheads Subheads are one of the most important tools in creating
reader-friendly Web sites. Subheads encourage readership by breaking long articles into short, bite-sized chunks and make it easy for visitors to locate desired information quickly. Each subhead adds visual interest to your article and serves as an advertisement for the text that follows. Subheads succeed when they form a strong contrast with the text they introduce. This contrast can come from mixing sans serif subheads, such as Verdana Bold or Arial Bold, with serif
text (such as Times New Roman.) This works much better than simply using Bold Times New Roman for subheads. Building Assemble all the pieces before you start You will probably work most efficiently if you create the text
and graphic elements needed for your Web site before beginning work on the Web site itself. That way, instead of interrupting the Web site creation process by writing text and loading different software programs to create illustrations and scan photographs, you can concentrate on just one task: creating a naturally flowing, reader-friendly Web site. Use forms to encourage response Forms make it easy for visitors to supply you with their name and contact information for follow-up. Forms also permit visitors to let you know their areas of interest, the urgency of their intention to buy as well as how they located your Web site. Forms also make it easy for visitors to help you fine-tune your Web site by identifying the areas of your Web site they found most useful/least useful. Programs such
as NetObjects Fusion make it easy to add forms to your site without having to worrying about programming. Design for speed Although you may possess a fast computer and Internet connection, the majority of your Web site visitors are unlikely to be so fortunate. Always design for the lowest common
denominator by choosing the right format for graphic images and by keeping image sizes as small as possible. Hint: When you want to include a large graphic, such as a scanned photograph, in your Web site, instead of forcing visitors who may not be interested in viewing it to wait for it to download, include a small (i.e. 15% to 20% of final size) thumbnail image as a link to a larger image that visitors can click on if they want to view the image.
Use only web-safe colors Web-safe colors display accurately on the majority of Apple Macintosh and PC computers running Microsoft Windows. If you stray beyond the Web-safe color palette, you take the chance that the colors will dither--or display incorrectly and not very attractively. NetObjects Fusion's Color Picker
defaults to the "Browser Safe Palette" reminding you to choose only colors for backgrounds, text, and objects (such as navigation buttons) that will look good on the majority of computer platforms. Read more about Web-safe colors. Keep visitors informed Use ALT text to maintain your Web site visitor's attention as graphic images such as logos, photographs, and formatted text downloaded as graphics download. Using ALT text, you can maintain the visitor's attention by describing the image as it's downloading or by explaining its importance. ALT text
is also important because many visitors to your Web site may have graphic images turned off to speed their searches for important information. NetObjects Fusion's Picture Properties dialog box makes it easy to add ALT text. Employ movement with restraint Just because it's possible to add movement to your Web site
doesn't mean it's always appropriate. Add movement with care. Extraneous movement, i.e. bouncing balls, rotating logos, etc., can detract from your message by distracting your visitor's eyes. With movement, less is always more. One moving element attracts attention (such as a word that fills in, one letter at a time); two moving elements compete with each other and undermine your message. It's one thing to use NetObjects Fusion's powerful Time
Based Picture component to create a virtual slide show of time-based pictures automatically showing various views of your product in use. It's quite another to expect visitors to pay attention to text while your spinning logo is competing for their attention! Work as efficiently as possible
The more efficiently you work, the more time you have to double-check your work and update your Web site. One of the best ways you can work as efficiently as possible is to take advantage of the numerous keyboard shortcuts built into high-quality software such as NetObjects Fusion. Keyboard shortcuts eliminate the need to take your right hand off the keyboard, reach for the mouse, open a menu, select a command, and then return your hand to the keyboard. NetObjects Fusion incorporates numerous
keyboard shortcuts that allow you to change views, select one (or more) text or graphic objects, or navigate between pages. Refer to NetObjects Fusion's Quick Reference Card to review the various keyboard shortcuts available. For example, you can use the Tab key to select the next object or use the Shift+Tab key to return to a previous object. To view your Web site from your visitor's perspective while working on it, use Shift+U keyboard shortcut to toggle between showing
and hiding rules and guides. Run the spell-checker one last time Before posting your Web site, even if you've just changed one headline or caption since the last time you ran the spell-checker, run it again. Embarrassing errors tend to creep in at the last minute. These errors undermine the
professional image you've worked so hard to create. Publishing Promote your web site Don't
keep your Web site's address, or URL, a secret. Add it to all of your print material s, including ads, brochures, business cards, invoices, labels, letterheads, and newsletters. In addition, be sure to register your Web site address with the important Web search engines
. You also can add meaningful text, called meta tags, identifying the contents of your pages to the headers of your pages so search engines can locate your site.
Establish reciprocal links with other web sites No man or woman is an island, and neither are their Web
sites. Contact noncompeting Web sites that attract the same type of visitors as you are interested in and suggest reciprocal links. For example, if you have created a Web site for a local railroad historical society, make sure the leading railroad magazines list your Web site address in their "resources" section and include the publication's Web site in your organization's "resource" listing.
Keep your web site fresh Provide reasons for visitors to return by posting new information at appropriate intervals. New content gives visitors a reason to return and gives visitors a reason to recommend your Web site to their friends. Make changes obvious by providing prominent Home Page access to the new material. You also can add a "What's New" page to your
Web site. Often the best way to encourage repeat visits is to send an e-mail to visitors who have registered letting them know when you have added new content to your Web site, explaining how this content will benefit them. Check your web site daily Set up your browser's Preferences so your Home Page
becomes the first page that loads on your computer every time you access the Internet. This gives you a unique, first-time visitor's perspective of your Web site and also helps you make sure it is loading properly and the latest updates you've posted appear correctly. You should also get in the habit of frequently clearing your Web browser's cache so the pages that display will be those most recently posted. Immediate follow-up Respond as quickly as possible to visitors to your Web site who ask a question or request further information. If visitors have taken the time to contact you, they should be treated as valued prospects ready to buy. The longer you take responding to them, the more chance they'll lose their urgency to buy--or will buy elsewhere. About the author Visit Roger C. Parker's Meaningful Content Web site. Roger has written numerous books including Roger C. Parker's Guide to Web Content and Design (MIS Press).
Illustration: Ingo Fast´s Technology for www.artville.com |