Learn to style documents for the web, the DoIT Communications way.
Writing goals and principles
We believe these editorial decisions give the user a better experience, with text styles rooted in economy of characters and maximum clarity at a glance.
With each piece of content, we aim to:
Translate: Take complex information and communicate it in a clear and understandable way.
Educate: Provide students with clear options, so they can make informed decisions.
Actionable: Give enough information so users can take appropriate and immediate action.
Useful: Think about what you expect users to do with this information immediately.
Concise: Be clear and brief. Use simple short ideas.
Engaging: It’s OK to break a few rules in making your copy relatable, warm, and human.
Informative: Let users make their own choices. Don’t try to “sell” a product or service, but rather demonstrate an understanding of their needs and inform them of appropriate choices.
Voice and tone
What’s the difference between voice and tone?
Think of it this way: You have the same voice all the time, but your tone changes. You might use one tone when you're out to dinner with your closest friends, and a different tone when you're in a meeting with your boss.
DoIT's voice is:
Educational, but not overly-academic
Helpful, but not overbearing
Expert, but not bossy
Technical, but understandable for non-techies
Relatable, not exclusive
It’s most important to be clear in our messaging. Our tone is generally smart and factual. Be clear, concise, and friendly while using plain language. Avoid jargon. Convey empathy to user, to make sure they feel confident in their financial decision. Reduce stress.
Users are more likely to ask for advice because they need help, and won’t contact us again if they feel insulted, talked down-to, or unsatisfied. Also make sure we are representing the UW-Madison Voice and Tone standards
Web copy is different from written copy. Some people will read every word we write. Most will just skim.
Be user focused
We frame our content in a fashion to best meet user needs.
As a [user], I want to [do something], so I can [meet a need]
Once you have that information, use it to guide your copy writing.
Use plain language
When we use words people understand, our content is more findable, accessible, and inclusive.
When we use jargon in our writing, we risk losing users’ trust. Government, legal, business jargon are often vague or unfamiliar to users, and can lead to misinterpretation.
Important info first
Create a hierarchy of information. Lead with the main point or the most important content, in sentences, paragraphs, sections, and pages.
Be concise
Use short words and sentences. Avoid unnecessary modifiers.
Be specific
Avoid vague language. Cut out fluff.
TL;DR (too long, didn’t read)
If you put too much copy on your page, chances are, it won't all get read. Try not to do this.
Research shows that 79% scan and 16% actually read web content.
Short, concise paragraphs and bulleted lists work best for web use.
Do not underline text
Underline = link. Giving a sentence an underline for emphasis is misleading.
Chunk content
Chunking is a strategy to layout our web content in small digestible pieces, which has shown to improve comprehension. It calls for shorter paragraphs, or breaking up your paragraphs with bullet points.
Group related ideas together and use descriptive headings and subheadings.
First sentence
Engage the reader by teasing what they will get out of the article.
First paragraph is also important
We aim to encourage the user to read more. We aim to be brief, clear, and cover broader concepts. Place the most important information at the top, extra info toward the bottom.
Use short paragraphs
In most cases, it’s best to use subheadings to clarify the subject of various sections on a page. Users want to skim and scan for information. Headings help this process exponentially.
People read in an “F” shape pattern.
Nielson Norman Group. F-Shaped Pattern for Reading, 2006
This tells us:
Users won't read your text thoroughly
The first two paragraphs must state the most important information.
Start subheads, paragraphs, and bullet points with key words
Type your edited article out completely. Then, look again to cut your text until it is reduced to the most essential info.
Writing for accessibility is writing for inclusion; excluding anyone does nothing to convey your message. Writing content well is writing for accessibility.
Avoid generic link text like “read more” and “click here” and be precise with links and calls to action.
Don’t assume the user knows how to perform a task. Give step-by-step directions or provide a link that does.
Avoid using unusual words, acronyms or idioms, including jargon.
Ask yourself:
Does this make sense?
Does it support our users?
Is the most important information at the top?
Can this be broken down or better organized?
Does this cover what we need to say in the simplest way?
Avoid:
Inconsistent names and labels
Media without captions or transcripts
Wordy headers and sentences
Writing about people
It's important to write for and about other people in a way that’s empathetic, compassionate, inclusive, and respectful. Some specific guidelines that DoIT aims to follow:
Age
For ages, use figures, for brevity and readability.
Do this: She is 16.
Not this: She is sixteen.
Correct examples of hyphenation:
The student is 21 years old.
A 21-year-old student.
The contest is for 18-year-olds.
He is in his 20s.
Don’t reference a person’s age unless it’s relevant to what we're writing. If it is relevant, include the person’s specific age, offset by commas.
The girl, 16, just got her driver’s license.
The girl, 8, has a brother, 11.
Don’t refer to people using age-related descriptors like “young,” “old,” or “elderly.”
Disability
Don’t refer to a person’s disability unless it’s relevant to what we're writing. If it is relevant, emphasize the person first: ”Jim has a disability” rather than “Jim is disabled.” Avoid euphemisms such as "differently-abled," "physically challenged," or "handi-capable," they are considered condescending. Avoid sensationalizing a disability by saying "afflicted with," "suffers from," "victim of," etc. “Handicapped parking” is OK.
Gender and sexuality
Don’t call groups of people “guys.” Don’t call women “girls.”
Use gender neutral terms in descriptions instead of gender specific ones
When writing about a person, we use their preferred pronouns. If uncertain, simply use their name.
Rephrase sentences to eliminate gender pronouns, when possible.
We use the following words as modifiers, but never as nouns:
lesbian
gay
bisexual
transgender
trans
LGBT
Don’t use these words in reference to LGBT people or communities:
homosexual
queer
lifestyle
preference
Don’t use “same-sex” marriage, unless the distinction is relevant to what you’re writing. (Avoid “gay marriage.”) Otherwise, it’s just “marriage.”
Hearing
Use “deaf” as an adjective to describe a person with significant hearing loss.
You can also use “partially deaf” or “hard of hearing.”
Medical conditions
Don’t refer to a person’s medical condition unless it’s relevant to what we're writing.
If a reference to a person’s medical condition is warranted, use the same rules as writing about people with physical disabilities and emphasize the person first. Don’t call a person with a medical condition a “victim.”
Mental and cognitive conditions
Don’t refer to a person’s mental or cognitive condition unless it’s relevant to what you’re writing. Never assume that someone has a medical, mental, or cognitive condition.
Don’t describe a person as “mentally ill.” If a reference to a person’s mental or cognitive condition is warranted, use the same rules as writing about people with physical disabilities or medical conditions and emphasize the person first.
Vision
Use the adjective “blind” to describe a person who is unable to see.
Use “low vision” to describe a person with limited vision.
Visual style
The DoIT Communications department can help you place images neatly into your content area.
Make sure you have copyright permissions, and source images properly when needed.
Images, graphics and video should always fit these terms:
Consistent placement
Always use alt tags on all images for accessibility
Images
Sizing conventions for it.wisc.edu
900px x 400px @ 72dpi: standard news image
900 px is the minimum width, height can be adjusted
Format: .jpg with a high resolution
Backgrounds
When creating images for it.wisc.edu we try to make sure the backgrounds aren't 100% white. It results in floating images on the pages. If using a white background you could either add a vignette so the edges are a bit darker or make the "white" background slightly off-white. 90-95% white perhaps.
Alt text
Be brief, one sentence.
Describe the image in relation to the story.
Don’t be redundant or provide the same information as text within the context of the image.
Don’t use the phrases "image of ..." or "graphic of ..." to describe the image. It’s redundant.
Video
Unless there is a specific application, video on the IT Website will be uploaded to the DoIT Communications YouTube or Vimeo channel and embedded into the corresponding page.
DoIT Communications can aid in placing related video on pages.
We will highlight copyright permissions, and properly source images when needed.
All videos must be properly captioned.
Each caption frame should hold 1 to 3 lines of text on screen at a time, viewable for a duration of 3 to 7 seconds. Each line should not exceed 32 characters.
All caption frames should be precisely time-synced to the audio.
A caption frame should be re-positioned if it obscures onscreen text or other essential visual elements.
When multiple speakers are present, it's helpful to identify who is speaking.
Non-speech sounds like [MUSIC] or [LAUGHTER] should be added in square brackets.
Links
Function
Links to pages on the site will open in the current window
Links to pages off the site will open in a new window.
Don’t say things like “Click here!” or “Click for more information” or “Read this.” Write the sentence as you normally would, and link relevant keywords.
Don’t include preceding articles (a, an, the, our) when you link text.
Navigational links will match the design of the navigation, with underlines.
Do not underline text. Underline = link. Giving a sentence an underline for emphasis is misleading.
Snapchat: DoIT stories, events, entertaining pics.
Tools
Hootsuite: Schedule/manages the DoIT Twitter, LinkedIn and Instagram channels
Facebook scheduler
Write short, but smart
Some social media platforms have a character limit; others don’t. But for the most part, we keep our social media copy short.
Twitter: 125 characters or less (this leaves room for a manual retweet and comments)
Facebook: No limit, but we aim for one to two short sentences.
Instagram: No limit, but we try to keep it to one sentence or a short phrase. No links, but emojis are good.
To write short content, we simplify our ideas or reduce the amount of information —but not by altering the spelling or punctuation of the words themselves. It’s fine to use the shorter version of some words, like “info” for “information.” But do not use numbers and letters in place of words, like “4” instead of “for” or “u” instead of “you.”
Engagement
We monitor all of our social networks for activity.
We engage our followers like a human being, not a organization.
If someone comments, we thank them for it with a like, heart, or we write them back.
Twitter is our expected medium to communicate news-type information, but we also post information to Facebook as well. We experiment with posting related images on Instagram and Snapchat.
With social media posts:
We are not only dealing with the outage/crisis, but how people feel about it and how it makes them feel.
We post only about the issue at hand
We review what posts are already scheduled. If the outage/crisis situation is at hand, we don’t post other off-topic information.
We aim to be factual, clear and concise.
In social media posts we try to include the following information:
Status of outage.
Time frame to correct the outage.
Where they go for more information.
If available, present an image/illustration of the outage or service.
In social media posts, during “crisis” situations we aim to:
Provide facts.
Cut to the point.
Empathize with the user’s struggles.
Be honest about the situation.
Be compassionate.
Respond specifically to what the user is saying.
In social media posts during “crisis” situations we avoid:
Including too much information.
Being overly technical.
Being too wordy (140 characters or less on all posts).