Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Writing for the Modern Web

13,563 views

Published on

Do you know how to write for the modern, mobile, and interactive web? Our expert, King, discusses how to create a content strategy, how to write for the mobile web, and how to write content that makes customers respond. Blakiston talks about how to write more effectively for the digital user experience without jargon, overcomplicated instructions, and walls of unnecessary text. She highlights why good web writing matters, how users read online, how to define your audience and primary messages, and how to create good web writing by focusing on essential messages, creating a logical structure and format, using active voice, and cutting out what isn't necessary. Meyer discusses strategies to help make your library's website content easier for patrons to get the information they need faster, and easier for library staff to manage.

Published in: Marketing
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Writing for the Modern Web

  1. 1. for the Writing David Lee King | Rebecca Blakiston | Elaine Meyer flic.kr/p/aHV47t Web
  2. 2. Content images videos words $$$
  3. 3. Content images videos words $$$ awesome!
  4. 4. Content images videos words $$$ Respons-ibility
  5. 5. so let’s improve our words
  6. 6. the Problem(s)
  7. 7. #1we’re not writers
  8. 8. General Reference Center:
 A general interest database that integrates a variety of sources in one easy-to-use interface. Use General Reference Center to find articles from magazines, reference books, and newspapers, many with full-text and images.
  9. 9. 8 seconds to grab a reader’s attention #2
  10. 10. People Product Process
  11. 11. the People
  12. 12. know your customers
  13. 13. know your customers
  14. 14. Have a focus flic.kr/p/eo52B3
  15. 15. know your staff, too
  16. 16. the Product
  17. 17. words are a product
  18. 18. focus
 on the 
 right things flic.kr/p/5qtj4r
  19. 19. the Process
  20. 20. titles! flic.kr/p/o6B7TP
  21. 21. wikipedia
  22. 22. use
 imagesflic.kr/p/rrtaDX
  23. 23. know speling errores
  24. 24. re-use
 content website Facebook Twitter
  25. 25. where to start?
  26. 26. have fun! flic.kr/p/qfMsoQ
  27. 27. Elaine Meyer www.mcls.org uxlibrarian@gmail.com www.uxlibrarian.com Writing for the web Internet Librarian October 27, 2015 Monterey, California
  28. 28. Why is writing for the web different? Reading from a computer screen is: • tiring to your eyes • 25% slower than print reading. People are less likely to read long pieces of text online then in print. Jakob Nielsen: http://www.nngroup.com/articles/why-web-users-scan- instead-reading/
  29. 29. How do people read online? Instead, they: • skim, scan and select • browse before diving in • read a little at a time, mostly in short bursts • grab what they need and get onto their goal. They don’t!
  30. 30. Less is more Less content • is easier to manage • is more user-friendly • costs less to create
  31. 31. Planning your web content Web content is useless unless it supports: 1. A key business objective such as: • Promotes events & training classes • Encourages citizens to become patrons 2. Users in completing a task • Search catalog for an item • Find a study room • Library hours/directions • How long can I keep my book?
  32. 32. Questions before writing Before you write anything, ask yourself: • Why am I creating this page? • Who am I talking to? • What is my main message? • Does the user need it? • What do I want the user to do after reading it? Every page must have a clear purpose!
  33. 33. Content accessibility Content is truly accessible only if it can be used by people with disabilities. Patrons with disabilities must be able to use everything: • Links • Buttons • Form controls • Images • Etc
  34. 34. Use descriptive link text Not descriptive: To complete the online Reserve Form, click here. Descriptive: Complete the online Reserve Form. Never use “Click here” to describe a link • “Click here” is not descriptive for screen readers • Links are given extra weight by search engine spiders, so avoid “Click here”.
  35. 35. Human readable URLs Not descriptive: http://www.michigan.gov/libraryofmichigan/ 0,2351,7-160-50206_18637_18649-2090--,00.html Descriptive: http://www.michigan.gov/libraryofmichigan/ accessibility_policy
  36. 36. Button labels • Keep button labels short and action oriented. • Avoid ‘Go’ or ‘OK’ as button labels. Instead, use the appropriate verb or phrase, such as ‘Submit’ or ‘Give feedback’.
  37. 37. Alert users of outside content Microsoft Excel Adobe PDF Open in a new window PowerPoint Microsoft Word
  38. 38. Contrast Color picker tool: ColorZilla for Firefox Color Contrast Checker: WebAIM http://webaim.org/resources/ contrastchecker/ Both size texts failed the contrast checker for the search button
  39. 39. Red/green color blindness Don’t use color as the only indication of what to do! Use labels instead:
  40. 40. AVOID USING ALL CAPS Caps are: • Difficult to read • Portray shouting • Relay urgency This includes navigation items like menus, footer, buttons, etc
  41. 41. Left-align text Instead of this: Try this:
  42. 42. Images – text equivalents Non-text items include: • Images • Image buttons • Charts/graphs • Audio files • Multimedia files that include both audio and video Text information MUST be provided for web content that is not textual.
  43. 43. Images – text equivalents <alt> attribute: every image must have valid ‘alt’ text alt="Find it for FREE” Why use the “alt” attribute (commonly known as “alt text”)? • Provides text equivalent for blind users • Indexed by search engines • Can add additional information for the user alt= “Gale LegalForms - Find it for FREE”
  44. 44. Images that don’t convey information What type of images don’t convey information? • Spacer images • Design images • Background images Use null alt text: alt=““ (alt=quote quote with no space in between)
  45. 45. User assistance (help!) Kent District Library Wayne State University Libraries Purdue University Libraries Indianapolis Public Library
  46. 46. Go back and check your work Keep asking yourself: • Is this clear? • Is there a simpler way to say this? • Is there a shorter way to say this? • Is this even necessary? Check your work: • before you publish your stuff • after you see it online • again next week (the article will be different the next time you look).

×