Tuesday 11 June 2013

WEB WRITING STYLE GUIDE

Web Writing:
  • Use short paragraphs. Large blocks of text can look like walls, and act as such to the user. Research has shown that short, concise paragraphs and bulleted lists work best for web use.
  • Your first paragraph is the most important one. As such, it should be brief, clear, and to the point in order to quickly engage the user. One sentence paragraphs are encouraged.
  • Write in an inverted pyramid style. Place the most important information at the top, extra info toward the bottom.
    • Don’t waste space welcoming people to the page. There is no need, and most users ignore any welcome text as filler. Get to the meat - that is what they came for.
    • Just when you think you are done, look again. Cut, cut, and cut your text until it is the most essential message.
    • Name your page clearly. The page title and the navigation title should match as closely as possible. They should also clearly articulate the subject of the page. Do not use “Welcome to Communications!” Instead, say “Communications Office.”
    • Do not tell users to “use the links on the left.” Put the information or links you are referring to right there instead.
    • Use bold and italics sparingly. Bold should be used for headings and then sparingly for any other emphasis. Too much bold makes text harder, not easier, to read and differentiate.
    • Italics should also be used sparingly. Italics on the web are also hard to read. Try to avoid making long paragraphs italic – you are making the text harder to read, not giving it emphasis. Exceptions are book titles and other grammar stylings as 
    • Do not underline text. On the web underline = link. Giving a sentence an underline for emphasis is misleading. And again, you don’t really need it.
    • Use all caps very sparingly. Research shows all caps are harder to read than mixed case.
    • Don’t try to emphasize too much. If you use bolded headings, short paragraphs, and bulleted lists, you should not need to rely on italics, all caps, or underlining for emphasis. These styles can make the page look messy and compete for the user’s attention.
    • Avoid exclamation points. We know Hampshire is awesome! We love it! But exclamation points on websites make can make it look unprofessional! Let the content speak for itself.
    Banner Ads
    • Use banner ads exceedingly sparingly. They are tangential. If you use too many, they draw focus away from the content of the page and prove distracting.
    • Don’t use banner ads on a page where there is not space on the left side to fit one in. If use of a banner ad pushes down the content area to give an extra gap of white space at the bottom, then we need to find another way to display the information.
    • Keep the title of the banner ad short and concise. Put the main message in the text box section. Too many of our banner ads are top heavy. This was not how they were designed and does not look as good.
    • Contact the communications office to help you make custom banner ads or determine if a banner ad is really the best way to display the information. We are here to help.
    Headers and other images
    • Use a header image that is relevant to the subject matter.
    • Avoid pictures of buildings without people. You may know that a picture of the exterior of FPH fits well for a page, but to most people, and especially to those who are not familiar with our campus, it is meaningless. Remember your users do not have your insider knowledge. Give them pictures of people interacting instead of abstract building pics whenever possible. (We are working at the communications office to supply more header images).
    • Let the communications office help you put images neatly into your content area. Break up your text with relevant images. RedDot doesn’t make it easy, but we will…
    • Make sure you have accurate copyright permissions to use any picture. Just because it is on the internet does not mean it is free to use. When in doubt, please contact the web content manager at 
    Miscellaneous
    • Link, link, and link to relevant information. If you mention the DART program, link to it. If you include an email address, make it an email link. If you mention a faculty member, link to their bio page. Don’t make people go and search for something that you mention if it already has a page somewhere.
    • Make your links contextual. Avoid “Click here.” Use part of the actual referencing sentence as the link. Research shows that users like them to be 4-8 words in length.

      Do not use:
      For commencement information for graduating students 
    • Avoid jump (anchor) links except on long pages such as FAQs. Research shows that today’s web users don’t mind scrolling if the content is useful and easy to scan. Anchor points just make pages longer, and are used too often on pages that are already a reasonable length. If you are not sure, please contact the web content manager at so we can discuss it. If you do want to use anchor links, then there are best practices that should be followed.
  • Keep your content up to date. Out-of-date content reflects poorly on the user’s overall opinion of the website and the College. It also degrades the trust of the user to later find information on the website. If you put up info that needs to be updated later, mark it on your Zimbra calendar so you don’t forget. Give yourself the time necessary for the page to get through workflow (2-5 days).
Writing for the web can be a daunting task. Let us help you make your web content successful. We know RedDot can feel unwieldy, and we are here to help make the process easier and the web pages more usable and useful.