Writing for the Web U. S. EPA Office of Web Communications 2008 Rev. Mar 2008

What Well Cover How writing for the Web is different than other writing How to write for Web audiences Identify them; determine what they want to know; then write for them Web-specific features: LINKS Seven Secrets for Creating Great Links Link Requirements IMAGES: Captioning them and creating good alt text Features that make pages structured for scanning Translating print documents for the Web

Writing for the Web is different Web audiences dont read; they scan They want to get the info as fast as they can Reading is slooow Viewers may be stressed, impatient, skeptical, disoriented

Web visitors scan for… Key words Subheadings Links What we say to our Web visitors What they see

Identify your audiences: What NOT to do Dont write for your office director – s/he is not your audience, so no mission statements please! mission statements

NO !

Please, no, not that! Avoid Using Because Its…Solution Please check back shortly for... Rude. The burden isnt on users to figure out our Web site. No one will come back. If you dont know the exact date, use some sort of safe, far out, or relative time. E.g., This information will be updated by August But be sure you do it, or explain then why not. under construct -ion Bad form. If pages (or sections of) arent ready, dont post placeholder links or pages. If its truly critical information, instead of a link to a nonpage, indicate clearly when users should come back (see above). Welcome to our Web site. Irrelevant. Miss Manners doesnt serve tea online. Leave it out. The U.S. Environ- mental Protectio n Agency Assumed. This is the one entity for which we can safely assume that users know the acronym. Just use EPA (but never the EPA). Or spell it out only rarely and deliberately, as in a posted legal statement.

No, not that either! AVOID USING BECAUSE ITSSOLUTION Click here to enter our Web site/skip intro A waste of time and bandwidth. There is no need for the formal concept of a splash page or front door. Just jump in! Put your content on your home page, where users first land. If there are critical initial options, like the Spanish version of the site, put the link front and center so it is obvious immediately. CLICK HERE Uninformative. This doesnt tell anyone what the link is, except that its a link. And we can assume that users already know how to click on a link. Craft link text that states what the link is. This will also help anyone with assistive technology whos looking only at links. NEW!Ridiculous if forgotten. Old new markers, text or graphic erode site credibility and dilute content. User the newbie new marker that automatically vanishes after 30 days.

Identify your audiences: What TO do YES. Use personas.

Identify your audiences: What to do Personas: Google: search for personas usability Article: uie.com/articles/personas/ Call Beverly Gregory in OEI for personas, usability testing

Suppose you have multiple audiences? Identify most critical audiences Consider using secondary navigation for them Mercury site Another example of secondary navigation: Human Health Research Program Web siteHuman Health Research Program Web site

You will always have more than one audience Dont forget those with disabilities Blind visitors – screen reader users Colorblind visitors Must comply with Section 508 Present equivalent information

Multiple audiences Identify lowest-level audience and write to that audience on home page and basic information page Lead at Superfund Sites Web site Home page:

Basic Information page:

Standard for home pages Standard for Basic Information pages

Useful information: Home pages we love DRINK Abandoned Mine Lands New Source Review Methane What do they all have in common? They are all navigation pages and they all limit text.

You can also write for more technical audiences on pages further down in the site. Lead at Superfund Sites Basic Information page: Adult Lead Methodology page (3 levels down):

What do your audiences want to know? Your site is not about YOU Viewers are impatient and selfish Brainstorm What do audiences for Web site on Lead at Superfund Sites want to know?

So what did they do?

Any questions?

Writing Links Remember Two Things: 1. Link as much as you can. 2. Get to the point!

Write for your audiences : LINKS Green Power home page: lots of links, but doesnt get to the point. Link spatter:

But why not… Why join the Green Power Partnership? Top 10 partners: local governments federal governments colleges and universities Green power purchasing guide Benefits Award winners Green Power Challenges Fortune 500 Challenge College and University Challenge What did they do?

EXERCISE: Rewrite by adding links, then organizing them In the following section you will be provided with a range of information that should help you decide which is the right mortgage for you. It also provides you information about the other costs associated with a mortgage. There are specific sub- sections for first-time buyers and for those seeking to re-mortgage.

This way? Better than no links! In the following section you will be provided with a range of information that should help you decide which is the right mortgage for you. It also provides you information about the other costs associated with a mortgage. There are specific sub- sections for first-time buyers and for those seeking to re-mortgage.

This way: Even better. It gets to the point. Decide which mortgage is right for you Other costs associated with your mortgage First-time buyers' mortgage guide Re-mortgaging: what you need to know

Use Action Verbs We are delighted to announce the launch of our new version 6.1 of SpazzAp. Demo and download SpazzAp version 6.1!

Dont waste words XYZ Limited strives to develop and supply the most robust and cutting-edge financial services for the aviation industry Financial services

Creating Meaty Links Before they click, they should understand: Type of file – PDF? HTML? Type of content – report? brochure? Precise subject of information they will see when they click Link text should be content-rich

Seven Secrets for Creating Great Links #1: Make your link text meaningful NO click here or read more

Not-so-Helpful: To learn about and access the TRI Reporting software, click here for more information. To view contact information click here. vs. Helpful: Learn about and download TRI reporting software Contact information

Seven Secrets for Creating Great Links #1: Another way to make your link text meaningful (contd): YES ! Link text should match destination page

Oh no ! Where am I?

Lost again !

