Presentation on theme: "Writing for the Web Doug Bratland & Jaye Lawrence Web Services Group 04/17/2008."— Presentation transcript:
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 Lazy Eyes: How we read online The F-Shaped Pattern The F-Shaped Pattern Eyetracking Study 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 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 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 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
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 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
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
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
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
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