Jump to main content.

Guidance for Web Products

Designing a product for the Web involves many of the same considerations as designing any other type of product. Information must be written clearly and organized logically.

Contents

More resources for Web development

Write for Your Audiences

Identify your audiences. You must define your target audiences. Ask yourself why they need to read your Web page. Identify people who might be interested, including those not directly affected. When you communicate a concern for your readers' needs, they are more likely to be receptive to your message. To determine how best to communicate your ideas and to whom, brainstorm with your co-workers:

Use appropriate language. Choose vocabulary, syntax and tone appropriate to your audiences. You may need to write some information in several different ways for various audiences.

Provide different amounts of detail on each subject. Think "bite, snack, and meal." A bite is a headline, a snack is a short summary (write a specific summary instead of copying the first few sentences of a longer document), and a meal is everything EPA can offer on a subject. Home pages and other navigation pages should provide bites and snacks to allow readers to decide whether they want the full meal. To help people browse, meal pages should provide links to pages listing other bites and snacks.

Top of Page


Be Credible

Your sources must be of sufficient breadth and depth to be credible. Is what you are saying established fact, consensus, or working hypothesis? Present evidence to back up your claim or explain the unknowns and variables. Cite the source of any information quoted, or borrowed from a document, publication or Web site.

Clarity is also a sign of intellectual openness and integrity. Distinguish between regulations and guidance, requirements and suggestions, command and cooperation. Say clearly who is requiring what. Is your information from EPA or other federal/state/local government sources?

Top of Page


Write Well

Organize text as carefully as you design layout:

Use the inverted pyramid. Journalists sell their content by bringing the conclusion to the top of the story. Start with your conclusion and build down to the background information. Include links to the details.

Use plain language. "The best way to find ..." is much clearer than "the most effective methodology for assessing the location of ..." Even for more sophisticated audiences, avoid needlessly verbose or flowery language (e.g., use "now" instead of "at the present time"). If you write plainly, readers will:

Avoid jargon. define acronyms, abbreviations, and scientific terms. People just entering your area of expertise don't know the special terms. Remember that people jump into pages from search engines and may skip the first time you use an acronym, so spell things out more often than just at the beginning.

Use active sentences. Government tends to use the passive voice, which sounds bureaucratic. Using active sentences keeps your audience's attention and clearly indicates who is responsible. For example, "it will be necessary to carry out this protocol" doesn't say who has to do it as clearly as "companies operating regulated equipment must carry out this protocol."

Make your text timeless.

Top of Page

Make Pages Easy to Scan

People read Web pages differently from paper publications; they're more likely to scan for tidbits than read long passages. You can help make a page more informative by helping readers scan.

Be concise. You have approximately eight to ten seconds to capture your readers' interest. Avoiding wordy, jargon-filled sentences will help them grasp your message quickly.

Use the standard EPA style sheet. Do not adjust font sizes; they are chosen to enhance both readability and the amount of information presented on a single screen. Avoid italics - they are hard to read on a typical monitor.

Don't present long sections of text as images. Each image requires another download and the font size is not adjustable for people with poor vision.. In addition, long text passages appearing as images require long alt tags.

Keep line lengths short. Keep text lines to 40 to 60 characters. Although the standard look for EPA's pages expands horizontally to fill available screen space, long lines are difficult to read. Force the text into shorter lines by putting it in a single-cell table set to a maximum of 450 pixels wide.

Chunk your content. People are reluctant to scroll through long Web pages, so

Use brief, meaningful headings and subheadings to break up your text. People enter EPA's Web site from many different directions, particularly when using a search engine. Each page should begin with a page name that clearly reflects that page. The EPA look and feel calls for this headline to be <h1>, the largest header size. Similarly, each section should use a heading size appropriate to its position in the page's logical hierarchy; subheadings should appear smaller than main headings (use <h2>, <h3>, etc.). Finally, add an extra blank line before each heading so it is visually associated with the text following it.

