Writing for the Web

Copy

Any web site you intend to include in your portfolio needs to actually have copy and not lorem Ipsum. It is important that your copy is professional and it is ok if you use a writer. You and/or your writer needs to know how best to write for the web.

Content precedes design. Design in the absence of content is not design, it’s decoration. jeffrey zeldman

Just say No to Lorem Ipsum jason fried

Lorem Ipsum is Killing Your Design design informer

Tests

Tests have shown that the speed for reading on screen is 20 - 30% slower than it is for print and the reader reads with less concentration and accuracy.

When users are tested via eye tracking it shows that they scan down a page rather than reading from top to bottom.



Keep Your Audience's Attention

Your audience wants to find information quickly and expects it to be easy to read. In order to keep your audience’s attention you need to keep it short and stick to the point, make the copy easy to scan by using frequent sub headings and lists.


Tone and Style

  • Keep your writing informal and friendly with a conversational tone.
  • Keep it precise and to the point, without embellishments.
  • Use simple words.
  • Short sentences.
  • Include contractions.
  • Stay with only one idea per paragraph.
  • One main theme / topic per page.
  • Do not start with a lot of background information and don’t include any unless it is really necessary.
  • Do not use acronyms unless you are absolutely sure that all of your audience/users will understand them.
  • Keep them Reading

    It goes without saying that your copy should be geared towards your target audience's level of understanding, interest and technology skills.

    Proof Read

    Have someone proof read all of your copy. You are too close to your work, you know what it is you are trying to say but have you really said it. Nothing breaks concentration more than having to keep rereading trying to understand the meaning. Also they can check for any grammar and spelling errors you might have missed.


    Optimize

    To optimize your site to facilitate reading you need to:

  • Have a clear hierarchy of titles and subtitles
  • Use h1- h6   (they are required for 508)
  • Use lists
  • Increase line height to at least 120%
  • Line length 45 - 75 characters (optimum is 65)
  • Very short paragraphs
  • Increase negative space (white space)
  • Use more columns for text on wider pages
  • Sans Serifs are easier to read on the web. Use San Serifs under 16px.
  • Design for future changes in font size: use ems
  • Breakup text with images
  • Give images wide margins
  • Good contrast between text and background
  • Do not underline any text unless it is a link
  • Do not include too many links within the copy
  • I know I do not have to tell you this but just in case: NEVER, NEVER put drop shadows on text.


  • Headings

    Headings define the structure of the web page. It is important that you use them correctly. The tags are from h1 to h6: <h1>Title</h1> - <h6>subtitle</h6>. For the most part users only scan down the page  so headings are important to get their attention.

    The importance denoted by each number is in descending order with <h1> being the most important. Except for <h1> each heading is a subset of the immediate higher number. By default each heading has a size. <h1> being the largest and <h6> the smallest. You can change the sizes with the CSS but should still keep the visual progression with <h1> being the largest etc, then users can see the importance of information on the page.

    Section 508

    Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology,the user and Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities... . from: www.section508.gov

    Screen Reader Demonstration


    Link to Screen Reader Vides
    This video demonstrates screen reader in action and shows the importance of the correct use of headings for the blind or visually impaired user. This is a must see video for all web designers.

    Although originally Section 508 only applied to federal agencies there is now an expectation that its requirements extend far beyond the government. There have been a number of law-suites against companies whose websites were not Section 508 compliant one of the most prominent cases was The National Federation for the Blind vs Target.