Embed Size (px)
Citation preview
Writing for the WebQuick review for CNM Web Content Team
Chantal E. Forster - [email protected] Konetzni - [email protected]
A good rule of thumb
If it's in print, publish it on the web.But... in a format that's friendly for the web.
So what does that mean?
Writing for the web is differentPrint: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas a, urna. Sed fermentum libero quis purus. Nulla tempus risus posuere quam. Suspendisse potenti. Suspendisse nec sapien a mi commodo gravida. Nulla facilisi. Sed pede elit, tempus eget, consectetuer eu, aliquet vitae, purus. Cras nec lorem quis nunc adipiscing molestie. Nulla sed odio. Integer sit amet nisi ac ante rutrum blandit.
Web: Lorem ipsum dolor sit amet, consectetuer adipiscing elit:
● Praesent quam ante● Tempor ut● Venenatis quis● Egestas a, urna.
Sed fermentum libero quis purus. Nulla tempus risus posuere quam. Suspendisse potenti. Suspendisse nec sapien a mi commodo gravida.
Focus on your audience
Dept-centric:
● About the director● Staff photos ● Our long mission
statement● Our advertising campaign
People-centric:
● Location, map● Cost, hours● List of services● Changes in Service ● Upcoming events● Photos of people enjoying
your facility, service, event● Latest news (especially if it's
about to be covered by local news media!)
Format & Layout Content for the Web
And the quick version is:
● Chunk content● Use Bullets● 50% less words● Use of bold text
How does this look in practice?
Without [good headlines and subheadlines] people … need to read the text to figure out what the article is about," she said. "But some people, many people, simply won't do this. They will just move on.”
“
Kara Pernice CoyneNielsen/Norman Group’s director of research
What do the data suggest?
Use Headings to Enable Scanning
Smart use of headings on a page:● Conveys the structure of content● Supports "chunking of information"● Promotes SEO
Let's see how...
H1The most "weighted" heading
H2The second most weighted heading.
By including audience-friendly language in the H2, the right page
comes up in Google.
Use Simple Jargon-Free Language
● Write at the 6-8th grade reading level.● Use 50% less words (because only 16%
read word-by word) ● Jargon-free headings● Shorten lines of text● Concise presentation of main idea● Use objective (not promotional) language
What is Readability?
Economist: 12th gradeNYTimes: 10th grade
The average American reads at the 7th grade
reading level.
Google "advanced search" will help you determine the reading level of your entire site (and others).
How to Reduce Sentence Complexity
● Remove modifiers● Reduce dependent clauses● Aim for simple or compound structure● Sentence fragments are ok
Test your words at:http://www.standards-schmandards.com/exhibits/rix/index.php Learn more at:http://www.gerrymcgovern.com/guide_write_02.htm
"Write for the reader, not for your ego"
Gerry McGovern
More Language Recommendations
● Headlines (3-7 words)● Sentences (8-15 words. No more than 30)● Paragraphs (No more than 50 words)● Page (600-700 words, no more than 1000)
"If you're consistently writing paragraphs with more than 50 words, you should probably lighten up. "
Learn more: http://www.gerrymcgovern.com/guide_write_02.htm
“Kill your darlings” William Faulkner
3, ok 4, Good Reads:
● Content Critical: Gaining Competitive Advantage Through High-Quality Web Content
● Letting Go of the Words: Writing Web Content that Works● Hot Text: Web Writing that Works● http://www.usabilityprofessionals.
org/upa_publications/jus/2006_may/bojko_eye_tracking.pdf
But if you only read 1 thing, read this:
http://www.it.cornell.edu/about/atsus/iws/resources/writing.cfm
AccessibilityWait, don't you mean ADA compliance?'No, I mean accessibility.' - Some cranky developer
The simple way:● Provide a text equivalency● Use semantically accurate markup
Text Equivalency'There had better be alt text on that.' - Some cranky developer
How would you provide text equivalency for Sol the Suncat?
How about for this video?
Semantic Markup'Who is responsible for this mess of tables?' - Some cranky developer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec odio tellus. Suspendisse et dui at ipsum dignissim dictum. Praesent erat erat, rhoncus in faucibus lacinia, aliquam sed enim.
How can we describe this block of text? What is the most appropriate HTML tag to use?
How about for this chart?
Some light reading
● ADA Section 508 (Skim it at least once)● WCAG 1.0 (http://www.w3.
org/TR/WCAG10/)● WCAG Samurai Eratta (http://wcagsamurai.
org/)● WCAG Cheat Sheet (http://worksperfectly.
net/wcag/)
Use images to inform, not dominate
Example A Example B
Which one adds something useful to the page?
An in place exampleDo these images add anything useful to the page?
Could the same functions be provided with just text?
In what ways is this page less usable without images?
An in place example, sans images
PDFs"Why don't we keep this simple?" - Some cranky developer
When to use a PDF:● When a piece of content is specifically to be
printed.
When to never use a PDF:● Any other time
Why, you ask?"Fine, we'll get more complicated." - Some cranky developer
Three reasons:● PDF documents circumvent
CNM publishing standards and processes.
● PDF is not a specification recognized by the World Wide Web Consortium.
● PDF support, although common, is not guaranteed.
Thank You!