Use bullets and numbered lists for three or more items. Consider the difference in reading speed and ease of understanding between these examples:

Example 1:
EPA regulates water in many different forms: wetlands; drinking water; ground water (such as aquifers); surface water of all kinds, including lakes, ponds and streams; and waste water.

Example 2:
EPA regulates water in many different forms:

Bullets and numbered lists are easier to read and scan, helping people quickly locate relevant information. When the information is buried, as in example 1, your audience may have to read it more than once.

Highlight key words. Bolding key words helps your readers scan more efficiently. However, don't bold long phrases because it simply makes reading more difficult, while diffusing the importance of the key words. In general, avoid colored text because visitors assume it is link text. Never use blue text or purple text for anything but links (and don't change the default link colors).

Top of Page

Make Links Work for the Reader

Use sidebar links to provide easy navigation to the parts of your Web area. Each area of EPA's Web site is broken down into parts, and its sidebar links to them. Within the sidebar,organize the links into logical groups.

Use EPA's standard link text when it exists. See the list of standard sidebar terms on the Web standard for sidebars.

Describe links using long enough text and avoid "click here." Research has shown that the most effective links are 7-12 words long. Use link text that describes the destination fully (e.g., "Acid Rain Progress Report" instead of "Acid Rain" or "Report"). This helps both sighted visitors focus on key words and people using screen readers that can pull out lists of links (hearing "click here" repeatedly is useless).

Make link text match the destination page. It is disorienting to click on a link and find yourself on a page about a totally different subject. Match link text to the destination page's name. If you're using a local link within a page, match the link text to the section's name.

Provide explicit URLs when appropriate. When presenting lists of related links, use a description of the resource as the link text, but also provide the URL explicitly (e.g., "2002 Acid Rain Progress Report (http://www.epa.gov/airmarkets/cmprpt/arp02/index.html)"). Similarly, when providing mailto: links, use the person's name as the link text, but also provide the email address explicitly (e.g., "Jane Doe, doe.jane@epa.gov"). See the full email address standard for more detailed information. In both cases, this format provides two benefits:

  1. People using screen readers that scan a list of all link text on a page get useful information
  2. The information is useful as a printed reference.

In addition, providing the email address explicitly helps people who need to manually copy the address into an email message; some browsers are not set up to do so automatically.

Use links within text blocks judiciously. The eye is drawn to links because they are a different color from regular text, which means they can distract from the logical reading order. Consider placing links in a box, where they will be easy to find without confusing the reader.

Group hyperlinks when you have a lot of them. Make these groups visually distinct.

When linking to things people can do, use common terms. People think "I want to complain," not "I want to file an incident report." Do usability testing to confirm you have the best descriptions.

Make link paths sensible to random visitors, not subject experts. If there is a logical progression, people will keep clicking, but few clicks are still better than many. If people have to click more than four or five times in what seems a random manner, they will give up. Don't bury the user in links to areas unrelated to their current location. Conduct usability testing if possible.

Provide help for people who are just a little off target. People frequently jump to a page that's almost right, but not quite. Help them with a list of closely related topics. For example, on a page about hazardous waste, consider adding a section like the following (link each item to an appropriate page):

Not quite what you needed? Try these:

Similarly, provide links to related government agencies.

Use categorical and alphabetical indices and site maps. These not only help your visitor choose a link, they also help you organize information.

Top of Page

Use Graphics Appropriately

Don't put graphics in the upper left corner of the content section. Reserve that prime real estate for the key message of your page or vital navigation options. The two screen shots below show how many more links are visible with graphics to the right. No content changes; only the graphic placement differs.
Image showing a screen with a graphic to the right and many links visible Image showing a screen with a graphic on top and few links visible

Don't use "splash" graphics. Large logos or banners on pages other than home pages are not permitted under the standard look and feel. Even on an area's home page, though, do not use large graphics that serve simply as "splashes" or as program logos; they only push down the good content -- the content that visitors seek.

