Transcript write - Carleton College

Writing for the Web
Doug Bratland & Jaye Lawrence
Web Services Group
04/17/2008
Before you start writing…
…a word about reading on the web.
It’s physically more difficult
Screens are lower resolution than print


Print: at least 300 dpi

Computer screen: 72 dpi
It’s slower than reading a printed page



About 25% slower
It’s more fatiguing to the eyes
We read differently online

We skim

We scan
We quickly abandon pages that don’t look
immediately relevant or easy to absorb

Certain parts of the page get more
attention than others


Lazy Eyes: How we read online

The F-Shaped Pattern

Eyetracking Study
OK, can we write now?
(not quite yet)
(but soon)
Before you begin…
Ask yourself…


Who’s visiting this site?

What do they want to know?

What do they want to DO?

The best sites are user-centric

The best sites serve different interest levels

Web Writing for Many Interest Levels
Good web writing is…

Scannable

Inverted

Concise

Focused

Real

Error-free
Scannable
Use meaningful headlines/subheads


Don’t try to be too cute or clever

Don’t be ambiguous

Break up long content with subtitles

Use formatting to emphasize the main points

Break up long paragraphs into shorter ones

Use bulleted lists

Some of these principles in action
Scannable: Bad Example
The person who is humble and retiring has three characteristics:
mysterious charm, unspectacular excellence, and unnoticed
influence. We consider the charm mysterious because the person
does nothing we can see to draw our attention. We call the
excellence unspectacular because the person does not boast, or
make announcements, but completes all work with thoroughness.
We call this person’s influence unnoticed because although
everyone looks to this person as an authority, they hardly mention
the name. The influence spreads like water underground, invisible.
Scannable: Good Example
The person who is humble and retiring has three characteristics:



Mysterious charm: We consider the charm mysterious
because the person does nothing we can see to draw our
attention.
Unspectacular excellence: We call the excellence
unspectacular because the person does not boast, or make
announcements, but completes all work with thoroughness.
Unnoticed influence: We call this person’s influence
unnoticed because although everyone looks to this person as
an authority, they hardly mention the name. The influence
spreads like water underground, invisible.
Inverted
The opposite of most academic writing!


Why Writing Like a College Student Will Kill You Online
Put results, conclusions or must-know information at
the top of the screen

Use headlines, preview paragraphs


A List Apart’s Writing page

Jakob Nielsen’s “Be Succinct”

CNN stories (bulleted highlights)
Inverted
Invert headlines/summaries too!


Put attention-grabbing words first

Some great examples…
Inverted: Bad Example
Taking a shower, washing dishes, and doing your laundry all add
moisture to the air in your Recreational Vehicle. Any appliance
generates heat, and may cause condensation on cool surfaces
such as windows, doors, walls, and roof. The walls of your RV
have less insulation than a house does, so cold weather makes
drops of water form on the inside walls. Remember—if you let
moisture build up inside, it can damage the walls and ceiling of
your RV.
Inverted: Good Example
Don’t let moisture build up inside your RV. It can damage the walls
and ceiling of your vehicle.



Taking a shower, washing dishes, and doing your laundry all
add moisture to the air in your Recreational Vehicle.
Any appliance generates heat, and may cause condensation on
cool surfaces such as windows, doors, walls, and roof.
The walls of your RV have less insulation than a house does,
so cold weather makes drops of water form on the inside walls.
Concise

Remember, eyes fatigue more quickly on the
web

Good rule of thumb: 50% shorter

If it must be long, make sure it’s printable
(Does this mean nobody will read longer
content on the web? Not necessarily…)
Concise: Bad Example
Bitmaps go back to the earliest days of computer graphics. Until
bitmaps, people thought making a Christmas tree out of x’s and v’s
was pretty artistic. But with the innovations of machines like
Apple’s Macintosh and the Xerox Star, the engineers conceived of
the screen image not as a bunch of characters, but as a set of
dots, in a grid. At the time, each dot, or picture element could
either be on (black) or off (white). So by recording the exact
coordinates of every pixel, and its state (on or off), engineers could
capture your picture. Thus, a bitmap image stored your picture by
making a map or grid and populating it with bits. Each square of
the grid represented a tiny portion of your screen—the amount
displayed by one pixel or picture element. And each pixel was
represented, electronically, by a single bit. That’s how the file came
to be known as a bitmap.
(157 words)
Concise: Better Example
Originally, a bitmap image stored a picture by making a map, or
grid. Each square of the grid represented a tiny portion of your
screen—the amount displayed by one pixel, or picture element. In
those days, a pixel could either be on or off, that is, black or
white—so it only took one bit of information to record its state.
That’s how the file became known as a bitmap.
(71 words)
Concise: Techniques




