Writing for the Web:Quick Tips for Friendlier Pages

Robyn Ness & Beth Snapp

July 2014

Housekeeping

• Sign in• Evaluation• Documentation

– go.osu.edu/writingfortheweb

– Handout

– Instructions on CarmenWiki

– Videotaped

• Questions

Goals

• Web Governance Committee web standards

library.osu.edu About Us Policies & Procedures

• Improve usability of our websites

OSL Web Standards

• screenshots

5 Quick Tips for Friendlier Pages

1. Scannable Text

2. Clear Links

3. Correct Headings

4. Clean Formatting

5. Basic Web Accessibility

What’s wrong with this page?

• Not Scannable• Unclear Links• Poor Headings• Inconsistent

Formatting• Broken

Accessibility

Scannable Text

Word Wall vs. Scannable Text

Scannable Text

• Short paragraphs• Bulleted lists• White space

Clear Links

Unclear Links vs.Clear Links

✔

Example 1

Unclear Links vs.Clear Links

✔

Example 2

Unclear Links vs.Clear Links

✔

Example 3

Unclear Links vs.Clear Links

✔

Example 4

Good Links

• Descriptive text– Title of the document or page– Short descriptive phrase

• Not the full URL• Not Click Here

Correct Headings

Incorrect vs. Correct Headings

Correct Headings

• Concise Content • Hierarchy of heading levels

– Use them for meaning, not for text size.

– Don’t skip levels.

CMS Tip

• Due to our site template, the editable content starts at Heading 3.

Clean Formatting

Inconsistent Styles vs. Clean Formatting

Clean Formatting

• Don’t use ALL CAPS.• Use bold and italic text sparingly.• Don’t use underlines, which implies links.

• If you feel the need to use a lot of text formatting, revisit your text for scannability and appropriate section headings.

Special Cases

• Use Styles for special formatting.

• If you need help, ask for advice from AD&S.

Web Accessibility Is . . .

Removing barriers that prevent access to websites by people with disabilities.

We need to design for visitors with:

• Visual impairments• Auditory impairments• Motor/mobility impairments• Cognitive impairments

Web Accessibility

• Some elements of our sites are in your control; some elements are part of the CMS. Focus on elements of content that are in your control.

• Most regular text content is highly accessible. • Focus on a few easy changes...

Focus on…

• Correct heading hierarchy• Clear links• Image description tags (“alt” attributes)

No ALT Content vs. Accessible Images

Trickier Cases for Accessibility

• Data tables– require special labeling

• PDFs– require special formatting

• Videos/Audio– require captioning or transcripts

• Online Forms– require special labeling

• For these, ask for advice from AD&S.

Accessibility Red Flags

• Images of text (in place of text content)• Conveying meaning with only color

Putting it all together…

Before After

go.osu.edu/writingfortheweb

Questions?