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

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

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

Writing for the Web

U. S. EPA Office of Web Communications

2008

Rev. Mar 2008

What We’ll 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 don’t 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

Don’t write for your office director –

s/he is not your audience, so no mission statements please!

NO !

NO !

NO !

NO !

Please, no, not that!

Avoid Using

Because It’s… Solution

Please check back shortly for...

Rude. The burden isn’t on users to figure out our Web site. No one will come back.

If you don’t know the exact date, use some sort of safe, far out, or relative time. E.g., “This information will be updated by August 2006.” But be sure you do it, or explain then why not.

under construct-ion

Bad form. If pages (or sections of) aren’t ready, don’t post placeholder links or pages.

If it’s 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 doesn’t serve tea online.

Leave it out.

The U.S. Environ-mental Protection 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 IT’S SOLUTION

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 doesn’t tell anyone what the link is, except that it’s 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 who’s 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 site

You will always have more than one audience

Don’t 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 navigationpages 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 :LINKSGreen Power home page: lots of links, but doesn’t 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!

Don’t 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 (cont’d):

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 www.epa.gov/dioxin/chars.html

Yes: The dioxin characteristics page provides detailed tables (www.epa.gov/dioxin/chars. html).

Seven Secrets for Creating Great Links

#2 (cont’d): Links should be in English, not URLese.

Use with mailto: links

Seven Secrets for Creating Great Links

#2 (cont’d): Links should be in English, not URLese, or anything else.

Washington Convention & Tourism Visitors Guide

Seven Secrets for Creating Great Links

#3: Don’t make the link text too short

Optimally, 7-12 words

Otherwise, •hard to see, so fails to grab attention

•doesn’t explain enough

Seven Secrets for Creating Great Links

#4: Don’t 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: Don’t link to home pages of organizations; link only to specific related pages

•it’s EPA policy

Make sure your viewers know you are taking them to related pages

Three ways to link to ED’s mercury page:.

No: Environmental DefenseNo: Environmental Defense mercury pageYes: Environmental Defense mercury page

Seven Secrets for Creating Great Links

#7: Provide context. Don’t throw links up and think you’re 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 (cont’d) Not permitted in the sidebar

•Search•Contact Us

Sidebar standard

(All standards are at 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 beunderstandable

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/Purpose Appearance/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?

Here’s 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 )

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 )

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 2005. 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) page

• Include “Top of page” links

Any questions?

Translating Print Documentsfor the Web

• Information that works in print doesn’t necessarily work online

• Viewers behave differently than readers do:• They scan

• Their eye-tracking is different

• They can’t 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 Documentsfor 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 Documentsfor 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 Documentsfor 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 “EPA’s Web site”

Translating Print Documentsfor the Web: Displaying Them in HTML

NO:

YES: Replace entire bullet with

• 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