Minimize the number of words in sentences
Minimize the number of sentences in a
paragraph
Make sure the first sentence (topic sentence)
sums up the paragraph
Use active voice (it’s usually shorter, as well as
more powerful)
Concise: Exercise
"Whenever I find myself growing grim about the mouth;
whenever it is a damp, drizzly November in my soul;
whenever I find myself involuntarily pausing before coffin
warehouses, and bringing up the rear of every funeral I
meet; and especially whenever my hypos get such an
upper hand of me, that it requires a strong moral principle
to prevent me from deliberately stepping into the street,
and methodically knocking people's hats off—then, I
account it high time to get to sea as soon as I can.“
— Herman Melville, Moby Dick
Concise: Solutions
I must go to sea when:

I'm depressed or melancholy

I stop in front of coffin warehouses

I follow funerals

I have a powerful urge to knock people's hats off
Bonus points: one sentence!
I must go to sea when I’m sad or angry or obsessed with
death.
Focused




Stick to 1 topic per page
Make sure each page makes sense if read in
isolation (because it may be)
Use links/navigation to connect topics that
make up a larger work
Focus helps with search engine optimization,
too!
Real

Direct, honest, free of jargon

Avoid flowery language and “marketing-speak”

Use acronyms & abbreviations sparingly

Write to inform, not impress

Don’t obfuscate to look erudite ;)

Resources:

Attack of the Zombie Copy
Real: Exercise
How would you rewrite this email to give it a fighting chance of being
read?
Hello Doug, my name is Charles Peek. I work for a company named Fast Track
Transfer. The purpose of this email is to provide you with an opportunity to view
a product that we have recently acquired. Also to determine if the product could
be a finishing touch on your new Residence Hall project or any existing facility.
We have in our possession, around 250 armoires that we removed from a very
high end hotel in downtown Minneapolis. Attached are some pictures of this very
versatile armoire. This would be a very cost effective way to give even a new
facility a face lift. If this email finds you and you do not deal with these issues, I
would be very thankful if you could forward it on to the correct person. Please
feel free to call or email myself or Mike at the number below. Thank you and
have a great day.
Error-free

Harder to read = harder to proofread

Ask someone else to proof for you

Proof for clarity as well as spelling
Tips & Techniques
Make links & headlines intuitive
Be descriptive and specific





“Tuition News” > “7% Tuition Hike”

“High-Tech Classroom” > “Virtual Reality in the Classroom ”

“Check it out” > “Mai Fete Photos”
Match link names to their destinations
Avoid misleading cues–if it’s underlined and blue, it
better be a link!
Frontload with attention-grabbing words
Use categories to “direct traffic”
DON’T SHOUT or Over Capitalize Text



Readers are most proficient at reading
sentence-case text (like this sentence)
BLOCKS OF TEXT IN ALL CAPS ARE MORE
DIFFICULT TO READ; LIMIT IT TO SMALL
AMOUNTS FOR EMPHASIS
Title Case Is Distracting If Used In Things That
Aren’t Titles
Use bold, but sparingly

Bold text is great for emphasis

It helps with scanning for important stuff

But if you overuse it, it loses its effectiveness

If everything is bold, nothing is bold
Create logical lists





Numbered lists should indicate sequence or
order of importance
Use bulleted lists when items are of equal
priority
Place the most important items at the top
When no obvious order applies, alphabetical is
a good default
A header or title will make your list more
scannable
Link to related content

Cross-link to other
relevant content (your
own or others)
Think about “trigger words”


Words/terms in your reader’s mind as she
scans for relevant info
Seeing them reassures your reader she’s on
the right track

Keeps reader on the “scent” of information

Also helps you determine keywords
Further Study:
Beyond Writing
Learn about accessibility
How you present and code web content
affects accessibility

Accessible design makes your pages more
useful for everyone, not just the disabled

Resources:



Web Content Accessibility Guidelines
(especially their Quick Tips)
Core Techniques for Web Content
Learn about usability
Overlaps with accessibility, but more focused
on the quality of the user experience and user
satisfaction

Resources:


Usability.gov

UseIt.com
Questions?