In the beginning there was the internet, and organizations dumped their brochures onto web pages and thought, it was good. However, today's scanning and information-bombarded audience needs you to put them first when it comes to creating web content. They want it fast, easy and accessible. This seminar on web writing gives guideposts to improving and adapting your content to best serve your audience's needs: particularly relevant for those websites where information is the No. 1 reason audiences visit.
[Expert Panel] New Google Shopping Ads Strategies Uncovered
Writing for the Web
1. Writing for the web
Tips to create useful and engaging content
K E L L E Y T E A H E N C O M M U N I C A T I O N S
2. Why listen to Kelley on web writing?
• 20+ years working in Communications
• Has led content team for web at OCAD
University and University of Waterloo
• Has taught writing courses at Western,
Waterloo and St. Jerome’s University
• MA in English and Bachelor of Journalism
with earlier career as newspaper writer
and editor
K E L L E Y T E A H E N C O M M U N I C A T I O N S
3. Overview
You will learn:
• Key principles of effective writing
• How to create content for website visitors
• How to create content that’s easy to scan
and use (writing)
• How to apply tips for accessible and SEO
(search-engine-optimized) web content
K E L L E Y T E A H E N C O M M U N I C A T I O N S
4. First: Principles of good writing
• Prefer active voice to passive voice
• Be consistent in style: things such as
commas, capitalization, and how you use
numbers
• Proper names: double check, check again
• Grammar counts: errors seriously
undermine your credibility
– Watch “shift in number” and “shift in tense” errors
K E L L E Y T E A H E N C O M M U N I C A T I O N S
5. Use plain language
Especially for web reading, simple is
better. What perfectly wonderful “plain
words” should you use instead of ...
• Commence …
• Obtain ….
• Utilize …
• Subsequent ….
• Retain ….
• Ambulate…..
K E L L E Y T E A H E N C O M M U N I C A T I O N S
6. Engaging writing on the web?
While it’s true much of web writing is “just
the facts”, you can still engage your
audience by:
• Making your writing conversational
• Using vivid examples, especially in short
profiles or other features
• Metaphor can be your friend to explain
complex concepts: “This is like that.”
K E L L E Y T E A H E N C O M M U N I C A T I O N S
7. It’s a conversation!
• Be casual, personal
• Read it aloud
• What does the
user need to know?
• Talk to them:
use “you”, “we”
• Avoid jargons and acronyms
K E L L E Y T E A H E N C O M M U N I C A T I O N S
8. The “sneak peak” syndrome
Spell check catches errors such as:
• typos (univeristy)
• badly misspelled words (metafisical)
Spell check, however, does not catch
“sound-alike” errors. Mixed-up homophones
(words that sound alike) are the most
common error in writing today
K E L L E Y T E A H E N C O M M U N I C A T I O N S
9. Top seven homophone “yikes”!
• It’s, its
• They’re, their, there
• Compliment, complement
• Peek, peak, pique
• Accept, except
• Principal, principle
• Rain, reign, rein
Any others you have difficulty distinguishing?
K E L L E Y T E A H E N C O M M U N I C A T I O N S
10. Also watch out for…
Redundant phrases (“pleonasms”)
• Original founder
• Pair of twins (unless you mean four
people)
• Very last
• Advance planning
• Basic fundamentals
• Free gift
K E L L E Y T E A H E N C O M M U N I C A T I O N S
11. AAA (And About Acronyms…)
• Always spell out acronyms on first
reference on each web page. Users can
get to a page through direct search, not
your carefully laid-out navigation
• Watch the “you’ve already said that”
syndrome, where you repeat a word in a
commonly used acronym: AIDS syndrome,
PIN number, HST tax
K E L L E Y T E A H E N C O M M U N I C A T I O N S
12. Learn more about using words well
• Check out Kelley Teahen’s “Spelling and
Word Use” on SlideShare
• Study a style guide: in Canada, best to
use Canadian Press Stylebook
• Strunk and White’s The Elements of Style
and The Little Brown Handbook are good
over-all references
K E L L E Y T E A H E N C O M M U N I C A T I O N S
13. Defining communication
• Be clear: Tell it like it is
• Know your audience and meet their needs
• Have a voice
This is good writing, over-all. And this is
especially true online and on the web.
K E L L E Y T E A H E N C O M M U N I C A T I O N S
14. Understand your web visitors
Why do
YOU go
online?
K E L L E Y T E A H E N C O M M U N I C A T I O N S
15. What’s your site’s main purpose?
• Entertainment
• Social communication
• Find out information (maps, schedules)
• Research
• Buy things
• Make applications
• Sign up for events
K E L L E Y T E A H E N C O M M U N I C A T I O N S
16. Example: a university website
• Visitors want relevant, accurate, up-to-date
information that’s easy to find
• They want to complete a task
– Students want to register for courses
– Alumni want to sign up for an event
– Job seekers want to apply for work
K E L L E Y T E A H E N C O M M U N I C A T I O N S
17. Example: a medical charity site
• Seeking reliable and credible information
• Seeking news about treatment options
• Looking to donate or volunteer
• Seeking information on available programs
and support
– Want to sign up for events, programs
K E L L E Y T E A H E N C O M M U N I C A T I O N S
18. Example: Facebook
• Social Communication: sharing personal
stories, commentaries, connecting with
friends, family and acquaintances
• Information-sharing: posting links, news
articles, photos, promoting causes
• Events
• Entertainment: games, cat videos posted
from You Tube
K E L L E Y T E A H E N C O M M U N I C A T I O N S
19. Remember: people are impatient
Website visitors want to
• Find information quickly
• Complete a task efficiently
Mashable 2011 study:
• People read, maximum, 28 per cent of a
website’s content
• Most scan and only read information they feel
is relevant
K E L L E Y T E A H E N C O M M U N I C A T I O N S
20. Keep it short
• Get to the point as quickly as possible
• Cut out unnecessary information
• Use easy-to-understand, shorter, common
words and phrases
• Avoid long paragraphs and sentences
K E L L E Y T E A H E N C O M M U N I C A T I O N S
21. Know your visitors
1. Identify and list the main groups
comprising your website visitors – use
surveys, analytics to determine; also
include groups you want to attract
2. Profile those website visitors: age,
geography, other demographic factors
3. Create personas for your website visitors
K E L L E Y T E A H E N C O M M U N I C A T I O N S
22. E.g.: personas for future students
David
Age: 21
Gender: Male
Residence: Toronto ON
Academic interests:
Design using digital technology
Other interests: Computer games, movies,
mountain biking
Jennifer
Age: 17
Gender: Female
Residence: Richmond Hill, ON
Academic interests:
Art history, drawing and painting, fabric
design and fashion
Other interests: Volleyball, ballet
K E L L E Y T E A H E N C O M M U N I C A T I O N S
23. Time to get writing!
K E L L E Y T E A H E N C O M M U N I C A T I O N S
24. Where do I start?
Effective web content comes from knowing
and directly answering your website visitors’
questions
K E L L E Y T E A H E N C O M M U N I C A T I O N S
25. E.g.: Future student questions
• How do I apply?
• What programs can I study?
• What are all of these programs?
• What are the requirements for admission?
• How much does it cost?
• How can I pay for school?
• Where am I going to live?
• How safe is the campus?
K E L L E Y T E A H E N C O M M U N I C A T I O N S
26. Creating headings for visitors
Tip: Use your visitors’ questions and turn the
into headings on web pages
Question: How do I apply to University X?
Heading: Apply to University X
K E L L E Y T E A H E N C O M M U N I C A T I O N S
27. Exercise: headings from questions
• I have two kids in grade school. Is there
anything in the summer at the university
for them to do?
• I’m a student and the course I want to take
is full. Is there any way I can still get in?
• I’m a journalist writing a story on design
barriers for the disabled. Do you have an
expert I can interview?
K E L L E Y T E A H E N C O M M U N I C A T I O N S
28. Use active headings
Let them know the action, task or
information they can do or find by following
the information such as:
• Choose your program
• Check the requirements
• Calculate how much it will cost
• Discover life on campus
• Apply online
K E L L E Y T E A H E N C O M M U N I C A T I O N S
29. SEOs and headings
Visitor-focused headings that use visitors’
language or words are important to search
engine optimization (SEO)
There’s no match if they call it a shovel
and you call it an earth-moving instrument,
or even a spade. If your organization uses
uncommon language in titles, use the
common words in text so searches match
K E L L E Y T E A H E N C O M M U N I C A T I O N S
30. Headings heads-up
Headings should indicate what comes next
Campus resources
View a full list of campus resources for students. Learn
and experience all that our university has to offer.
Make note of that beautiful in-line link!
K E L L E Y T E A H E N C O M M U N I C A T I O N S
31. Start with the main point
Provide the answer to your visitor’s question
right away and then provide additional
information if required
When is the application deadline?
Application deadline
The application deadline is April 1, 2013. Applications
received after the deadline will not be considered.
K E L L E Y T E A H E N C O M M U N I C A T I O N S
32. Web users don’t read: they scan
K E L L E Y T E A H E N C O M M U N I C A T I O N S
33. “Scanable” elements
• Headings
• Lists
• Short descriptions
• Meaningful links, whether displayed as
navigation, visual icons or inline links
K E L L E Y T E A H E N C O M M U N I C A T I O N S
34. Content as wayfinding
The visitor scans to find relevant content:
does your content help or hinder?
• Am I in the right place?
• Sometimes no text is the best text
• Users come from different directions;
they may not have the context you expect
K E L L E Y T E A H E N C O M M U N I C A T I O N S
35. Keywords key to good “UX”
Everyone has “UX”, or user experience,
when they go to a website
Keywords crucial: users skim for words that
match what they are looking for
May enter these words into a search engine
K E L L E Y T E A H E N C O M M U N I C A T I O N S
36. Use short and direct headings
• Get rid of extra words in your headings
• Only capitalize the first word in a heading,
unless there is a proper name in use
Minimum Admission Requirements
Admission requirements
K E L L E Y T E A H E N C O M M U N I C A T I O N S
37. Properly define headings
• Headlines need to be set as such through
the Content Management System or
HTML coding: these then read as
headings by screen readers
• Do not create a heading by simply
highlighting text, making it bold and
bigger, or ALL CAPS
K E L L E Y T E A H E N C O M M U N I C A T I O N S
38. Avoid the “wall of text”
Break up with:
• Headings
• Lists
• Useful graphics
Helps people scan
the page
K E L L E Y T E A H E N C O M M U N I C A T I O N S
39. Lists are a scanner’s best friend
Use lists to break down blocks of text
Many other famous Canadians have
taught or studied at OCAD U, including
artists Fred Hagan, Jock Macdonald,
Michael Snow, Graham Coughtry, Doris
McCarthy, Gordon Rayner and, more
recently, Colette Whiten, Joanne Tod,
Barbara Astman, Gary Neill Kennedy,
Ian Carr-Harris, Rirkrit Tiravanija,
Rebecca Belmore, George Bures Miller,
David Rokeby, Kristan Horton, and
Shary Boyle; as well as designers Clair
Stewart, Carl Dair, Allan Fleming, Theo
Dimson, Ken Rodmell and, more
recently, Debbie Adams, Helen Kerr,
Anita Kunz, Douglas Ball, Marcos Chin,
Donald Stuart, Gary Clement, Gary
Taxali, Jeremy Kramer, Floria
Sigismundi and Scot Laughton.
Famous Canadians who taught or studied
at OCAD U
Artists
• Fred Hagan
• Doris McCarthy
• Michael Snow
Recent artists
• Ian Carr-Harris
• Shary Boyle
Designers
• Theo Dimson
• Clair Stewart
Recent designers
• Anita Kunz
• Gary Taxali
K E L L E Y T E A H E N C O M M U N I C A T I O N S
40. When to use lists
When reading a sentence, do you mentally
break it down into a list?
Canvas is the Student
Information System where all
students enrol in their courses,
check their fee statements, view
their marks, and print off their
unofficial transcript.
Canvas
This is a student-information system
that lets you:
• Enrol in a course
• Check your fee statements
• View your marks
• Print your unofficial transcript
K E L L E Y T E A H E N C O M M U N I C A T I O N S
41. Keep lists short
• Five to 10 items for unfamiliar lists
(guideline)
• Longer lists are OK for familiar items (e.g.
a list of countries)
• And a number note: write out one to nine
and use numerals for 10 and above (there
are exceptions: check CP’s Stylebook)
K E L L E Y T E A H E N C O M M U N I C A T I O N S
42. Use images to give more info
Park directory for City of Toronto (detail)
K E L L E Y T E A H E N C O M M U N I C A T I O N S
43. When to use ordered lists: 1, 2, 3
• Don’t number a list unless it’s important
you do the items in the order laid out
• Best reserve ordered lists for instructional
information, such as
– Application steps
– Emergency procedures
– Directions from A to B
K E L L E Y T E A H E N C O M M U N I C A T I O N S
44. Short is sweet
Recommended maximum text lengths for web
pages:
• Headings: 150 characters but shorter than
this is far better
• Paragraphs: three or fewer sentences
– One-sentence paragraphs are perfectly fine
• Sentences: fewer than than 20 words
K E L L E Y T E A H E N C O M M U N I C A T I O N S
45. More on paragraphs
• Start with the main point (think punch line
first)
• Support the main point with relevant
information if required
• Provide history or background only if
really needed: better to put this as a
separate entry / page, connected to the
higher-level page via an inline link
K E L L E Y T E A H E N C O M M U N I C A T I O N S
46. Use meaningful links
• Users may scan through links
• Screen readers can get set to “read the
page” from link to link
• Use clear labels
• Avoid meaningless links like “click here” or
“here”: links must tell where you are going
• Make sure other text doesn’t look like a
link (i.e. no underlining)
K E L L E Y T E A H E N C O M M U N I C A T I O N S
47. Make it clear where links lead
Example 1
Take a look at our Annual Report now available in .pdf format.
Better: Take a look at our Annual Report (PDF).
Example 2
We serve a growing community that includes more than 70,000
households.
Better: We serve a growing community that includes more than
70,000 households. See more Saskatoon municipal statistics.
K E L L E Y T E A H E N C O M M U N I C A T I O N S
48. Make document links clear
Warn visitors if they are about to open a
document
Linking to a document
• Take a look at our Annual Report (PDF)
Linking to multiple document formats
• Take a look at our Annual Report (PDF),
(Word)
K E L L E Y T E A H E N C O M M U N I C A T I O N S
49. Alternative text for accessibility
Everything not text (photo, illustration, chart,
graphic) should be described using “alt. text”:
most CMS will prompt you to do so
• Try to answer the question "what information
is the image conveying?”
• If the image does not convey any useful
information, leave the alternative text blank
• If the image contains meaningful text, ensure
all of the text is replicated
K E L L E Y T E A H E N C O M M U N I C A T I O N S
50. More tips for alt. text
• Alternative text should be short; a
sentence or less and rarely more than two
sentences
• If more description is required (e.g., for a
chart or graph), provide a short description
in the alternative text (e.g., a summary of
the trend) and more detail in the long
description
• Test by having others review the document
with the images replaced by the alt. text
K E L L E Y T E A H E N C O M M U N I C A T I O N S
51. First alt. text: then descriptions
• Long descriptions should be used when text
alternatives are insufficient to answer the
question "what information is the image
conveying?”
• In some situations, the information being
conveyed will be how an image looks (e.g.,
an artwork, architectural detail, etc.). In these
cases, try to describe the image without
making too many of your own assumptions.
K E L L E Y T E A H E N C O M M U N I C A T I O N S
52. More on descriptions
• One approach is to imagine you are
describing the image to a person over
the phone
• Ensure that you still provide concise
alternative text to help readers decide if
they are interested in the longer
description
K E L L E Y T E A H E N C O M M U N I C A T I O N S
54. In alt. text, context is everything
• Is a piece of artwork or a photograph
being used in a denotative or connotative
way? That is, are you showcasing the art
or photo content specifically, or is it being
used as a generic illustration?
• For instance: is it a portrait of a particular
person, or a picture representing a group
of tourists windowshopping?
K E L L E Y T E A H E N C O M M U N I C A T I O N S
55. Exercise: alt. text for this image
K E L L E Y T E A H E N C O M M U N I C A T I O N S
56. More tips (and random cute dog)
K E L L E Y T E A H E N C O M M U N I C A T I O N S
57. Think international
• Avoid slang, colloquialisms, and acronyms
• If you need to make local references,
explain:
– “OCAD University is in the midst of Toronto’s ‘cultural corridor’:
the vibrant downtown neighbourhood home to the city’s main
cultural institutions.”
• All the “plain writing” tips also help make
meaning clear to someone who has
English as a second (or fifth) language
K E L L E Y T E A H E N C O M M U N I C A T I O N S
58. Keep your content up to date
Out-of-date content makes visitors think: Why
should I trust this website?
• The links are broken – they lead nowhere
• The upcoming events list a 2011 conference
• The latest news is from March 2012
Helps with Search Engine Optimization: update
frequency a factor in better search ranking
K E L L E Y T E A H E N C O M M U N I C A T I O N S
59. Never copy and paste
• If you copy-and-paste, you must keep on
top of the original (source) content to keep
your content current
• What if information changes and you don’t
notice?
• Lowers your website’s and organization’s
credibility if you provide visitors with wrong
information; can also be legal ramifications
• Avoids intellectual property issues
K E L L E Y T E A H E N C O M M U N I C A T I O N S
60. But I want that information!
Link to the source website through an inline
link or icon on your website
You should give a brief description of the
information the user can expect to find by
following the link
As part of routine maintenance, regularly
check to see if all links still working
K E L L E Y T E A H E N C O M M U N I C A T I O N S
61. Want more? Try these books
• Letting Go of the Words, Second Edition:
Writing Web Content that Works, Janice
(Ginny) Redish
• The Web Content Style Guide: The
Essential Reference for Online Writers,
Editors and Managers, Gerry McGovern,
Rob Norton, Catherine O’Dowd
K E L L E Y T E A H E N C O M M U N I C A T I O N S
62. Style guides
• Follow a consistent style and dictionary
and make sure everyone working on the
website content uses the same references
• In Canada, the Canadian Oxford
Dictionary is standard as is Canadian
Press Stylebook and CP Caps and
Spelling
K E L L E Y T E A H E N C O M M U N I C A T I O N S
63. Recap: Web writing should be:
• Relevant to your website visitors
• Easy to scan, easy to use and accessible
• Up to date, accurate and credible
• Have a consistent voice / point of view
• Free of errors in spelling and grammar
• And, where it’s possible: engaging!
K E L L E Y T E A H E N C O M M U N I C A T I O N S
64. Thank you!
Kelley Teahen
@kteahen
kelleyteahen@gmail.com
K E L L E Y T E A H E N C O M M U N I C A T I O N S
Editor's Notes
This is a map collating where webpage viewers eyes went on the page. Red in the most frequent, through orange to yellow and down to blue. There is an “F” pattern: People look along the top, down the left side, and dive into the information from a clue they find on the left-hand side.
It is terrible for people using screen readers when every link is “click here” or “read more”. Because it is slow going to go through every word of text using a screen reader, many users adjust their settings to read headings and links only. Imagine how frustrating it would be to just keep hearing the words “click here”, over and over. Banish the “click here!” Don’t write, Click here for more information on the Blue Jay’s training camp schedule in Florida. Intead: Learn more about the Blue Jays Florida training camp schedule.
Note is is perfectly fine to have several words in a link!