Writing for the webTips 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

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

OverviewYou 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

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

Use plain languageEspecially 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

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

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

The “sneak peak” syndromeSpell 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

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

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

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

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

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

Understand your web visitorsWhy 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

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

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

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

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

Remember: people are impatientWebsite 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

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

Know your visitors1. 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 visitorsK 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

E.g.: personas for future students

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

David

Age: 21Gender: MaleResidence: Toronto ONAcademic interests:Design using digital technologyOther interests: Computer games, movies, mountain biking

Jennifer

Age: 17Gender: FemaleResidence: Richmond Hill, ONAcademic interests:Art history, drawing and painting, fabric design and fashionOther interests: Volleyball, ballet

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

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

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

Creating headings for visitorsTip: Use your visitors’ questions and turn the into headings on web pages

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

Question: How do I apply to University X?

Heading: Apply to University X

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

Use active headingsLet 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

SEOs and headingsVisitor-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

Headings heads-upHeadings should indicate what comes next

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

Campus resourcesView a full list of campus resources for students. Learn and experience all that our university has to offer.

Start with the main pointProvide the answer to your visitor’s question right away and then provide additional information if required

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

When is the application deadline?

Application deadlineThe application deadline is April 1, 2013. Applications received after the deadline will not be considered.

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

“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

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

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

Scholarships

Yoga classes Restaurant hours

Tickets

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

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

Avoid the “wall of text”Break up with:• Headings• Lists• Useful graphics

Helps people scanthe 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

Lists are a scanner’s best friendUse lists to break down blocks of 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

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

When to use listsWhen reading a sentence, do you mentally break it down into a list?

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

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

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

Use images to give more infoPark 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

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

Short is sweetRecommended 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 wordsK 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

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

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

Make it clear where links lead

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

Example 1Take a look at our Annual Report now available in .pdf format.

Better: Take a look at our Annual Report (PDF).

Example 2We 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.

Make document links clearWarn 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

Alternative text for accessibilityEverything 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

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

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

More on descriptions• One approach is to imagine you are

describing the image to a person overthe 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

The challenge: describe this!

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

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

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

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

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

Keep your content up to dateOut-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

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

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

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

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

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

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