Downloaded 44 times
Uploaded byMandi Wise
A Practical Guide to Awesome Web Writing
The document provides guidance on writing effectively for the web. It discusses three key elements: style, structure, and substance. For style, it recommends using concise language, correct grammar, and an active voice. For structure, it suggests using headings, lists, and other formatting to enhance readability. For substance, it advises determining whether the goal is content or copy, and ensuring the writing supports business objectives or helps users complete tasks. The document emphasizes writing for the audience rather than the author. It concludes that combining these three elements - style, structure, and substance - is key to producing engaging web writing.
More Related Content
Similar to A Practical Guide to Awesome Web Writing
A Practical Guide to Awesome Web Writing
- 1. A Practical Guideto Awesome Web Writing Follow me @mandiwise
- 2. A lot ofwriting on the web kind of sucks.
- 3. But why doesit suck?
- 4. It lacks focusand clarity It’s grammatically awkward It’s poorly structured It’s not written for the reader
- 5. It lacks focusand clarity It’s grammatically awkward It’s poorly structured It’s not written for the reader
- 6. It lacks focusand clarity It’s grammatically awkward It’s poorly structured It’s not written for the reader
- 7. It lacks focusand clarity It’s grammatically awkward It’s poorly structured It’s not written for the reader
- 8. 3 Elements ofAwesome Web Writing:
- 9. 3 Elements ofAwesome Web Writing: Style
- 10. 3 Elements ofAwesome Web Writing: Style Structure
- 11. 3 Elements ofAwesome Web Writing: Style Structure Substance
- 12. 3 Elements ofAwesome Web Writing: Style Structure Substance
- 13.
- 14. STYLE is theassemblage of words, punctuation, and sentences to convey meaning in writing.
- 15. If you onlytake one thing away from this presentation, take this...
- 16. Omit needless words (Struck, White & Kalman - The Elements of Style)
- 17. Omit needless words (Steve Krug - Don’t Make Me Think)
- 18. A few otherstyle tips...
- 19.
- 20.
- 21. Independent Clause Contains anoun and a verb, and expresses a complete thought.
- 22. Independent Clause Contains anoun and a verb, and expresses a complete thought. Dependent Clause
- 23. Independent Clause Contains a noun and a verb, and expresses a complete thought. Dependent Clause Only modifies an independent clause, and cannot stand on its own.
- 24. This is NOTa complete sentence:
- 25. This is NOTa complete sentence: Because grammar is interesting.
- 26. This is NOTa complete sentence: Because grammar is interesting. This IS a complete sentence:
- 27. This is NOTa complete sentence: Because grammar is interesting. This IS a complete sentence: We enjoyed the training because grammar is interesting.
- 28. This is NOTa complete sentence: Because grammar is interesting. “Because” makes this a dependent clause This IS a complete sentence: We enjoyed the training Independent clause because grammar is interesting. Dependent clause again
- 29. Use commas and semi-colonscorrectly
- 30.
- 31. Use commas to: Joina dependent and an independent clause
- 32. Use commas to: Join a dependent and an independent clause Join 2 independent clauses with a conjunction
- 33. Use commas to: Join a dependent and an independent clause Join 2 independent clauses with a conjunction Separate items listed in a series
- 34. Use commas to: Join a dependent and an independent clause Join 2 independent clauses with a conjunction Separate items listed in a series Use semi-colons to:
- 35. Use commas to: Join a dependent and an independent clause Join 2 independent clauses with a conjunction Separate items listed in a series Use semi-colons to: Join 2 independent clauses
- 36. Use commas to: Join a dependent and an independent clause Join 2 independent clauses with a conjunction Separate items listed in a series Use semi-colons to: Join 2 independent clauses Separate items listed in a long series
- 37. Ensure subjects andverbs agree with each other
- 38.
- 39. Bad: Chocolate or vanillataste best.
- 40. Bad: Chocolate or vanillataste best. Good:
- 41. Bad: Chocolate or vanillataste best. Good: Chocolate or vanilla tastes best.
- 42. Bad: Chocolate or vanillataste best. Good: Chocolate or vanilla tastes best. Also Good:
- 43. Bad: Chocolate or vanillataste best. Good: Chocolate or vanilla tastes best. Also Good: Chocolate and vanilla taste best.
- 44. Write statements inthe positive form
- 45.
- 46.
- 47.
- 48. Positive: She forgot Negative: She didn’t remember
- 49.
- 50.
- 51. Passive: The event isbeing held in May.
- 52. Passive: The event isbeing held in May. Active:
- 53. Passive: The event isbeing held in May. Active: The event takes place in May.
- 54. TIP: Watch forany tense of the verb “to be” in your writing to find passively voiced phrases.
- 55. Use exclamation points, capitalization,and quotation marks sparingly
- 56. Use exclamation pointsto convey true excitement.
- 57. Use exclamation pointsto convey true excitement. Use capital letters for proper nouns, not common nouns.
- 58. Use exclamation pointsto convey true excitement. Use capital letters for proper nouns, not common nouns. Use quotation marks for quotes.
- 59. Don’t try tobe a professor
- 60. Your audience needs tobe able to understand what you write. Avoid $10 words and jargon.
- 61. Reread, revise, rewrite (thenrinse and repeat)
- 62. “The first draftof anything is shit.” (Ernest Hemingway)
- 63. If possible, take abreak between drafts so you can revise with fresh eyes.
- 64. A final wordon style...
- 65. Tirelessly strive forclarity, because a confused mind always says no.
- 66.
- 67. STRUCTURE is theorganization of words and sentences into paragraphs, lists, headings, and sub-headings.
- 68. A major goalof structure is to enhance readability, so live by this mantra when you write:
- 69. Your website isn’t areport (even if it is)
- 70.
- 71.
- 72. Painful truth time: Mostpeople aren’t going to read what you’ve written
- 73. How people readonline:
- 74. How people readonline: 1) They scan
- 75. How people readonline: 1) They scan 2) They follow an F-shape
- 76.
- 77. How do we leverage these habits through well-structured web writing?
- 78.
- 81. Get to thepoint quickly
- 84. Create a visualhierarchy
- 86. page ID (1stlevel heading) 2nd level heading 3rd level heading bulleted list
- 87. BONUS! HTML heading tagsand lists can help with site accessibility and SEO
- 88. A final wordon structure...
- 89. Have a planfor organizing what you need to write before you start typing.
- 90.
- 91. SUBSTANCE is thesubject matter, message, and meaning of writing.
- 92. Substance boils downto 2 questions:
- 93. Substance boils downto 2 questions: What am I writing (about)?
- 94. Substance boils downto 2 questions: What am I writing (about)? Who am I writing for?
- 95. First, clarify thefollowing:
- 96. First, clarify thefollowing: Are you creating content or writing copy?
- 97.
- 98. Content is “theformal expression of information.” (Gerry McGovern - Killer Web Content)
- 99. Copy persuades peopleto take some kind of action.
- 100. Content may be educational,entertaining, or informative.
- 101.
- 102. Examples of webcontent: Newsletter article Blog post About page
- 103. Examples of webcopy: Advertisement Sales letter Landing page
- 104.
- 105. Important caveat alert! Contentand copy overlap
- 106. Important caveat alert! Contentand copy overlap Content Copy
- 107. Important caveat alert! Contentand copy overlap Content Copy strategic copy + valuable content = results!
- 108. Whether content orcopy, the substance of web writing must accomplish one or (better yet) both of the following things:
- 109. Support a keybusiness objective Support a user in completing a task (Adapted from Kristina Halvorson - Content Strategy for the Web)
- 110. What am Iwriting (about)? Support a key business objective Support a user in completing a task Who am I writing for? (Adapted from Kristina Halvorson - Content Strategy for the Web)
- 111. People are onyour site to complete a task...
- 112. People are onyour site to complete a task... Help them complete that task.
- 113. To do this,you must write for your audience, not for yourself.
- 114. Now let’s bringit full circle!
- 115. Needless words muddythe substance of web writing.
- 116. Two culprits ofneedless words:
- 117. Two culprits ofneedless words: 1) Happy talk
- 118. Two culprits ofneedless words: 1) Happy talk 2) Instructions
- 119. Happy talk “conveysno useful information, and focuses on saying how great we are, as opposed to delineating what makes us great” (Steve Krug - Don’t Make Me Think)
- 121. “The main thingyou need to know about instructions is that no one is going to read them—at least not until after repeated attempts at ‘mudding through’ have failed” (Steve Krug - Don’t Make Me Think)
- 123. How to getyour point across to your audience:
- 124. How to getyour point across to your audience: Words must be meaningful (not clever)
- 125. How to getyour point across to your audience: Words must be meaningful (not clever) Links should be descriptive (avoid “click here”)
- 126. How to getyour point across to your audience:
- 127. How to getyour point across to your audience: Tell a story (our brains are wired for narrative)
- 128. How to getyour point across to your audience: Tell a story (our brains are wired for narrative) Include a call to action (tell people what they need to do next)
- 129. One last timenow!
- 130. One last timenow! Style
- 131. One last timenow! Style Structure
- 132. One last timenow! Style Structure Substance
- 133. One last timenow! Style Structure Substance
- 134. That’s all folks! Questions?
Editor's Notes
- #2 Web writing...\nIt’s important to tackle web writing as its own subject because writing for online media is in many ways completely different from how most people are taught how to write in school.\nAnd with so staff people at ARPA creating content for our online channels (websites, REConnect), it’s becoming more and more important for us all to be on the same page and writing using the same set of guiding principles.\nSo let’s get to it.\n
- #3 Plain and simple....\n
- #4 Well there’s actually some fairly consistent reasons for this:\n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 Not a step-by-step process.\nEach element feeds into and influences the other two (those should actually be double-ended arrows).\n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 The first handful of tips are related to grammar, but just bear with me, I promise to keep it short and sweet and not give a 30 minute lecture on grammar.\n
- #20 \n
- #21 \n
- #22 Subject = noun\n
- #23 \n
- #24 I’ll illustrate this with an example...\n
- #25 \n
- #26 \n
- #27 \n
- #28 Here we have a dependent clause and an independent clause joined by a comma, which leads to my next style pointer...\n
- #29 The word “because is known as a subordinating conjunction. Other subordinating conjunction include: since, as, although, though, while, and whereas.\n\nAlternatively you could but the dependent clause first, but you need to join it to the independent clause using a comma, which leads to my next style pointer...\n
- #30 \n
- #31 \n
- #32 As noted in the previous example\n
- #33 Coordinating conjunctions: for, and, nor, but, or, yet, so (FANBOYS!)\n
- #34 As is typical of all non-journalistic writing in Canada and the US, we use the serial or oxford comma at ARPA! This is just a fancy way of saying you put a comma before the coordinating conjunction (usually and, or, or nor) and the last item in the series.\nHow this plays out: item 1 comma item 2 comma item 3 comma AND item 4. Always put that last comma in there.\n
- #35 \n
- #36 Join 2 independent clauses WITHOUT a coordinating conjunction. Basically this is how would join two complete sentences (but related) sentences together without adding any extra words.\n
- #37 Where using commas would be confusing. For example, if you had list out the names and titles of a number people in a series, you could use commas to separate each name and its respective title, but then use a semi-colon for each name and title block.\nTo clarify with an example: Rick Curtis comma CEO semi-colon Terry Welsh comma ARPA President semi-colon AND Tim Burton comma ARPA Past-President.\n
- #38 We’re lucky not to have a lot of verb conjugating to do in English EXCEPT in third-person singular where we add “s” (he readS, she readS). Normally this is fairly straight forward, there’s a common mistake people make with this...\n
- #39 \n
- #40 Writing “taste” without the S on the end implies that chocolate and vanilla are in a group together BUT the “or” in this sentence actually makes each item singular in relation to the verb, so you would actually use the singular form of the verb with the S on it, as so:\n
- #41 \n
- #42 \n
- #43 \n
- #44 Alternatively, if you switch out “or” for “and” you’re grouping chocolate and vanilla together, so the verb must take it’s plural form, and you drop the S from taste.\n
- #45 *Wherever possible*\nThis is easiest to explain with an example:\n
- #46 \n
- #47 \n
- #48 \n
- #49 You can see this goes back to the needless words things, because your adding extra words to this phrase by writing it in the negative.\nMy next tip is a BIG one, because I see it abused every day:\n
- #50 Active voice: The subject does the action designated by the verb\nPassive voice: The subject has action done on it\n
- #51 \n
- #52 “is being” makes it passive\n
- #53 \n
- #54 \n
- #55 The exceptions... when it’s OK to use passive voice:\n- When you don’t know the doer\n- When we want the doer not to be the subject \n(e.g. Standard Time was invented in 1884)\n
- #56 Inappropriate use of any of these is a major bugaboo of mine.\nThere’s a time and a place for all of these things in writing, but they lose impact when overused.\n
- #57 Use these sparingly - they are very emotive! Don’t try to thrust emotion on the reader.\n
- #58 Proper noun: names, location, date, title, etc.\nCommon noun: an object (i.e. everything else!)\n
- #59 Double quotes are used when quoting a person or a text (and sometimes for denoting titles of works).\nIn Canada, single quotes are used for quotes within quotes (they’re not a sneaky substitute that you can use to add emphasis on text)\n*Important note about all of these grammatical rules... you don’t need to be a slave to them!*\n
- #60 So that’s it for grammar, now on to a couple general style tips before we wrap up this section\n
- #61 \n
- #62 And last but not least you want to reread, revise, and rewrite your first draft. And Ernest Hemingway does a really nice job in summing up why:\n
- #63 It’s all to tempting to finish the first draft of anything and so “ok I’m done”, send it off, and move on. Resist this urge, and if you can...\n
- #64 \n
- #65 Before we move onto structure, a final word on style...\n
- #66 If people can’t understand what you’re telling them or asking them to do, they’re going to move on.\n
- #67 \n
- #68 \n
- #69 In all writing, but especially web writing...\n
- #70 I mean two things by this...\n
- #71 1. In almost all cases, you don’t want to format text on the web like you would for long-form print (who want to stare at their computer screen and read that?)\n2. People usually go to websites for different reasons than they would reach for a printed document to read\n... which leads to the painful truth about web writing\n
- #72 \n
- #73 And it’s not necessarily because what you’ve written isn’t good or clear. It’s because they’re task-oriented and in a hurry (and probably doing 3 other things at the same time).\n
- #74 But when people read online they do have some fairly consistent behaviours.\n
- #75 \n
- #76 \n
- #77 These are examples of heat maps that track eye movements, and they show quite clearly how F-shaped scan patterns play out on real websites.\n
- #78 Now despite these tendencies, all is not lost! You can actually leverage these habits to your advantages by intentionally structuring your web writing. So here’s a few tips:\n
- #79 \n
- #80 \n
- #81 What makes this headline effective is characteristic of many effective headlines:\nSpecific\nProvoke curiosity or fascination (e.g. ask a question)\nIndicate how-tos or lists will follow\n
- #82 Second structure tip...\n
- #83 \n
- #84 Within the first 50 word of this article, you know exactly what it’s going to be about.\nThis is the opposite of how you learned how to write papers in high school and post-sec.\nYou want to be very specific right at the beginning (so people know they’re in the right place)\nCover the 5 Ws (write them out as practice if you need to)\n
- #85 Final tip related to structure: Create a visual hierarchy\nThe idea with this is to break text into scannable, digestible chunks, and keep formatting consistent across your website or newsletter.\n
- #86 So I’ll illustrate with an example right from ARPA’s website\n
- #87 Here you can see exactly how the page has been hierarchically formatted.\nYou have the page title “post-secondary programs” which is also the first level heading.\nThen you have the second level headings denoting the school names.\nThen you have an additional heading below that breaking up blocks of information about a particular school (with a bulleted list further enhancing readability).\nNow, this information could have just as easily be formatted as a paragraph with complete sentences communicating this information about the U of A, but because it’s broken up it’s much easier for the visitor to this page to quickly scan this information and find what they’re looking for.\n
- #88 Site accessibility helps people with visual or other impairments who use screen readers that read website content out to them, and using the formatting tools (headings, lists, etc.) in our CMS’s WYSIWYG editor actually help ensure that page content is read out in the most sensical way possible.\nAnd as for SEO, search engines play a lot of attention to the headings that appear on the page, so it’s important to be as descriptive and strategic as possible when creating page titles and sub-headings.\n
- #89 \n
- #90 Even if it’s just a little scribble on post-it note, having something to serve as a rough roadmap for whatever you plan on writing is really going to help.\n
- #91 \n
- #92 This is the juciy, meaty part of your writing!\n
- #93 To clearly communicate meaning, you need to have a clear idea of the purpose of your writing. And to clarify your purpose, you need to answer two questions:\n
- #94 First, know what kind of writing your doing, and specifically what it needs to be about.\n
- #95 \n
- #96 So first let’s start by tackling the question of what kind of writing you’re doing.\n
- #97 When writing for the web, you need to know if you’re creating content or writing copy.\n
- #98 So let’s clarify this matter of what is content and what is copy.\n
- #99 That may sound abstract, but it’s going to get more and more clear over the next couple slides.\n
- #100 \n
- #101 \n
- #102 \n
- #103 \n
- #104 \n
- #105 \n
- #106 Content and copy are not mutually exclusive.\n
- #107 \n
- #108 It helps to have a good mix of both on most websites.\n
- #109 \n
- #110 Fundamentally, these are usually one in the same because what’s good for the user (or customer) is good for the business (or organization)\n
- #111 And these two requirements tie right into the two questions posed at the beginning of this section. We’ve covered the issue of “what am I writing”, so let’s get to the matter of who you’re writing for.\n
- #112 Once you’ve identified your primary audience, the number one thing to remember is that people are on a website to complete a task.\n
- #113 So help them complete that task!\n(This goes back to structuring your writing so it’s easy for task-oriented people to navigate)\n
- #114 Can’t emphasize how important this is (back to the professor thing!)\n
- #115 OK, so now let’s really bring this full circle.\nRemember how I said the most important thing to take away from this presentation is to “omit needless words”? The reason that is so important is because...\n
- #116 \n
- #117 Specifically, there are two culprits of needless words...\n
- #118 \n
- #119 \n
- #120 It’s the text that welcomes you to a site (or sub-section) to tell you how great the thing you just entered is.\n“Brochure-speak”\nSometimes, where there’s too much focus on features, not benefits to the user\n
- #121 \n
- #122 The second source of needless words is...\n
- #123 Anyone who has build IKEA furniture know what I’m talking about\n
- #124 Alright, so let’s say you now know what kind of writing you’re doing, and who you’re writing for... let’s wrap up this section with a few quick pointers on how to get your point across to that audience.\n
- #125 Use words that are as direct as possible... they don’t need to cutesy or fancy. Just clear.\n
- #126 \n
- #127 \n
- #128 This isn’t always appropriate for all kinds of writing, but if you can incorporate some kind of narrative element (maybe a success story from your program), do it!\n
- #129 This is especially important when writing copy, but it’s also useful with content.\n(e.g. sign up for this newsletter, contact this person for more information, register for the event here, etc.)\n
- #130 The three elements of awesome web writing are...\n
- #131 The building blocks\n
- #132 How you put it all together\n
- #133 What you’re trying to say\n
- #134 And remember, even though it seems like there’s some kind of natural hierarchy to these things, they’re completely interdependent on and influenced by one another.\n
- #135 \n