This guide will help you communicate with online audiences by creating effective web content.
Best Practice Cheatsheet
- write content that is useful for the user (not for you).
- communicate the important information first.
- write clear, concise sentences and paragraphs.
- use headings and subheadings to organize content and make your pages scannable.
- use photos that relate to or add to the content of the page.
- use bulleted lists to present a list of things or information.
- use numbered lists to show an ordered sequence.
- create links using the title of the linked resource.
- inform the user if a link will open a new window or download a file.
- prioritize welcome text or marketing speak over necessary information.
- use line breaks or empty paragraphs to create whitespace.
- apply your own custom styles to text.
use headings to style text.
- use centered or right-justified text.
- use bold or italic text to draw attention to content.
- underline text that is not a hyperlink
- write text IN ALL CAPITAL LETTERS
- use tables for anything other than tabular data
- use stock photos
- insert photos into text for decoration
- forget to add a description to each image
- create "click here" links
- make links open in new windows
You are in the publishing business
To paraphrase Kristina Halvorson, if you produce content for a website, then you are a publisher. However, many web content writers never intended to become a publisher; nor did they receive any training in the publishing business.
It is more likely that web content writers are used to the "Word document" model of publishing where a single person crafts a single document. While this person may need to adhere to editorial guidelines and a standard Word template, he/she crafts the text, layout, formatting, and design of the document. The same person may also be the document's sole editor.
In larger publishing organizations, work is divided between writers, editors, and layout artists. At Columbia, editors are department heads or communications directors. The layout artists are the web designers and developers – in our case, CCIT. The writers are the staff of the departments who are responsible only for the creation and maintenance of the text.
Who is this resource for?
This resource is for Columbia College staff who write content for one of the websites managed by CCIT – including, but not limited to, Columbia College, Admissions, Financial Aid, Student Affairs, and Career Education.
What this resource is
This resource is a set of key concepts and specific guidelines for creating effective web content.
To support your understanding of these ideas we present background information on how users digest web content.
It is our hope that this resource will help you to create more effective content, increasing the value of our websites to our core audiences.
What this resource is not
- This is not an editorial style guide.
- This is not a Drupal user guide.
- This is not a Columbia brand guide.
- This is not a resource on content strategy
This information is available on other pages:
Why did we create this resource?
CCIT deploys websites using Drupal. Drupal is a content management system that allows the College staff to publish and manage website content with minimal support from CCIT. Drupal has allowed CCIT to provide the staff with many useful tools and with a minimum of resources.
Drupal has also taken the content writing task out of the hands of the web designers, web developers, and communications teams. This responsibility now falls on the staff members.
This resource defines web content best practices for the College's staff to increase the effectiveness of the College's communications.
How Web Content is Different
Reading vs. Scanning
- Users scan a page; they do not read word for word
- Web pages must be constructed so that the key ideas can be found and understood without reading word for word.
- Important information must come at the very top of the page – the "inverted pyramid" organization of information
- Users pay close attention to photos and other images that contain relevant or deliberately requested information but ignore decorative imagery.
For more information, see:
- "Eye Tracking: Where do readers look first?" from the Yahoo Style Guide
- "F-Shaped reading pattern" from Jakob Nielsen
- "Get to the point" from the Yahoo Style Guide
- "Writing Inverted Pyramids in Cyberspace" from Jakob Nielsen
- "Photos as Web Content" from Jakob Nielsen
Narrative Content vs. Actionable Content
Adapted from Jakob Nielsen, "Writing Style for Print vs. Web"
Traditional printed publications contain linear content that's often consumed in a more relaxed setting and manner than the solution-hunting behavior that characterizes most high-value Web use.
In print, you can spice up linear narrative with anecdotes and individual examples that support a storytelling approach to exposition. On the Web, such content often feels like filler; it slows down users and stands in the way of their getting to the point.
Web content must get to the point quickly, because users are likely to be on a specific mission. In many cases, they've pulled up the page through search. Web users want actionable content; they don't want to fritter away their time on (otherwise enjoyable) stories that are tangential to their current goals.
User Expectations and Impatience
"Readers assess webpages in an instant. Your content has a few seconds—three or less!—to encourage people to read more, to take action, or to navigate to another of your pages. Impatient readers will click the Back button in a hurry or will stop skimming and go to a search box."
"Get to the point" from the Yahoo Style Guide
A study of web use performed by Harald Weinreich and partners, published in 2008 by the journal ACM Transactions for the Web, shows that the majority of web page visits last less than 10 seconds. Specifically:
- 25% of all documents were displayed for less than 4 seconds
- 52% of all visits were shorter than 10 seconds (median: 9.4s)
Read Weinreich's full article "Not quite the average: An empirical study of Web use" (PDF, 971 KB)
Methods of Consumption
- Content must be understandable even when no presentation style is available or applied
- Content must work well with text-based or non-traditional web browsing tools (as those used by visitors with disabilities)
- Content should be easily and correctly interpreted by machines (such as search engines)
- Content should display well in unfamiliar contexts (RSS feeds, on mobile devices
Keys to Good Web Content
"Define a clear, specific purpose for each piece of content; evaluate content against this purpose" (Kissane)
The generation and maintenance of web content is an institutional expense. The more content you have, the more costly the website becomes to create and maintain. Therefore, all content should have a clear purpose and should achieve its goal as efficiently as possible.
This also goes back to the ideas presented in the previous page. People use web pages more often than they read web pages. A visitor to a website is looking to accomplish a task. Often, that task is to find a specific bit of information. Your content must help visitors accomplish their goal.
"Most successful organizations have realized this, yet many sites are still built around internal org charts, clogged with mission statements designed for internal use, and beset by jargon and proprietary names for common ideas." (Kissane)
While this is common sense, most organizations write content and organize websites for themselves rather than for their audiences.
"Introductory text on Web pages is usually too long, so users skip it. Short intros can increase usability if they efficiently explain the "What" and "Why" of the remaining content." (Nielsen)
Commonly unnecessary content (Kissane):
- Missions statements
- Vision statements
- Core value statements
- Press releases
- Long-winded, unreadable legal-ese
- Audiovisual dust-bunnies
Edit and cut (Hampshire College Web Writing Guide):
- 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.
See also "Clear out deadwood" from the Yahoo! Style Guide.
Consistency comes in two forms:
- visual display
- editorial style
Consistent visual display of content and consistent editorial style contribute to the professional appearance of your website. This is particulary important in an institutional setting where many users are contributing content. Regardless of how many people work on a website's content, your organization's communcations should have a singular 'voice'.
Your department likely has editorial style guidelines intended to encourage consistent voice, tense, word choice, and grammar. Please adhere to those guidelines.
Consistent visual display of content is enforced by the stylesheets that have been coded by CCIT for your website. There is no need for you to create your own content styles.
From the Hampshire College Web Writing Guide:
- 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.
- In most cases, it’s best to use subheadings to clarify the subject of various sections on a page. Users want to skim and scan for information. Headings help this process exponentially.
- 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.”
"[Proper content formatting] is the key to getting maximum flexibility and return on your investment in web content. From its earliest origins, HTML was designed to distinguish clearly between a document’s hierarchical outline structure (Headline 1, Headline 2, paragraph, list, and so on) and the visual presentation of the document (boldface, italics, font, type size, color, and so on). [HTML] is considered semantic [when standard formatting is used] to convey meaning and content structure, not simply to make text look a certain way in a browser." (Lynch and Horton)
When writing content, formatting should indicate the heirarchy of the information. Properly formatted paragraphs, headers, and lists contributes to the proper display of information, regardless of the display context. Properly formatted content will also more likely conform to accessibility guidelines (Racine).
Do not use formatting simply to achieve a look you want. The look of the content is defined by the website design and the website stylesheet. Your task is to convey information and meaning, not to make the content "look good".
For more information about how to build semantic content, read "Creating Semantic Structure" (WebAIM)
Headings & Subheadings
- Heading options are not style options. Headings convey information about the organization of content.
- Use headers to logically separate content on a page. Remember users scan rather than read text on a computer monitor, so the judicious use of headers helps people find information quickly. Use headers sequentially, to demonstrate importance. (Racine)
- Do not center headings. Centered text is more difficult for users to scan and read than left-justified text (Lynch and Horton)
You can think of heading formats as representing levels in an outline. Outline levels flow from the top level to the second, then to the third, etc. The text styles assigned to headings will vary from website to website. You should respect the default styling: do not modify it. For example, if a heading is does not use bold text by default, don't make it bold.
Heading 1 (h1) is most often the page title.
Heading 2 (H2) is the title of a page section. It is the first heading style that should be used after the page title. H2 is literally "the second level heading".
Heading 3 (H3) is a subsection of a page section. This heading style should only be used as a child of Heading 2. H3 is literally "the third level heading".
And so on...
- Provide context to search engines and screen readers (From W3C)
- Make content easier to scan (Nielsen)
- From Yahoo! Style Guide
- "Lists can draw a reader’s attention, make text easier to scan and read, add white space to a page, shorten copy, relate items, and show a sequence or the level of importance."
- Do not center text. Centered text is more difficult to read than left-justified text (Lynch and Horton)
- Do not create empty spaces using line breaks or paragraphs. The space between paragraphs or items in a bulleted list is pre-defined by the website design.
- Use bold and italics sparingly. Too much bold or italic makes text harder, not easier, to read and differentiate. Bold should be used sparingly for emphasis. Use italics for convention—for example, when listing book or magazine titles—or within text for stressed or foreign words and phrases. (Lynch and Horton; Hampshire College Web Writing Style Guide)
- "If you find yourself needing to use a lot of bold or italic text to emphasize or draw attention to something, then you are probably not organizing your information in the most effective way."
- Do not underline text. Underlines on the web mean that text is hyperlinked. Underlining non-linked text is confusing to users (Lynch and Horton; Hampshire College Web Writing Style Guide).
- Do not write text in all caps. "Capitalized text is one of the most common and least effective methods for adding typographical emphasis" (Lynch and Horton)
- Do not create your own styles. Content styles are pre-defined in the site theme for consistent, professional presentation of the website content.
- No stock photos
- Don't use photos purely for decoration. Ask the questions:
- Does this photo add meaning to the content?
- Does the subject of the photo related to the content?
- Provide descriptive alternative text for all images. This is a Web Accessibility requirement.
- Do not use "here" or "click here" (Racine, Stenstrom, Various). Links need to be intelligible out of context for accessibility.
- The text of the link should describe the linked content
- "Click here to read this article" (Stenstrom)
- Poor link text requires the reader to search for the context of the link in the text.
- Search engines use link text as a primary source of information about the site linked to
- Many screen readers have an option to read only the links for a page.
- Avoid opening links in another browser window whenever possible. Tell users when a link will open in a new window (Racine; also see Friedman's article in Smashing Magazine).
- If the link will open or download a document, indicate to the user the type and file size of the document.
- Do not tell users to “use the links on the left.” Put the information or links you are referring to right there instead (Hampshire College)
- Racine, Jesse C.: "Creating a College Web Style Guide: Defining Value, Process, and Content" (PDF, 1.7 MB) from Department of English, Northern Illinois University, 2008.
- Nielsen, Jakob: "Writing for the Web", from Useit.com: Jakob Nielsen's website.
- Kissane, Erin: "A Checklist for Content Work", from A List Apart, Issue 325.
- Stenstrom, Emil: "Click here to read this article", from Frendly Bit.
- Various contributors: "Creating Semantic Structure" from WebAIM: Web Accessibility in Mind.
- Various contributors: "Unordered lists: more than just bullets", fromWorld Wide Web Consortium.
- Various contributors: "Writing for the Web", from Yahoo! Style Guide.
- Lynch, Patrick J. and Horton, Sarah: "Web Style Guide Online" fromWeb Style Guide, 3rd Edition.
- Various contributors: "Web Writing Style Guide" from Hampshire College Communications Office.
- Friedman, Vitaly: "Should Links Open in New Windows" from Smashing Magazine.
- Weinreich, Harald et al: "Not quite the average: an empirical study of Web use" (PDF, 967 KB) from ACM Transactions for the Web Volume 2 Issue 1, February 2008.
- Various contributors: "Writing for the Web" from the Northwestern University Office of Web Communications.