1. Writing for the Web Doug Bratland & Jaye Lawrence Web Services Group 04/17/2008

2. Before you start writing… …a word about reading on the web.

3. 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

4. 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 Lazy Eyes: How we read online  The F-Shaped Pattern The F-Shaped Pattern  Eyetracking Study Eyetracking Study

5. OK, can we write now? (not quite yet) (but soon)

6. 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 Web Writing for Many Interest Levels

7. Good web writing is…  Scannable  Inverted  Concise  Focused  Real  Error-free

8. 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 Some of these principles in action

9. 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.

10. 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.

11. Inverted  The opposite of most academic writing!  Why Writing Like a College Student Will Kill You Online 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 pageWriting page  Jakob Nielsen’s “Be Succinct”“Be Succinct”  CNN stories (bulleted highlights) CNN stories

12. Inverted  Invert headlines/summaries too!  Put attention-grabbing words first  Some great examples…

13. 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.

14. 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.

15. 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…)

16. 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)

17. 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)

18. 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)

19. 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

20. 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.

21. 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!

22. 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 Attack of the Zombie Copy

23. 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.

24. Error-free  Harder to read = harder to proofread  Ask someone else to proof for you  Proof for clarity as well as spelling

25. Tips & Techniques

26. 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

27. Use categories to “direct traffic”

28. 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

29. 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

30. 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

31. Link to related content  Cross-link to other relevant content (your own or others)

32. 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

33. Further Study: Beyond Writing

34. 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) Web Content Accessibility GuidelinesQuick Tips  Core Techniques for Web Content Core Techniques for Web Content

35. Learn about usability  Overlaps with accessibility, but more focused on the quality of the user experience and user satisfaction  Resources:  Usability.gov Usability.gov  UseIt.com UseIt.com

36. Questions?