Graphics must serve an obvious purpose (e.g., provide information, navigation, or visual organization). Don't add pictures just because they look pretty. Don't repeat required text items (e.g., page names) using graphics.

Keep graphic file sizes and screen sizes small. Large file sizes make Web pages load slowly, and graphics that occupy a lot of screen space push good content down the page. As a guideline, try JPG images first at 60% quality to reduce file size. Within the context of the standard look and feel, informational graphics (e.g., photos and charts) work well with a width of 200 pixels.

Use only GIF and JPEG files. Other formats (including PNG) require plug-ins in many browsers.

Avoid icons. Studies have shown that even "obvious" icons aren't clear to many people.

Avoid using animated graphics unless there is a clear educational benefit. Most people find animation distracting, and it tends to obscure the serious purpose of the page. However, pages aimed at kids may use them.

Top of Page

Create Useful Home and Basic Information Pages

Home page. Research shows that the home page's purpose is to provide a quick introduction to a topic and lots of links, not detailed information. In addition, research shows that people look in the main section of the page first; only if they find nothing useful there do they look at sidebars. In summary, the main section should make it easy for people to decide where to go next.

The main section of the home page should provide the following brief information, in this order:

The home page must not have a page name because it would be redundant with the area name.

Graphics on the home page should be small - 100-200 pixels wide - and should clearly relate to the area subject. Put text in the upper left corner and right-align any accompanying graphics. Note that OPA discourages program logos and all such logos must be approved by OPA's Office of Product Review (PDF) (2 pp., 160K, about PDF).

Basic information page. This page should answer background questions for someone new to a subject. Consider the following outline:

Since detailed answers to these questions will form the bulk of many Web areas, simply provide one or two sentence answers with links to those details.

Top of Page

Use Web Best Practices

Follow the EPA look and feel standards. Standardized navigation lets visitors learn how our site works once instead of repeatedly. The look reminds them that they are in EPA territory, conveying credibility. Also follow all other EPA Web policies.

Do not give credit to contractors on the Web site. Follow the guidelines for bylines and staff credits that are set out in the Writing Style section of EPA's Communications Stylebook.

Use HTML or another plain text markup language (e.g., CFML, XML) or, if appropriate, PDF. Use formats that require someone to purchase software (e.g., Word, WordPerfect, Excel) only if the purpose is for the reader to download and edit the document (e.g., a form).

Follow Adobe Acrobat (PDF) format guidelines. For both creating and linking to PDF documents, follow the EPA Web Guide.

Do not use javascript or other non-HTML code to create drop-down / slide-out menus. Usability research has repeatedly shown that they confuse visitors. In addition, they pose serious accessibility challenges. Instead, use normal links that take people to a page that provides many link options or a normal HTML form with a selection box.

Use javascript appropriately. See the full standard.

New browser windows and pop-up windows: these are two different ways to open new windows to provide information. A new browser window is typically the same size as the original window. It usually contains information intended to stand on its own, as opposed to serving solely as a reference for the original window. It opens on top of the original browser window. A pop-up is a window, smaller than the full screen, intended to supplement the primary browser window.

Provide file information. When linking to files provided for downloading, provide the following in addition to the title: file format, file size, and brief description (at a minimum; it may be as long as appropriate). In addition, provide this information even for HTML and other files to be viewed in a browser when they are bigger than 200K.

Divide your area into logical parts. Understand how the standard specification works with areas and parts. Use this system to provide easy navigation.

Maintain links. Check Web pages bi-weekly to make sure your links are current. People hate to find that the link they want to access is a dead duck. Make sure that your links still connect to relevant content on every Web page and to viable external Web pages.

Follow federal accessibility (section 508) requirementsEntering Intranet. It's good public service because it's the right thing to do. It's also the law.

"New" Icon: A "NEW" icon is a small graphic that indicates a piece of content is new. For example: NEW!. Using a "NEW" icon is optional, but if you choose to use one, follow the requirements in the "New" icon standard.

Top of Page

Local Navigation

Jump to main content.