Seven Secrets for Creating Great Links #2: Links should be in English, not URLese. Consider displaying the URL, but not as part of the link text No: More detailed information is available at Yes: The dioxin characteristics page provides detailed tables ( html).

Seven Secrets for Creating Great Links # 2 (contd): Links should be in English, not URLese. Use with mailto: links

Seven Secrets for Creating Great Links # 2 (contd): Links should be in English, not URLese, or anything else. Washington Convention & Tourism Visitors Guide Washington Convention & Tourism Visitors Guide

Seven Secrets for Creating Great Links #3: Dont make the link text too short Optimally, 7-12 words Otherwise, hard to see, so fails to grab attention doesnt explain enough

Seven Secrets for Creating Great Links #4: Dont bury your links Scanners will skip over Set out links below related info

Seven Secrets for Creating Great Links #5: Use blue text and underlined text (and blue and underlined text) only for links

Seven Secrets for Creating Great Links #6: External links: Dont link to home pages of organizations; link only to specific related pages its EPA policy Make sure your viewers know you are taking them to related pages Three ways to link to EDs mercury page:. No: Environmental Defense No: Environmental Defense mercury page Yes: Environmental Defense mercury page

Seven Secrets for Creating Great Links #7: Provide context. Dont throw links up and think youre done. Mercury site schools page Create gateway pages: Second coastal conditions report (2005) 9/11 Commission Report

Link Requirements: Sidebar Links Use standard order First three sidebar links: Home Basic Information Where You Live Use standard language Frequent Questions Newsroom

Link Requirements: Sidebar Links (contd) Not permitted in the sidebar Search Contact Us Sidebar standard (All standards are at epa.gov/webguide/standards) epa.gov/webguide/standards Any questions?

Write for your audiences : Images Images should be accessible to those with disabilities captioning images well and creating good alt text through captions and alt text, be understandable relate to the surrounding text; convey meaning rather than appearance Alt text

Images should be accessible to those with disabilities 508 training goes into more detail Focus today is only on writing: captioning images well and creating good alt text when to use captioning and when to use alt text

What are those?!? Images should be understandable

Alt text: CVD-grown carbon nanotube SEM images, courtesy NASA Still not so helpful! What should have been done?

Caption: Carbon nanotubes are one-atom-thick sheets of graphite rolled up into a seamless cylinder with diameter of the order of a nanometer. Such cylindrical carbon molecules have novel properties that make them potentially useful in many applications in nanotechnology, electronics, optics and other fields of materials science.

Alt text should convey the purpose or meaning of the image, not the appearance or the title Meaning/PurposeAppearance/Title

Alt text should convey the purpose or meaning of the image, not the appearance or the title Endocrine disruptor screening program site Alt text: Collage of eggs, alligator, frog, pregnant woman and DNA helix How could this alt text be better?

Heres how: 1. Create text that explains the meaning: Endocrine disruptors are chemicals that interfere with the functioning of endocrine (hormone) systems, which control biological processes such as growth, reproduction, development, and metabolism, and which are found in all mammals, birds, amphibians, reptiles, and many other types of living organisms. 2. Make it a caption, not alt text, so that everyone can see it (from EDSP home page )EDSP home page

A good caption that conveys meaning: CADDIS: a process to help biologists identify causes of impairments in streams and other aquatic systems

Sometimes it makes sense to use no caption:

Sometimes it makes sense to use both a caption and alt text: Greening EPA: Individual EPA Laboratories' Net Energy Intensity Impacts for FY 2005

Sometimes it makes sense to use both: (from Greening EPA chart )Greening EPA chart The key is common sense ! Any questions? CAPTION: For each lab, the yellow portion of the bar represents the reported energy consumption after energy savings from completed recommissioning projects and mechanical system upgrades are deducted, and green power purchases are credited. ALT TEXT: Bar chart describing the impact of energy conservation projects, recommissioning, and green power purchases on EPA's reported energy use in FY Click for text.Click for text

Text Structures; Translating Print Documents for the Web

Include text structures that make your pages easy to scan Use anchors/tables of content What We Look For page Chromated Copper Arsenate (CCA) pageChromated Copper Arsenate (CCA) page Include Top of page links Any questions?

Translating Print Documents for the Web Information that works in print doesnt necessarily work online Viewers behave differently than readers do: They scan Their eye-tracking is different They cant underline or highlight They expect to be able to click They often land in the middle of the content (not the home page, not the top of the document)

Translating Print Documents for the Web PDF is not the whole story PDF: When to Use Web standard prohibits publication only in PDF unless the document is longer than 5 pages, or you need to preserve the formatting or layout of the original document (e.g. for printing; example is a poster), or you need to publish a paper document for which no electronic version exists (e.g., scanned documents)

Translating Print Documents for the Web: Displaying Them in HTML If both HTML and PDF versions are online, link from HTML version to PDF version Fact sheets Static rather than dynamic Visitors expect Web content to be dynamic, so… Clue them in: Prominent date at top Fact Sheet Example

Translating Print Documents for the Web: Displaying Them in HTML Consider that you may need to: Incorporate links Update content Copyedit Chunk or reorganize the content Add related audio or video content Add or delete text Delete references to EPAs Web site

Translating Print Documents for the Web: Displaying Them in HTML NO: YES: Replace entire bullet with Download the final amendments.Download the final amendments

Really interested in translating print documents for the Web? Recommend training Repurposing Print Documents for the Web Offered in March 2008 by Web Manager University (webcontent.gov) Ewriteonline.com can offer it to your organization