Web Content Style Guide

Web Content Style Guide Wake County Applied Technologies Web Support Team Updated: July 23, 2008 Introduction These guidelines were drawn and modified from a cross-section of other local government websites, the Website Style Guide of the N.C. Department of Health and Human Services, the City of Reno (Nev.) Website Standards Handbook and the U.S. Department of Health and Human Services’ Research-Based Web Design & Usability Guidelines, located at www.usability.gov. They are designed to help Wake County Government’s Web authors and editors communicate desired information on WakeGov.com and WakeEmployees.com in a manner that is clear, organized and consistent. Following these guidelines, the County’s Web authors and editors will be able to contribute to better and more usable Web information for the public, for employees assisting the public, and for those seeking employee-specific information. Through the Web Support Team in the Information Services Department’s Applied Technologies Division and through the Public Affairs Office, Wake County seeks to provide clear information in an efficient and effective manner to its clients, partners, businesses and the public. These guidelines contribute to the timely collection, organizing and disseminating of information in a usable format to our customers. As with any document concerning style and usage, this is a living document and will be updated and amended as needed. Efforts have been made to address issues common to pages throughout the County’s websites. For specific questions or concerns not addressed here, please contact Web Content Specialist Steve Walston at 856-6079 or Web Administrator Chris Smith at 856-7331. 1. Writing Web Content “Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.” – William Strunk Jr., Elements of Style Content is the most important part of a website. Users must receive the information they need, in a way they can easily understand, for a website to be of any value. Writing content for a website is not the same as writing for print publications. In most cases, simply retyping or copying and pasting information directly from a brochure or other print item is not acceptable for Web content. When writing Web content, use everyday words and avoid jargon and technical or department-specific terms. Any acronyms and abbreviations must be clearly understood by the general public and defined on the page. Keep sentences and paragraphs as short as possible, and follow the “inverted pyramid” style, stating the most important information first. The first sentence of each paragraph should describe the remainder of the paragraph. Also, use upper- and lowercase letters appropriately, write in an active, positive voice, and limit text on navigation pages. Keep it simple. Website usability experts recommend writing for a 6th-grade level on main Web pages and an 8th-grade level on subpages. With that in mind, consider these other tips for writing for the Web: 1.1 Use familiar words Use words that the general public or visitors to a specific area of the website will easily understand. Terminology should not hinder the user’s ability to get information. Many terms familiar to Web authors or other County employees may not be clear to all users. A good litmus test is, would an elderly relative or neighbor understand what you’re trying to say? Don’t assume the user has read the information on preceding Web pages before reading a specific page. Websites don’t read like a book. Users can skip around and jump forward via hyperlinks to other Web pages. Keep in mind that they may not have the background information you provided on another Web page. Of course, many users to a particular content area may be accustomed to a jargon term. For these users, it may be helpful to put that term in parentheses. Linking to a description of a term may help users who are new to a topic, but it should not be common practice to use terms the general public would not understand. Always consider your audience, strive for clarity and use everyday words – words that are familiar to, and used frequently by, your target audience. Words that are more frequently seen and heard are better and more quickly recognized. A simpler word is preferable; for example, “use” is better than “utilize.” 1.2 Define acronyms and abbreviations, and use sparingly Limit your use of acronyms and abbreviations. Avoid them completely if they’re not familiar to all users or clearly defined. Remember that users who are new to a topic are not likely to be familiar with the topic’s related acronyms and abbreviations. Local government has many acronyms that require context; for example, a search of the term “CFAC” on WakeGOV will return results for both the Citizens Facilities Advisory Committee and the Consumer and Family Advisory Committee. Use this format to define acronyms or abbreviations: City-County Bureau of Identification (CCBI). Unless they are omitted in an official name, keep the periods in abbreviations – e.g., U.S. Army, N.C. Division of Motor Vehicles. If in doubt, err on the side of including the periods. Even if you define acronyms and abbreviations on first mention, remember that users may miss the definition if they scroll past it or enter the page below where the acronym or abbreviation is defined. Some acronyms are acceptable on first reference, including government agencies such as FBI and NASA. Consult the Associated Press (AP) Stylebook for other examples, but remember this rule: “If in doubt, spell it out.” It is better, in most cases, to use complete words rather than abbreviations. Only use abbreviations when they are significantly shorter, save needed space and will be readily understood by typical users. A note on addresses: As stated in the AP Stylebook, only the following should be abbreviated as part of a full address: Blvd., Ave. and St. All others must be spelled out. (e.g., 337 S. Salisbury St., 400 Capital Blvd., but 1002 Dogwood Drive, 6000 Old Smithfield Road) Abbreviate directions as E., N., W., S. 1.3 Use mixed case with most text Follow the rules you learned in 2nd grade – capital letters should be used at the start of a sentence and for proper nouns. Except for labels and headings, use mixed upper- and lowercase letters. This makes reading text easier. Only if a specific item is meant to attract the reader’s attention should it be in all UPPERCASE, bold, or italics. As shown in the example below, these methods for showing emphasis should not be used for more than one or two words or a short phrase because they slow reading performance when used for longer sentences. Consider the following: ONLY IF A SPECIFIC ITEM IS MEANT TO ATTRACT THE READER’S ATTENTION SHOULD IT BE IN ALL UPPERCASE, BOLD, OR ITALICS. THESE METHODS FOR SHOWING EMPHASIS SHOULD NOT BE USED FOR MORE THAN ONE OR TWO WORDS OR A SHORT PHRASE BECAUSE THEY SLOW READING PERFORMANCE WHEN USED FOR LONGER SENTENCES. As explained in Section 3.1, do not underline text on the Web, as the user may mistake it for hyperlinked information. Otherwise, remember to: • Avoid using all capital letters, even for just a word or two. • Keep use of italics to a minimum, and avoid using italics in long blocks of text. 1.4 Spare your words (and sentences) When it comes to Web pages, less is more. The average Web visitor scans quickly for information, so start with the main point in the first sentence. Paragraphs should generally consist of no more than four to six lines, with a double-space between, established by using the paragraph icon in the text editor rather than hitting the Enter key twice. The more “white space,” the easier it is to read. For reading comprehension, use short sentences – no more than 20 words. Again, minimize scrolling by stating information succinctly and putting the most important details first. 1.5 Limit text on navigation pages Navigation pages, or Web pages that are mostly or entirely lists of links, need only enough text to help the reader. When navigation pages contain lots of words, users will scan quickly for specific words or begin clicking on many different links, rather than reading the text associated with the links. Less text lets the links take center stage. 1.6 Use active voice In most cases, it is better to use active voice rather than passive voice. Simple, direct language grabs attention. Sentences in active voice are usually more concise than passive sentences. Active voice – a subject followed by a strong verb – helps the user know who is acting and what is being acted upon. For example, “John hit the baseball” is much more direct, bold and concise than “The baseball was hit by John.” 1.7 Keep it positive In general, use affirmative statements rather than negative statements. Tell users what to do (Drink fluids even if you don't feel thirsty), rather than what to avoid doing (Don’t skip regular water breaks on hot days). If the likelihood of making a mistake is high or the consequences are dire, negative voice may be clearer to the user. 1.8 Check your lists Lists are very useful on websites for getting across information in a visually appealing format. When using lists, remember these points: • When listing within a body of text, commas should appear after every item in the series, unless the word is followed by the word “and.” Example: Bald eagles, ospreys, herons, mergansers and kingfishers are native to this area. • Lists written in bulleted format where the bullet points form complete sentences should use capital letters at the beginning of the sentence and appropriate punctuation at the end. Example: Please note that: • • • • • Any child under 13 needs a parent or guardian to sign for a card. Wake County residents are issued cards free of charge. Nonresidents may obtain a card to check out materials for an annual fee of $25 or may obtain a card for computer use only free of charge. The replacement charge for lost cards is $1. Bulleted lists with only single words or phrases should use capital letters at the beginning of each bullet, with no other capitals except for proper names and no punctuation at the end. Lists where bullet points are sentence fragments should use uppercase letters at the beginning of each point and should only include punctuation at the end of the entire list. Example: Activities include: • • Ensuring the adult care home’s plan matches the resident’s needs Assisting the resident and the adult care home in accessing other needed services. • 2. Organizing Content Most users scan rather than read information on websites. Well-designed headings help to facilitate both scanning and reading written material. Try to use unique and descriptive headings, and use as many headings as necessary to enable users to find what they are looking for – it is usually better to use more rather than fewer headings. Headings should be used in their appropriate HTML order (i.e., Heading 1, Heading 2, etc.), and it is generally a good idea not to skip heading levels. Make sure each page has a unique and descriptive page title. When tables are used, include descriptive row and column headings that help users to clearly understand the information in the table. 2.1 Use clear category labels Ensure that category labels, including links, clearly reflect the information and items contained within the category. Category titles must be understood by typical users. Users will likely have difficulty understanding vague, generalized link labels, but will find specific, detailed links and descriptors easier to use. Example: The blue category labels below allow users to distinguish paths quickly. 2.2 Highlight critical data If you have new or changing information on your Web page that requires user attention, especially if the information changes frequently, consider highlighting that particular text. Use bold, all caps, italics (but not underlining) or any combination of these to distinguish the vital information. Please note that highlighting is most effective when used sparingly; i.e., highlight just a few items on a page that is otherwise relatively uniform in appearance. 2.3 Use headings in the appropriate HTML order Consistency breeds confidence in a government website. Use headings in the appropriate HTML order (Heading 1, Heading 2, Heading 3, Heading 4) to help users understand the hierarchy of information on the page. The appropriate use of heading tags also allows users of assistive technologies, such as screen readers, to understand the hierarchy of information. The Wake County websites, at www.wakegov.com and www.wakeemployees.com, make consistent use of fonts for text and headings, to facilitate any future redesigns of the sites. The style sheet uses standard and custom styles for different kinds of text, such as headings, subheads and body text. Links to external pages (outside WakeGOV or WakeEmployees) should open a new browser window. 3. Links and Attachments Although the Web Support Team and each of the County’s Web authors try to keep the WakeGOV and WakeEmployees sites as comprehensive and up-to-date as possible, we know that only a portion of the information that can help our users is located on these sites. We welcome our Web authors to link to other sites (that’s why it’s called the Web), but please check the site first to see if the content is appropriate for the intended audience. Whether you’re linking to internal information on WakeGOV or you’ve ensured that an external site is OK, follow these guidelines. The Wake County government websites include links to external websites to help users of the website find useful information. These guidelines are to be followed in determining whether such links are appropriate and in establishing these links. External links refer to hyperlinks to pages that are not part of the Wake County website, www.wakegov.com. External links may be provided when doing so furthers the mission and goals of County government and its departments and agencies. The following are general guidelines for providing external links from the Wake County government website. Wake County departments and agencies should follow the guidelines stated in this policy when responding to a request for a link to a non-county organization. If a department or agency needs more guidance, contact the Web Support Team in Information Services or the Public Affairs Office. 3.1 Linking to external websites Links may be made to the following types of external websites, provided the websites have a registered Web address (URL) and are appropriate for all ages: • • • Local nonprofit community service organizations that provide information relevant to the functions and services provided by the County Official federal, state and local government websites Wake County homeowners’ associations. Links may not be made to the following external websites: • • • • Websites that contain or promote illegal material or activities, such as hate speech or obscene content Websites that contain patently false or misleading information Sites for religious or political organizations or candidates, or sites that advocate positions on issues including but not limited to legislation or ballot questions Individual or personal homepages. The Web Support Team reserves the right to remove links if the site no longer meets the County’s external link criteria. 3.1.1 Interactive/Web 2.0 components Departments and agencies should use caution in linking to sites that contain real-time components, such as blogs, chat rooms and bulletin boards. These sites may not be appropriately monitored or edited by the host, and participation criteria may not be posted on the site. 3.1.2 Commercial sites In general, the Wake County website does not link to commercial websites, with the following exceptions: • • • Utility companies that serve Wake County residents Local “Web portals” that direct users to community services in Wake County Airports and public transportation systems in Wake County. 3.1.3 Reciprocal links Organizations may link to the County’s website with or without the County’s permission. When a request is received, it should be suggested to the requesting organization to check the link periodically, as information or page structures may change over time. 3.1.4 Open a new window Links to external websites should be programmed to open a new browser window. This will maintain the user’s contact with your site. Likewise, file attachments should open in a new window. In the text editor, set “Target” to “_blank” to open a new window. Now that we’ve cleared up the policy on links for attachments and external sites, here are the guidelines for their use: 3.2 Make links (and only links) look like links The default setting in Microsoft CMS makes clickable text links blue and underlined. Keeping that in mind, please be sure that items that are not clickable do not have characteristics that suggest that they are clickable; i.e., no underlining. Use text rather than graphics for links, when possible. 3.3 Make text links long enough to be understood, but short enough to minimize wrapping A single-word text link may not give enough information about the link’s destination, but a link that is several words long may be difficult to read quickly, particularly if it wraps to another line. Generally, text links should not extend more than one line. Keep in mind that it is not always possible to control how links will look to all users because browser settings and screen resolutions can vary. 3.4 Click here and here and here… Provide meaningful and descriptive text for hyperlinks. Please don’t use “Click Here” terminology. Instead, use descriptive words for hyperlinks, such as “Download Sustainability Checklist.” This technique is proven to stand out more for users who scan pages instead of reading word for word. Minimize the number of hyperlinks that appear in a single line of text – one hyperlink is best; consider using vertical, bulleted lists for links wherever possible. 3.5 Provide a way back If you’re directing a user to a page, it’s a good idea to include a link at the bottom of the page to allow them to return to the previous section. Also, Web pages should include contact information so that users with disabilities can request accessible services or make suggestions. For other accessibility issues, see Guideline 3.7. 4. Images 4.1 Keep it simple To keep load times to a minimum, use graphics judiciously. When including an image, go for the smallest file size possible. Many photo-editing programs will help you optimize images for the Web, balancing quality with file size. Except in rare cases, a photo image should be no more than 200 pixels wide. 4.2 Keep it functional When the image is the right size, upload it to the Resource Gallery. To increase the likelihood that the image will be loadable by multiple browsers, use lowercase letters and numbers, with no symbols or space between characters. If spaces are needed, use the underscore symbol (e.g., public_safety_center2). This ensures functionality in multiple browsers. 4.3 Keep it accessible All photos and graphics must have “ALT tags” that describe the content of the image. If the image represents a hyperlink to another Web page, the alt tag should instead indicate where that link goes, i.e., “Link to…” These ALT tags are necessary to ensure accessibility for users with impaired vision. If a photo or image contains content that cannot be described within the limited text of an ALT tag, “long description tags” may be used to fully explain the image to someone using a screen reader. 5. Local Usage Guidelines In general, the Web Support Team and the Public Affairs Office adhere to the standards and usage guidelines set forth in the 2007 edition of the Associated Press Stylebook. The following are noteworthy usage guidelines with respect to spelling and capitalization: • • • Board of Commissioners (“the Board” or “Commissioners” on subsequent references) County of Wake the County, when referring to Wake County Government (the County inspects restaurants), vs. o the county, when referring to geographic location (The county has 12 municipalities.) e-mail (hyphenated, in spite of what Microsoft Office says) handwashing (one word, noun and adjective, per State DENR materials) home page Internet nonprofit, preregister (and most words with prefixes do not use a hyphen) online Vice Chair (no hyphen) – lowercase, as with other titles, when not used before a name – e.g., “Vice Chair Joe Smith,” but “Smith, the vice chair” website, webcam – lowercase, compound word – but – o Web page, Web address – uppercase when “Web” is a separate word • • • • • • • • Other frequent-usage specifics: Time • • • Hour followed by a space and then “a.m.” or “p.m.” o Use only lowercase “a-period-m-period” or “p-period-m-period”; not 9am, 7 P.M. or 10 AM. Use only the numeral 1-12 and not “:00” for the hour if the time listed is at the beginning of the hour. Thus, “3 p.m.” is preferred. To show an event’s duration, use a hyphen, with no surrounding spaces; thus, “9 a.m.-1 p.m.” For 12:00, simply say “noon” or “midnight” – do not say “12 noon,” as there is no other number that can be associated with noon. For duration, use “noon-3 p.m.” or “9:30 a.m.-noon,” with no capitalization. Date • • Format is Wednesday, June 27, 2007, at 2 p.m. Commas after day of week, date and year, if text continues. No suffixes (st, nd, rd, th) with date. The only time suffixes would be appropriate is when the day is used before the month; for example, “…reports are due by the 3rd and the 17th of each month.” Phone numbers Hyphenate 10-digit phone numbers; do not use parentheses around area code or periods between number groupings. Example: 919-856-6160 Dollars Format for dollar amounts: no “.00” is necessary – instead of $375.00, say $375. Because you already have the word “dollar” designated by the dollar sign, don’t repeat the word “dollars” ($930 million, not $930 million dollars) Names When using initials instead of a first name, run the two together (actor B.J. Thomas, author J.R.R. Tolkien) Numerals Spell out numbers nine and under; use numerals for 10 and above. Exceptions to this rule are: • When the number starts a sentence (e.g., “Forty-one people visited the exhibit” – even here, though, try to reconstruct in such a way as to use a numeral, such as, “The exhibit hosted 41 people.”) • Ages and measurements (3-year-old, 7 inches of snow) Ages Hyphenate when used as a noun or adjective (a 52-year-old woman, a party for a 9-yearold). Hyphens are not needed for “the child was 5 years old.” 5.1 Punctuation 5.1.1 Placement with quotation marks End all sentences, headers, list items, etc. with a period or other suitable punctuation. Periods and commas always go inside quotation marks. Place question marks and exclamation marks inside quotation marks only when they are part of the quoted material (e.g., Have you watched “WakeGov TV”? vs. “What time is it?” she asked.) 5.1.2 Dashes and hyphens Use an “en-dash” instead of a double or single hyphen to set off independent or unrelated phrases and clauses. To place an en-dash in text, hold the ALT key and type 0150 on the numeric keypad. Include spaces before and after the dash. Avoid the use of hyphens, except when their omission would create ambiguity (e.g., “re-create” vs. “recreate”). 5.2 A-Z Style Topics Abbreviations and Acronyms • • • To avoid confusion, spell out an abbreviation or acronym in full or define it the first time you use it in the main body of the text. When you first use them, spell out the names of offices and programs, followed by the abbreviation in parentheses. Use a small s (no apostrophe) for plurals of most abbreviations (for example, ADATCs not ADATC’s). For plurals of units of measurement, omit the s (e.g., 15 cm, 5.5 MB, 125 KB). Addresses Use U.S. Postal Service abbreviations (such as CO for Colorado and DC for District of Columbia) for states only with full addresses, including ZIP code): Example: 337 S. Salisbury St. Raleigh, NC 27601 Assure, Ensure and Insure Assure means to guarantee. Ensure means to make certain. Insure means to obtain insurance. Examples: The manufacturer assured the group the equipment would work properly. Ensure the lid is fitted properly before starting the experiment. The laboratory must insure the new equipment before it can be used. Bullets There must be at least two items in a bulleted list. Make bulleted lists parallel in construction (that is, begin all the items in the list with the same part of speech.) . Make sure items are either all phrases or all complete sentences. Punctuate all items consistently. Begin each item with a capital letter; omit ending punctuation for all but the last item, unless all items are complete sentences. Chronological lists should be ordered with the most recent item first; that is, in reverse chronological order. Use numbered or lettered lists instead of bullets if you want to refer to items in a list or procedure elsewhere in the text. Compose and Comprise Composed of is correct; comprised of is incorrect. Examples: The United States is composed of 50 states. The parts constitute the whole. The whole comprises its parts. The department comprises four groups; each group is composed of five to seven scientists, technicians and support staff. Over and Under In cases involving quantity, use more than rather than over and fewer than or less than rather than under. Example: More than 500 people attended the conference, about 100 fewer than last year. Spaces Use only one space between a period and the beginning of the next sentence. Tables Avoid using tables unless it is necessary to display data or other information. Tables add a significant amount of code to the Web page, which slows down load time. Tables are also difficult to understand by users with visual impairments who need to use screen reader tools. Website and Web Website should be written as one word, lowercase, while Web page should be written as two, with Web capitalized. When publishing a website, omit the “http://” when “www.” is part of the address. Also omit “home.htm,” “default.htm” or “index.htm.” Examples: www.wakegov.com/about NOT http://www.wakegov.com/about/default.htm Which and That Standard American English uses which for nonrestrictive or nondefining phrases and clauses and that for restrictive or defining phrases and clauses. The word which usually signals the approach of added, nonessential information. When a phrase or clause is not essential to the meaning of a sentence, use the relative pronoun which and enclose the phrase or clause in commas. Example: This paper, which she has been working on for three weeks, discusses string theory. When a phrase or clause is essential to the meaning of a sentence (that is, the sentence would not make much sense without it), use the relative pronoun that and leave out the commas. Example: The paper that he completed recently will be presented in New York; the paper that he finished last summer will be presented in Philadelphia. World Wide Web To abbreviate World Wide Web, use “the Web” not “WWW.” Website is one word and not capitalized. Need help? For questions about what you learned in this course, visit the “help” section by clicking on “help”: Click on “Help” for online tutorials and support Web Support Team 919-856-7340 wwwadmin@co.wake.nc.us