Successfully reported this slideshow.

Writing For The Web


Published on

  • Be the first to comment

  • Be the first to like this

Writing For The Web

  1. 1. Writing For The Web How to Communicate Effectively Online
  2. 2. Overview: <ul><li>Audience </li></ul><ul><li>Structure </li></ul><ul><li>Voice </li></ul><ul><li>Style Guide </li></ul><ul><li>Content Types </li></ul>
  3. 3. Mini-Manifesto: Why Your Great Literary Skills Don’t Matter Online <ul><li>People don’t read online. They extract ideas at breakneck speed, resonating with some and disregarding others. </li></ul><ul><li>Traditional elements of “great writing” are all unnecessary online: </li></ul><ul><ul><li>Impressive vocabulary </li></ul></ul><ul><ul><li>Clever turns of phrase </li></ul></ul><ul><ul><li>Flowing evocative prose </li></ul></ul><ul><ul><li>Flowery descriptive adjectives/metaphors </li></ul></ul><ul><li>Clarity and precision are the most important skills. </li></ul><ul><li>Web writing is just a vehicle for great ideas. All you have to do is communicate them without getting in the way. </li></ul><ul><li>This is why journalists often make poor bloggers. Their writing is no longer being read online. It’s being mined . </li></ul><ul><li>Average writing abilities are more than enough to write great web content. </li></ul><ul><li>Average ideas are not. </li></ul><ul><ul><li>(The best ideas are the ones your audience is looking for.) </li></ul></ul>
  4. 4. How do users read on the web? <ul><li>Answer: They don't . </li></ul><ul><ul><li>Most people don’t read word by word. </li></ul></ul><ul><ul><li>Instead they scan the page . </li></ul></ul><ul><li>They’re often looking for something specific. </li></ul><ul><li>Your job is to anticipate your audience’s goal, and help them reach it. </li></ul>
  5. 5. Step 1: Know Your Audience <ul><li>Don't start to think about what you need to write before you identify who you're writing for . </li></ul><ul><li>Who are your readers? </li></ul><ul><ul><li>Why are they coming to the site? </li></ul></ul><ul><ul><li>Do they have a problem? </li></ul></ul><ul><ul><li>Do they need information? </li></ul></ul><ul><ul><li>How old are they? </li></ul></ul><ul><ul><li>How literate are they? </li></ul></ul><ul><ul><li>How much do they already know about the subject? </li></ul></ul><ul><ul><li>How much time are they likely to spend to learn more ? </li></ul></ul>
  6. 6. Structure
  7. 7. Remember the 3 S’s! <ul><li>Keep it scannable. </li></ul><ul><li>Keep it short . </li></ul><ul><li>Keep it segmented . </li></ul>
  8. 8. 1. Keep Content Scannable Eye tracking data shows that users often scan in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
  9. 9. How’d they do that? Then: Now: Very Expensive Camera
  10. 10. Implications of Eye Tracking Data: <ul><li>The first two paragraphs must state the most important information. </li></ul><ul><li>Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content. </li></ul>1. Keep Content Scannable:
  11. 11. The Inverted Pyramid <ul><li>A lot of us were taught to write in the “data presentation” (pyramid) format, that is: </li></ul><ul><li>Introduction > Details > Conclusion </li></ul><ul><li>Web users needs an 'inverted' pyramid structure: </li></ul><ul><li>Conclusion > Explanation > Details </li></ul><ul><li>Users see the most important information first. </li></ul><ul><li>This helps users scan the page and decide if they want to read in-depth. If they do leave, at least they'll have the key points! </li></ul>1. Keep Content Scannable:
  12. 12. The Inverted Pyramid 1. Keep Content Scannable:
  13. 13. Effective Sub Headings <ul><li>Help users decide which section to invest in (read). </li></ul><ul><li>Include a subheading every 2-4 paragraphs. </li></ul><ul><li>Identify the topic of every paragraph. If you can’t identify the topic, consider rewriting it. </li></ul><ul><li>Include keywords for SEO. </li></ul>1. Keep Content Scannable:
  14. 14. Use Lists! <ul><li>Lists draw the eye. </li></ul><ul><li>A 5-line item isn't a bullet point, it's a paragraph with a bullet in front of it. Keep each item short. </li></ul><ul><li>No more than 9 items in a single list. (Gestalt.) </li></ul><ul><li>Use numbered lists when the order is important. </li></ul><ul><li>Use bullet point lists when the order doesn’t matter. </li></ul><ul><li>Keep lists to a maximum of two levels. </li></ul><ul><ul><li>Like This. This is the second level. </li></ul></ul><ul><ul><ul><li>(This is pushing it.) </li></ul></ul></ul><ul><li>Introduce each list with at least one line of text or a heading. </li></ul>1. Keep Content Scannable:
  15. 15. Break Long Sentences Into Lists <ul><li>If you see lots of commas, colons, and/or semi-colons, try pulling the main points out into a list: </li></ul><ul><li>Example 1: </li></ul><ul><li>The supervising training organization is obliged to work with the business or employer - and the apprentice - to design a training plan, including the training that needs to occur, how and when that training will take place, who will provide the training, and how that training will be assessed. </li></ul><ul><li>Example 2: </li></ul><ul><li>The supervising training organization works with employers and apprentices to design a training plan. This plan includes: </li></ul><ul><ul><ul><li>training requirements </li></ul></ul></ul><ul><ul><ul><li>delivery practices </li></ul></ul></ul><ul><ul><ul><li>assessment methods </li></ul></ul></ul>1. Keep Content Scannable:
  16. 16. How To Use Bold Text Effectively <ul><li>By scanning bold words , users can instantly understand what the paragraph is about and decide whether or not they want to read it. </li></ul><ul><li>Identify 2 or 3 words that describe the main point of the paragraph. </li></ul><ul><li>Don’t embolden words on which you're placing emphasis . Focus on usability , not on persuasiveness. </li></ul>1. Keep Content Scannable:
  17. 17. 2. Keep Content Short <ul><li>Research indicates that the most effective Web documents are 50% shorter than their print counterparts. </li></ul><ul><li>Write short, direct sentences (no more than 20 to 25 words). </li></ul><ul><li>Be succinct. Use only your best details and examples. </li></ul><ul><li>Edit ruthlessly. Trim each unnecessary word. Then do it again. </li></ul><ul><li>Write less to begin with. </li></ul><ul><li>Write only one idea per paragraph. Break up long paragraphs (maximum of three to five sentences). </li></ul><ul><li>If you must include more information, see the Third S . </li></ul>
  18. 18. 3. Keep Content Segmented <ul><li>Take advantage of what the web does well by layering information across multiple pages . </li></ul><ul><li>Split long material into smaller chunks. </li></ul><ul><li>Within a page, group sub-heading into logical hierarchies . </li></ul><ul><li>Think outside the long essay! Consider presenting some information as: </li></ul><ul><ul><li>Checklists. </li></ul></ul><ul><ul><li>Primers or glossaries. </li></ul></ul><ul><ul><li>Fact sheets or &quot;at a glance&quot; boxes. </li></ul></ul><ul><ul><li>Testimonials or short case histories. </li></ul></ul><ul><ul><li>Frequently Asked Questions (FAQ). </li></ul></ul><ul><ul><li>Resource lists. </li></ul></ul><ul><ul><li>Charts, tables, or graphs. </li></ul></ul>
  19. 19. Reminder: Use Descriptive Sub-Headings <ul><li>This allows visitors to easily see what each section of the page is about . </li></ul><ul><li>There's no hard and fast rule for how frequently to use sub-headings , but you should probably be aiming for one sub-heading every 2 to 4 paragraphs. </li></ul><ul><li>More importantly, sub-headings should split the page into logical groups , to allow site visitors to easily identify the information that they're after. </li></ul>3. Keep Content Segmented:
  20. 20. Voice
  21. 21. Keep it Casual <ul><li>Read the piece aloud, if it doesn't sound like a conversation, edit it until it does. </li></ul><ul><li>Web users respond well to the human side of things. Make yourself visible: use “I” statements. </li></ul><ul><li>The more familiar the voice, the more effective it will be. </li></ul>Voice:
  22. 22. Cut The Bull <ul><li>Avoid jargon and 'industry speak'. </li></ul><ul><li>Our job is to connect with our users, not to intimidate or patronize them. </li></ul><ul><li>No matter how complex the subject, the writing should be simple. </li></ul><ul><li>Use clear, direct sentences. Inform, don't assume. </li></ul>Voice:
  23. 23. Cut The Bull <ul><li>Example 1 </li></ul><ul><ul><li>A significant percentage of the youth sector is prematurely disengaging from educational opportunities. </li></ul></ul><ul><li>Example 2 </li></ul><ul><ul><li>A lot of young people are leaving school early. </li></ul></ul><ul><li>Web users won't bother reading past the first three words of Example 1, but they'll read all of Example 2, and there's a much greater chance they'll read on to find out why young people are leaving school. </li></ul>Voice:
  24. 24. Use Active Voice <ul><li>Bad: </li></ul><ul><ul><li>New contact information can be uploaded on the contact us page. </li></ul></ul><ul><li>Good: </li></ul><ul><ul><li>Upload new contact information on the contact us page. </li></ul></ul>Voice:
  25. 25. Style Guide: Forget Your High School English Teacher’s Rule Book (Not all of it! Just the tedious bits!)
  26. 26. Forget Your High School English Teacher’s Rule Book: <ul><li>Never indent your paragraphs. Instead, put a line break between paragraphs. </li></ul><ul><li>It’s okay to break the structure of a sentence with asides and comments (like this). </li></ul><ul><li>Fragments are okay: </li></ul><ul><ul><li>“ Print's narrative exposition calls for well-crafted, complete sentences. Online, less so .” </li></ul></ul><ul><ul><li>“ The thrill of adventure . The beauty of nature . Fragments can capture it all.” </li></ul></ul><ul><li>Don’t get carried away. You still have to use “their”, “they’re”, and “there” correctly (and you’re and your). Save the OMG’s for Facebook. </li></ul>Style Guide:
  27. 27. Never use “ Click Here. ” <ul><li>“ Click Here” frustrates scanners. Users have to stop and read the surrounding context to understand where the link will go. </li></ul><ul><li>Instead, describe the link in the link itself . </li></ul><ul><li>Simply write as if you were not using links. Say something interesting, and, almost incidentally, include some hot text . </li></ul><ul><li>Bad: </li></ul><ul><ul><li>To see our most recent annual report, click here . </li></ul></ul><ul><li>Good: </li></ul><ul><ul><li>For more info, see our most recent Annual Report . </li></ul></ul>Style Guide:
  28. 28. Don’t try to be clever in your links. <ul><li>Call your History section “ History .” Don’t name the link “ It all started with dirt… ” </li></ul><ul><li>Users don’t click links they don’t understand. </li></ul><ul><li>Give them an “information scent”. </li></ul><ul><li>Progress must seem rapid enough to be worth the predicted effort required to reach the destination. (You’re getting warmer… warmer…) </li></ul>
  29. 29. Always Use Left-Aligned Text <ul><li>Left-aligned text is much easier to read than </li></ul><ul><li>Center or Right-aligned text. </li></ul><ul><li>Right-aligned text slows reading </li></ul><ul><li>speed. Each time you finish </li></ul><ul><li>reading one line, your eye </li></ul><ul><li>has to search for </li></ul><ul><li>the beginning </li></ul><ul><li>of the next line. </li></ul>Style Guide:
  30. 30. Show Numbers as Numerals <ul><li>Numerals catch the wandering eye! </li></ul><ul><li>It's better to use “23” than “twenty-three.” </li></ul><ul><li>Why? </li></ul><ul><ul><li>Because the shape is different ( 2415 looks different than four , even though they both have 4 characters.) </li></ul></ul><ul><ul><li>Numbers represent facts, and hard information. </li></ul></ul>Style Guide:
  31. 31. Other Things To Avoid: <ul><li>Avoid extensive use of hard-to-read italics </li></ul><ul><li>Avoid mixing too many fonts </li></ul><ul><li>Avoid underlines for anything except links </li></ul><ul><li>Never WRITE IN ALL CAPS. It’s like shouting online. </li></ul>Style Guide:
  32. 32. Content Types
  33. 33. Content Types <ul><li>Static Content (About Us, Mission, etc) </li></ul><ul><li>Press Releases </li></ul><ul><li>Articles </li></ul><ul><li>Blog Posts </li></ul><ul><li>Downloadable PDF </li></ul>
  34. 34. About Us: Can you explain what you do in one paragraph? <ul><li>Give Four Levels of Detail: </li></ul><ul><li>Tagline : A few words or a brief sentence summarizing what the organization does. </li></ul><ul><ul><ul><li>Example: &quot;Global excellence in aluminum.&quot; </li></ul></ul></ul><ul><li>Summary: 1-2 paragraphs at the top of the main About Us page that offer a bit more detail about the organization's goal and main accomplishments. </li></ul><ul><li>Fact sheet : A section following the summary that elaborates on its key points and other essential facts about the organization. </li></ul><ul><li>Detailed information: Subsidiary pages with more depth for people who want to learn more about the organization. </li></ul>Content Types:
  35. 35. Press Releases <ul><li>Print: </li></ul><ul><ul><li>70% Public Relations </li></ul></ul><ul><ul><li>30% Marketing “Buzz” </li></ul></ul><ul><li>Online: </li></ul><ul><ul><li>20% Public Relations </li></ul></ul><ul><ul><li>30% Marketing Buzz </li></ul></ul><ul><ul><li>50% Search Engine Optimization </li></ul></ul>Content Types:
  36. 36. Search Engine Optimization (SEO) <ul><li>It’s true that keywords are important to include, but their role is often over-hyped. </li></ul><ul><li>What really matters for top search results: </li></ul><ul><ul><li>Number of inbound links (Get bloggers to post links) </li></ul></ul><ul><ul><li>Site Structure (Use titles, headings, etc) </li></ul></ul><ul><ul><li>Updates (Frequently add new content) </li></ul></ul><ul><li>The best SEO tactic is simply to become the best website in your field. Offer solid information that your audience will find useful. </li></ul>Content Types:
  37. 37. Press Releases <ul><li>Topics: What’s New? </li></ul><ul><ul><li>New building! </li></ul></ul><ul><ul><li>New website! New Section of Website! </li></ul></ul><ul><ul><li>New Offer! New Delivery Truck! </li></ul></ul><ul><ul><li>New Service Area! New Service Charge! </li></ul></ul><ul><ul><li>New Furniture! </li></ul></ul><ul><ul><li>New Policy! New Application Deadline! </li></ul></ul><ul><ul><li>New Approval Process! </li></ul></ul><ul><ul><li>New Tree Outside! </li></ul></ul><ul><li>Pretend you’re a reporter writing a story. Include quotes, even from yourself. </li></ul>Content Types:
  38. 38. Articles: Become The Authority <ul><li>Your goal is to get your articles posted on other sites (social media), so offer useful info . </li></ul><ul><li>Types of Articles: </li></ul><ul><ul><li>The List: </li></ul></ul><ul><ul><ul><li>“ 5 Signs Your Hot Water Heater is on The Fritz” </li></ul></ul></ul><ul><ul><ul><li>“ 7 Hidden Tax Deductions You Need to Know” </li></ul></ul></ul><ul><ul><li>How To: Simply create a step-by-step list </li></ul></ul><ul><ul><li>Stories : Tell a story that illustrates “The Importance of _____.” (Including Young Adults, Making Inreach a Priority, Donating to the Annual Fund) </li></ul></ul>Content Types:
  39. 39. Blog Posts <ul><li>Can be mini-thoughts on topics that your audience will find interesting. </li></ul><ul><ul><li>“___ just crossed my mind” </li></ul></ul><ul><ul><li>“Look what I found!” </li></ul></ul><ul><ul><li>Jokes </li></ul></ul><ul><ul><li>Examine Difficult Un-answerable Questions </li></ul></ul><ul><ul><ul><li>Great for generating comments, online discussion </li></ul></ul></ul>Content Types:
  40. 40. Blog Posts <ul><li>The point is to be human. </li></ul><ul><li>¾ useful. ¼ fun. </li></ul><ul><li>Keep it current. Don’t start a blog unless you plan to continue at a rate of 1 posts per week, year-round. </li></ul>Content Types:
  41. 41. Social Media 101 <ul><li>Be sincere: if you appear to be simply going through the motions, people are unlikely to waste their attention on your messages. </li></ul><ul><li>Focus on the individual: It’s not social media if every post is authored by “company name” or “admin”. </li></ul><ul><li>Not all about you: Social Media is a conversation. If all you do is self-promote, people will lose interest. </li></ul><ul><li>Be a part of the community: Reply to comments, comment on content from your user’s blogs, engage in online forums. </li></ul><ul><li>Everyone’s a peer: Social Media empowers anyone to share their experience. You may be an expert in your field but in the world of social media you’re just another peer. </li></ul>Content Types:
  42. 42. Webpage vs Downloadable File (PDF) <ul><li>When is it appropriate to convert a document into a webpage, and when is it better to simply upload the original? </li></ul><ul><li>This is a difficult decision, no clear right or wrong answer. </li></ul>Content Types:
  43. 43. Decision Guidelines: Webpage vs Downloadable File (PDF) <ul><li>If the document is longer than 10 printed pages and intended to be read as a whole , post for download. </li></ul><ul><ul><li>Why? Web users are usually too impatient to read the whole thing. If they really want to read it, they might end up just printing it out anyway. </li></ul></ul><ul><li>If the document is long, but users will only want to read a short segment of the whole , consider breaking it into a series of shorter webpages. </li></ul><ul><li>If the document relies on complex graphics or layouts , post for download. </li></ul><ul><ul><li>Why? Complex documents usually can’t be mirrored in standards compliant HTML. </li></ul></ul><ul><li>If the document is short and non graphical (or at least makes sense without the graphics), it’s best to turn it into a webpage. </li></ul><ul><ul><li>Why? It’s inconsiderate to make users download a one-page document, save it, open the program, open the file, just to see what’s in the file (which they will probably only scan anyway.) </li></ul></ul>
  44. 44. File Format <ul><li>Always convert to PDF files, never post Microsoft Word files. </li></ul><ul><li>Why? Microsoft Office is expensive, proprietary, and prone to version compatibility format errors. </li></ul><ul><li>PDF Readers are free, accessible, and designed for web standards. </li></ul>Webpage vs Downloadable File (PDF)
  45. 45. File Name <ul><li>Always use lower case. (Easier to link.) </li></ul><ul><li>Always use hypens, not underscores. (Better for SEO.) </li></ul><ul><li>Try to describe the contents of the file. </li></ul><ul><li>Bad: PYM_Membership_detail_2005.pdf </li></ul><ul><li>Better: pym-membership-detail-2005.pdf </li></ul><ul><li>Best: pym-membership-statistics-2005.pdf </li></ul>Webpage vs Downloadable File (PDF)
  46. 46. Remember: Web users don’t read. They Scan !