Style guides:
Yale Style Guide
Sample style sheet

Know your links?
Try this exercise.

 Early on, Web style was defined by Wired magazine:

At Wired, we celebrate writing that jacks us in to the soul of a new society. In short we celebrate voice. Not the clear-but-oh-so-conventional voice of standard written English. Not the data-drowned voice of computer trade journals. And not the pureed voice of mainstream newspapers and magazines. It’s the voice of quirky, individualist writers that best captures the quirky, individualist spirit of the Net…” (Wired Style, p. 5)

Today, however, the Web is used not just by young programmers and graphic artists but also by grandmothers, business people, and children. Web content must be clear and comprehensible to all these audiences. This often means sacrificing personality for clarity.

When you create a website, it's wise to start a style sheet that documents the decisions you make about capitalization, punctuation, abbreviation, file names, link text, alt text and other issues. This sample style sheet (PDF file) lists the editorial issues for the website www.KindredCircle.com.

Editorial guidelines

• Make the page scannable, if you expect your audience to skim.
• The writing should be comprehensible and concise—omit unnecessary detail and use short sentences, familiar, concrete words, simple syntax.
• Use an appropriate voice—use an objective tone and address your audience directly (with the second-person pronoun "you").
• Make titles and headings direct and very concise. Avoid puns and put the most important words first.
• Alt text should describe what the image communicates, not how it looks.
• Page descriptions should inform, not advertise.
• Reinforce credibility by including contact information, identifying the author's qualifications, and dating each page.

 Link guidelines

• Every page should have at least one link.
• Minimize the use of in-line links, which interfere with reading. Group links together in the margin on at the end of the page.
• Underline the most important words.

Yes: In the latest issue of DogFancy.com, experienced pet owners offer tips for paper training your new puppy.

No:  In the latest issue of DogFancy.com, experienced pet owners offer tips for paper training your new puppy.

• Link text serves as the Web's signposts. It should help users decide where to go as clearly and succinctly as possible. Don't be clever and do avoid puns and obscure allusions.

Yes: Use Word's AutoSummarize feature to automatically create summaries of your work.

No: Just the gist!

• The text should make sense without the hyperlink.

Yes: Jane Furman, self-described "cat whisperer," shares the secrets of communicating with your feline.

No: Click here for more info.

• Use the exact title if it's the name of a well-known site (like Amazon.com) or is clearly the title of the article (like The Cyber-Debate That Wasn't).
• Modify the title to finish a sentence, if it isn't descriptive or meaningful, or if there is no title.
• In link lists, mention specific features and content.

Yes: The Motley Fool—Stock tips, financial planning advice, company reports, and other resources for beginning and advanced investors

No: The Motley Fool—Lots of valuable info

• In links to non-Web pages, indicate file type and size.

Printer-friendly version of this article (Word .DOC, 75 K)

• Mention special constraints (membership-only) or requirements (PDF reader).

Complete Market Data (members only)
 View video of award ceremony (requires RealVideo 7.0)

• Include the URL if the page is likely to be printed.

Visual guidelines

• Make display elements reflect content organization. Related elements should be treated similarly (e.g. same font) and be near one another on the page. Use visual cues (such as color, size, and contrast) to indicate relative importance.
• Ensure text is readable by using sans serif fonts and short (40-60 character) line lengths.
• Links should look clickable; use underlining only for links.
• Use illustrations to communicate, not to decorate. Choose the appropriate type of graphic for the meaning you want to convey. Photographs often provide too much information.
• Choose icons that will be easily and correctly interpreted.
• Animate selectively. Animation works best to illustrate processes or temporal changes. Allow the user to start and stop the animation.

Examples:

• Useful line drawings of compost bins support building instructions better than photographs
• Animation demonstrates how to juggle
• Video and still photos teach how to make whipped cream

Key concepts:  alt text, microcontent, mouseover text, page description

To top

More information

• Credibility guidelines for the Web -- Ten guidelines derived from research at Stanford University.
• Dangerous words -- Cliched, vacuous words and phrases to avoid in Web writing
• Hot Text: Web Writing that Works -- Guidelines for presenting different kinds of content (FAQ, marketing copy, etc.) effectively on the Web. Available on Amazon.com. Also available for free in PDF format on the authors' website.
• How to write titles -- Examples of effective and ineffective titles
• Long word replacements -- Alphabetized list of words and their more concise equivalents; also includes lists of phrases and redundancies
• Microcontent: How to Write Headlines, Page Titles, and Subject Lines -- Guidelines from Jakob Nielsen
• Page Titles that Attract Readers -- Why Web pages need page titles and what makes a good title
• Using Link Titles to Help Users Predict Where They Are Going
• Web Page Design for Designers -- Covers graphics, navigation, typography and more
• Write Like a Human Being -- Six ways to make text work better on the Web; full PDF version of chapters from Hot Text: Web Writing that Works
• Writing for the Web -- Helpful discussion of how to chunk information
• Yale C-AIM Web Style Guide -- Covers graphic design, editorial style as well as page design and navigation

To top