Creating Great Content for Websites
Martha Nichols Faculty Instructor, Journalism
Jen Kramer Lecturer, Digital Media Design
Harvard University Extension School
https://scholar.harvard.edu/jen4web/presentations
https://xkcd.com/773/
Clarity, Clarity, Clarity
“Muddiness is not merely a disturber of prose,
it is also a destroyer of life, of hope: death on
the highway caused by a badly worded road
sign, heartbreak among lovers caused by a
misplaced phrase in a well-intentioned letter….
Think of the tragedies that are rooted in
ambiguity, and be clear!”
—Strunk and White, The Elements of Style
SAMPLE WEBSITES: Good or Bad?
 Yale University
 Purdue’s Online Writing Lab (OWL)
 Teavana
PRINT: Classic Design that Works
In books and journals, you’ll find:






Headlines, titles, and contents pages.
Clear hierarchy of headings.
Fixed reading width (pages or columns).
Blurbs, drop quotes, and sidebars.
Indexes, references, footnotes.
Spot art.
WEB CONTENT: What Users Get
The Good…
The Bad…
 Text is brief and clear.
 Mix is focused.
 Includes effective chunking.
 Text is too long and vague.
 Mix is a mess.
 Creates attention scatter.
…and the Ugly
FORM vs. FUNCTION
Q: Is it ever okay for a website to be ugly?
A: Yes. It depends on the purpose of the site.
Q: Really? But don’t visuals matter more than words?
A: No. Ask yourself the following questions:
What is the main purpose of this website?
Do users just need a list of options?
Is it about creating a brand or image?
Your responsibility is
to enforce content rules.
UX PRINCIPLES: Focus on Users
1. Understand stakeholder goals
—for the organization, website, and end users.
2. Identify your target audience(s)
—and develop personas.
3. Get familiar with the “voice” of your unit
—use key phrases, connect to branding.
4. Consider website organization
—and how this relates to information architecture.
CONTENT REALITY: Pushing Back
The content team may ignore every rule, but
you can still push back:
 Flag content that doesn’t work with the
site plan.
 Invoke UX principles. Ask if this content…
—supports one of our goals?
—speaks to one or more target audiences?
—complies with our brand?
—fits with the information architecture?
ACCESSIBILTY: Usable Sites for All
IT: Wow, this content is great, but Harvard won't
let us do that because we have to comply with
online accessibility.
Content Team: Really? There are rules for
accessibility?
IT: Yep. Websites must be usable for those with
disabilities – and Google is your #1 blind user:
ACCESSIBILITY ESSENTIALS
Content Team Creates…







Page Title
Information Structure
Headings
Language
Links (descriptive?)
Image Alternatives (creation)
Media Alternatives (creation)
Developers Enforce…







Semantic Markup
Legibility
Readability
Layouts
Links (easy to find?)
Image Alternatives (enforcement)
Media Alternatives (enforcement)
Lists derived from HUIT’s “10 Essentials” for Content Creators and Developers.
BAD TEXT
On far too many websites, you’ll find:






Boring, overly wordy content.
Too many details.
The wrong details.
No headlines or organizing structure.
Explanations in the passive voice.
Vagueness about the real point.
GOOD TEXT: Three Rules
1. Keep it short.
— Cut the text by half or one-third.
— Reduce paragraphs to a headline.
2. Keep it focused.
— First outline the most important points.
— Then select three or fewer as your focus.
3. Keep it meaningful.
— Avoid fancy language and jargon.
—Use the active expositional voice.
TEXT: How IT Can Help
1. Flag wordy content based on UX principles.
—Does it violate branding, audience, goals?
2. Flag poorly organized content.
—Is the page title distinctive and descriptive?
—How will you test for accessibility with users?
3. Check for semantic markup of headings.
—Have headings been styled correctly?
4. Remember: Happy Talk Must Die.
—See Steve Krug, “Don’t Make Me Think.”
MESSY MIX
On far too many websites, you’ll find:






Wrong text width for readability.
Too many sidebars and visuals.
Undifferentiated text blocks.
Placeholder headings like “Welcome.”
No logical text flow.
Too many menu options.
FOCUSED MIX: Three Strategies
1. Create a hierarchy of meaning.
— Focus on what readers really need to know.
— Organize text to indicate what matters most.
2. Use headlines to direct readers.
— Make headings short and punchy.
— Create a heading structure that’s logical.
3. Establish sensible menus and sequences.
—Use listicles/timelines if they improve clarity.
—Cut down the number of menu options.
MIX: How IT Can Help
1. Check text width across devices.
—Is it readable and legible for all users?
—Have you established a fixed width for text?
2. Revisit UX principles.
—Too many elements? Don’t cave to pressure to put
everything in a sidebar.
3. Avoid images as text.
—Does the site load slowly? Text as HTML is readable by
Google and screen readers.
4. Enforce information architecture.
—Does the delivered content match planned IA?
ATTENTION SCATTER
On far too many websites, you’ll find:






Swaths of text instead of readable chunks.
Not enough paragraph breaks.
Too many random elements.
No clear sense of what matters most.
Images that undercut or interfere with text.
Too many hyperlinks that pull readers away.
CHUNKING: Three Strategies
1. Organize all text in short chunks.
— Reduce paragraphs to three or four lines.
— Include no more than three grafs in a chunk.
2. Use images that serve the text.
— Keep in mind the value of clear explanations.
— Remember that a pretty picture is not enough.
3. Employ hyperlinks logically and effectively.
— Use links to take readers to additional details.
— Don’t pull readers away with too many links.
CHUNKING: How IT Can Help
1. Add paragraph breaks.
—Is the content broken into logical segments?
2. Consider tabs, accordions, and other
organizing elements for text.
—Are they distracting or do they focus meaning?
3. Avoid images for the sake of images.
—Do visuals direct or confuse users?
4. Insert links that are relevant to users.
—Are links immediately helpful?
“There is one rule that is fairly
safe to follow: When in doubt,
wear the plainer dress.”
—Etiquette in Society, in Business, in Politics, and at Home (1922),
Emily Post
Except When You Break the Rules
https://www.lingscars.com/
“Ling’s Cars Has One of the Best Websites on the Internet”
(Newsweek)
Resources
Accessibility
 For content creators: “10 Essentials” (Harvard)
 For developers: “10 Essentials” (Harvard)
Courses
 DGMD E-23: Planning Successful Websites and Applications
 JOUR E-137: Feature Writing
 JOUR E-169: Designing Stories for the Web
(spring 2018, new class taught by Martha and Jen)
Books
 Steve Krug, Don’t Make Me Think
 Strunk and White, The Elements of Style
 Roy Peter Clark, How to Write Short
Contact Us
Martha Nichols
Instructor in Journalism
Harvard Extension School
[email protected]
Jen Kramer
Lecturer in Digital Media
Harvard Extension School
[email protected]
Talking Writing magazine:
http://talkingwriting.com
Slides at:
https://scholar.harvard.edu/j
en4web/presentations
BONUS: Revise Strunk and White
As a practice exercise, cut down the quote
so it’s half as long:
“Muddiness is not merely a disturber of prose,
it is also a destroyer of life, of hope: death on
the highway caused by a badly worded road
sign, heartbreak among lovers caused by a
misplaced phrase in a well-intentioned letter….
Think of the tragedies that are rooted in
ambiguity, and be clear!” [53 words]
Hint: Try a listicle or turning it into a tweet.