35 tips for writing for the web

During a meeting today someone said “writing for the web is easy, just use proper English!” Sadly, we all shook our heads and replied that no, writing for the web often means breaking the rules that you’ve learned through so many grammar lessons and style guides.

Below are some rules for better web and interface writing, courtesy of Jakob Nielsen and my own interactive product design experience. These are my strong opinions, weakly held – please post comments, corrections, and disagreements at the end of this article.

Here’s Jakob’s why we break the rules for better results. In summary, people scan web pages and apps instead of reading them word by word.

Create scannable text by using:

  1. the inverted pyramid style, starting with the conclusion, then supporting information, then background / framework.
  2. half the word count (or less) than conventional writing. Users read 20% of the words (28% at most). Total % read drops as word count increases.
  3. highlighted keywords (links and bold).
  4. meaningful sub-headings (not “clever” ones).
  5. bulleted lists.
  6. 1 idea per paragraph, in the first few words.

Here are some more “writing for the web” tips from Jakob:

  1. Users scan instead of reading (though new ereaders, e.g. the iPad seem to buck this trend).
  2. Best online content is linear, reader-driven, actionable content composed of specific, comprehensive data. Fragments trump sentences.
  3. Write numbers as integers (1) instead of text (one). It’s better to use “23” than “twenty-three” to catch users’ eyes when they scan Web pages for facts, according to eyetracking data.
  4. Your headline text gets 40-60 characters of attention. It must stand on its own and make sense when the rest of the content is not available.

More rules for writing for the web

These are my own basic style rules, based on ad hoc experience (and therefore shakier than Jakob’s).

Design interfaces for hormonal, ADD-addled adolescents. “What would the NY Post do?” Think tabloids, not novels.

  1. 1 action per page.
  2. 1 idea per paragraph. This typically means 1 sentence per paragraph, sometimes 2. A 4-sentence paragraph is almost always too long.
  3. Numbers, not words.
  4. Lists, whether numbered or bulleted, are your friend.
  5. People look at photos first, especially photos of people.
  6. It’s better to display nothing than default images or filler text.
  7. Semicolons are almost never okay.
  8. Short lines of text are easier to read. Lines of text generally shouldn’t be longer than 34 ems long. (An “em” is generally equal to the height of the typeface – it’s a measurement based on the width of the letter M at the text’s current size.)

You’re always better minimizing visual emphasis. Focus on using fewer words, so they aren’t all competing for the reader’s attention.

  1. You can center 1 piece of information per page. Centering breaks a design grid and thereby becomes the most important thing on the page.
  2. Stick with bold for emphasis.
  3. Don’t present text in all caps unless you know the reader will stop – it destroys the letterforms. Sentence case is best. Possible exception – small words in buttons.
  4. Italics are almost never a good idea. Italic sans-serif is a typographic foul and italics generally distort letterforms too much for pixelated screens. Stick with bold. If you need a backup, try changing your emphasis style to display a highlight color on the text rather than italicizing it.
  5. Use bold sparingly. Words, not sentences.
  6. Don’t use bold, italics, and/or caps together on the same word.

Links are often the victim of “form before function” design thinking. Keep links visible!

  1. Use a very different color from the text.
  2. Include verbs in links.
  3. Include the destination page title in the link.
  4. If you hide everything else on the page, the reader should still know what the link will point to by reading the link text.

Grammar for teh internets:

  1. Log in is a verb. Login is a noun. Same with sign in, back up, etc. You almost always use the verb form.
  2. A lot is always 2 words except when it’s a verb, which is probably not what you mean. Remember it this way: “a pound, a bunch, a lot.”
  3. “It’s” is the contraction, “its” is the possessive pronoun. Possessive pronouns never have apostrophes: his, hers, its.
  4. When creating possessive nouns, use “‘s” for singular nouns, even if they end with s, e.g. “my dog’s collar is silver” or “Chris’s tutorial is helpful.” The latter is optional in some books, but if you always do it this way (“‘s”) you’ll avoid some crazy coding whenever you have to build an interface that creates a possessive noun from dynamic values like usernames.
    Put an apostrophe after the s if the noun is plural and ends in s, e.g. “the 7 dogs’ collars were all silver” or “The Judds’ interview was full of shocking revelations.”
  5. 1 space after periods, not 2. Too much spacing creates visual “rivers” of whitespace within large blocks of text.
  6. “Everyday” means common, mundane, or pedestrian. “Every day” describes the frequency of an occurrence. I wish I could write an epic blog post every day, but I can barely squeak out an everyday post on a quarterly basis.
  7. “Anytime” means “at any time” but I don’t think it’s ever okay to write “at anytime.”