CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet,...
Transcript of CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet,...
![Page 1: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/1.jpg)
Writing for the WebQuick review for CNM Web Content Team
Chantal E. Forster - [email protected] Konetzni - [email protected]
![Page 2: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/2.jpg)
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?
![Page 3: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/3.jpg)
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.
![Page 4: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/4.jpg)
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!)
![Page 5: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/5.jpg)
![Page 6: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/6.jpg)
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?
![Page 7: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/7.jpg)
![Page 8: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/8.jpg)
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?
![Page 9: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/9.jpg)
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...
![Page 10: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/10.jpg)
![Page 11: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/11.jpg)
![Page 12: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/12.jpg)
H1The most "weighted" heading
H2The second most weighted heading.
By including audience-friendly language in the H2, the right page
comes up in Google.
![Page 13: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/13.jpg)
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
![Page 14: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/14.jpg)
What is Readability?
Economist: 12th gradeNYTimes: 10th grade
The average American reads at the 7th grade
reading level.
![Page 15: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/15.jpg)
Google "advanced search" will help you determine the reading level of your entire site (and others).
![Page 16: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/16.jpg)
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
![Page 17: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/17.jpg)
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
![Page 18: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/18.jpg)
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
![Page 19: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/19.jpg)
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
![Page 20: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/20.jpg)
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?
![Page 21: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/21.jpg)
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?
![Page 22: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/22.jpg)
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/)
![Page 23: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/23.jpg)
Use images to inform, not dominate
Example A Example B
Which one adds something useful to the page?
![Page 24: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/24.jpg)
An in place exampleDo these images add anything useful to the page?
Could the same functions be provided with just text?
![Page 25: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/25.jpg)
In what ways is this page less usable without images?
An in place example, sans images
![Page 26: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/26.jpg)
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
![Page 27: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/27.jpg)
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.
![Page 28: CNM Writing for the Web€¦ · Writing for the web is different Print: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam ante, tempor ut, venenatis quis, egestas](https://reader034.fdocument.pub/reader034/viewer/2022051917/6008e6bc2746a0189e4781cd/html5/thumbnails/28.jpg)
Thank You!