City of Durham Website Guidelines

When writing and designing for an online audience, it is important to keep in mind that people tend to read words differently on a screen than they do in print. It is also important to remember who your audience is and what they are looking for on your website. The following best practice guide for website content and layout was created using some of the foremost authorities in website usability as references.
 

Note: 

Some of the website content style below differs from the Associated Press Style Book. When writing for the City’s website, this is the only time it is acceptable to deviate from the Associated Press Style Book.

Capitalization

•    Do not use all caps to emphasize an important point. Capitalizing all the letters in a word has actually been found to decrease a reader’s ability to quickly discern what the word is. If you need to emphasize a piece of content, use bolding instead.

Numerals and Percentages

•    Write all numbers as figures so that users scanning for measurements, limits, data, etc., can easily find them. For example: “Please submit 3 copies of the form,” not “please submit three copies of the form.”
•    Spell out numbers that don’t represent specific facts or items being counted. For example, “Manhattan is one of the best cities in Kansas.”
•    The percent symbol (%) should be used instead of the word “percent” in all content for easy readability.

Grammar and Tone

•    Content copy should be grammatically correct and written in clear, concise sentences.
•    The average U.S. citizen reads best at an 8th or 9th grade level, so consider simplifying your content. You can use the Flesch-Kincaid reader in Microsoft Word to determine the current level of difficulty of any piece of content.
•    Avoid using multiple punctuation marks in a row, such as “Wow!” instead of “Wow!!!!” or “What?” instead of “What???” Exclamation points should be used sparingly.
•    Know your audience. Some content is meant to engage. Some content is meant to inform or educate. Some content has to simply direct users to contact a staff member. Not all content is intended to do everything, and that is OK. Make sure that you are keeping your audience and the purpose of the content in mind when either writing or formatting content for the website.
•    It is acceptable to write in a more conversational tone when writing for the web. However, slang and jargon should still be avoided.
•    Avoid writing in the passive voice. The active voice is more engaging and direct. Example: “Action on the agenda item is being considered by the Council” is passive voice. “The council is considering action on the agenda item” is active voice.
•    Do not use run-on or fragment sentences.
•    Be consistent with your sentence tense throughout the entire page.

Contact Information Standards

8 a.m. to 5:30 p.m.

Phone:

xxx-xxx-xxxx

Fax:

xxx-xxx-xxxx

Street Modifiers

: Spell out all street modifiers (Street, Avenue, Boulevard, Road, Highway, etc.). Abbreviate all compass points in address blocks (N, E, S, W, NE, NW, SE, and SW – no periods on any of them). Include any secondary address information on the next line (Apartment, Suite, Unit, etc.) when using address blocks.

Street Numbers:

Use figures for 1st Street, 2nd Street, etc.

Addresses Within Text

•    There is no break between a lead-in sentence or subhead and the address block below it. Use an address block when an address is listed within page content.
•    If the address has a P.O. Box but the same zip code as the physical address, the P.O. Box info can be listed on the second line of the address.
•    If you have a separate physical and mailing address, list the physical address first in a separate block from the mailing address to enable users to easily highlight and search for directions.
•    Room, floor, suite, etc. is listed out on the second line of an address block. If there is also a P.O. Box in the address, the floor, suite, etc., would still be listed above the P.O. Box.
•    Use figures for numbered streets such as 1st Street.

Headings and Page Titles

•    Page titles should be clear and concise and accurately describe the content found on the page. Ex: “Content Policy Documents” is much clearer than just “Documents.”
•    Headings should be used to break up content and provide the user guidance as to what information is in the text below it.
•    Headings should be clear and concise – describing what information can be found in the text beneath it.
•    Headings and page titles should use the ampersand (&) to save space.
•    Headings should be created with title case.
•    When formatting a heading, the CSS styles Subhead 1 and Subhead 2 are used to show the hierarchy of information on the page – they are not just decorative elements. You should only use Subhead 2 to separate information that is related to the Subhead 1 topic. Subhead 2 should always follow a Subhead 1.

Links

•    Use mailto: links on text instead of writing out the provided email address to prevent site crawlers and spy bots from obtaining contact information. Mailto: links should be labeled in a way that makes it clear to users that by clicking the link, they will be lead to email someone. For example, “To learn more about the ABC Policy, email the City Council.”
•    A similar format should be followed when linking to URLs. Don’t write out the URL in the text as it is often difficult to read and decipher where that link is going. Instead, link the title of the website, web page, etc. When choosing text or writing text to link to, the link should be intuitively named – they don’t necessarily have to be verbatim page titles. (See above example.)
•    All links to documents should open in a new window.
•    All links to other pages within the same website or links to external URLs should open in the same window to allow users to utilize browser tools throughout their web experience.
•    Avoid using terms like “click here” as they don’t indicate to the user where the link is going to take them. They also hinder the usability of the site for someone using a screen reader. Instead, link to words that indicate what is found at the link. (Ex: Instead of “to view the training document, click here” try “View the training document.”)
•    Don’t replicate content, use links instead. You can link to content within the site on the same topic to avoid having to duplicate any content
•    Be the authority when you can, but don’t create content you are not the authority on. Want to educate residents on disaster relief and emergency management using the same tools that FEMA uses? Great! Link to the FEMA website, don’t replicate their information. This will allow your residents to easily access information directly from the authority on the topic and keep you from having to update content. (See also: Linking)

Tables

•    Do not use tables to space content or pictures on the page. To be ADA compliant, all columns must have headings.
•    If the information you are displaying in a table doesn’t consistently fit under the headers for that table, that information should not be displayed in a table.
•    Tables should display using the “Alternate Rows” color setting (auto-table class setting).

Images

• Images used on the site should enhance the content on the page. Images inside the content area should be no wider than 300 px.
• For more than three images per page, consider using a slideshow instead of stagnant images.
• If there are a large number of photos for a page, or if users would benefit from being able to slowly look at them, place pictures in the Photo Gallery instead of on the page or in a slideshow
• Images require a descriptive alt text for users with screen readers. File names and single words do not make usable alt text entries. Try “black and white police cruiser with lights on” instead of “cop car,” or “young girl participating in recreation program” instead of “little girl.” If an image contains both an image and a caption/marketing message (e.g., an image of a child swimming with the text “Sign Up for Summer Swimming!”), only the text needs to be represented in the alt text. If an image contains actual data like a chart or graph, the alt should specify this so that screen reader users can find assistance (e.g., “Graph of Average Temperatures” or “Diagram of a typical water bill with detailed explanations”).

Bulleted Lists

•    Long lists within text should be broken out into bulleted lists so that they can be easily scanned.
•    Alphabetize list items with fewer than three words.
•    Avoid overuse of bullets.
•    The first letter of each item in a bulleted list should be capitalized.
•    There should be no space above bulleted lists.
•    There should be a break between the bottom of a bulleted list and the next text.
•    Bullets should go, at the most, two levels deep.
•    Do not mix sentence fragments and full sentences in one bulleted list. For consistency, all bullets in each bulleted list should contain the same format (and verb tense).

Breaking Up Content

•    Content should be broken up into small, easily readable chunks. As a general rule, the text beneath each header should not contain more than two or three short paragraphs and each short paragraph should not contain more than three or five sentences.
•    Subheads encourage users to keep scrolling to find information, so make sure that each new topic has a header. (See also: Headings and Page Titles)
•    Completely separate topics should be housed on separate pages. While users will scroll longer pages to scan similar information, it can be very frustrating to scroll through information of completely unrelated topics, so that information should be housed separately.

When to use PDFs

•    Convert any Word or Excel files to PDF so that any user can access the information. Adobe Acrobat is a free download that any user can obtain to read documents, while other file types, such as Microsoft Word, require purchased software to access.
•    Open all PDF files in a new window.
•    Indicate links that go to PDF files by including (PDF) behind the file name as a part of the link.

Boards and Commissions

•    The use of “Boards & Commissions” template page is recommended and is located in the Content Library for displaying information about a board, commission, or committee.
•    If the information for boards, commissions, or committees does not fit into the template provided in the Content Library, be as consistent as possible when displaying this information by:
     » Displaying information in the same order from board to board.
     » Including all pertinent information about how to join or who to contact.
     » Linking to any applicable documents such as agendas and minutes on the board page.

Pages Widget

The pages widget is used to create menu pages that display a listing of the subpages for a parent page and their page descriptions. These pages help provide structure and organization to the navigation. They can also be used in conjunction with other content to make a more robust landing page. However, it is not recommended this be the only content on a main department landing page. Instead, feature relevant and actionable content whenever possible.

•    Use the Pages Widget in the content area to create main landing / navigational pages.
•    Most landing / navigational pages should use Format 2 (Depth 1) for displaying links and page descriptions.
•    Format 3 (Depth 2) should be used for bucketed landing/navigational pages such as How Do I or Help Center.
•    Format 3 (Depth 1) should be used in lieu of repetitive page descriptions.
•    A Pages Widget may be used on a page with another content widget.

Menu and Navigation

•    Mega menus should be used instead of drop-down menus as mega menus are easier to physically navigate than the typical “tree branch” structure of drop-down menus.
•    Two-tier mega menus should be used to allow the user to see deeper into the navigation without having to click into something that may or may not take them where they want to go.
•    Mega menus should be built out as evenly and thoroughly as possible. A mega menu with only two items in it is not highly usable.
•    Menu items and navigation throughout the site should be listed in alphabetical order to make information easier to find.

Font Styles

•    Underlining should only be used for hyperlinks. Underlining for emphasis can confuse users who might think they can click on that area of the screen.
•    Avoid using all caps for anything but acronyms. If you need to emphasize something, use bold instead. Using all caps can make the words more difficult to read.
•    Only use Subhead1 and Subhead2 font on subheads
•    If moving information from another source, make sure to paste all items in plain text by using the tool in the Editor widget. This will clear any formatting or text class information from the previous source that may be left on the text.

Page Descriptions

•    Page descriptions should be completed for every page. This will help search engines to better determine what pages to bring up as the results for a search. They also help guide users to the correct information by providing better details on what can be found on any page.
•    Page descriptions should accurately describe the content on the page, including any major topics that are covered.
•    Page descriptions are displayed below page titles when using the pages widget.

Documents

•    All documents should include extension in parenthesis behind the title to warn users that the are opening a PDF document, not a web page.

Agenda Center

•    The Agenda Center should be used to house agendas and complimenting minutes and packets. They should be in order by the document date, starting with the most recent.

Archive Center

•    The Archive Center should house: Items such as newsletters, police reports, press releases, etc. that are frequently published and should be sorted by date and documents that are updated frequently, such as budgets, financial reports, etc.

Document Center

•    The Document Center should house all other supporting documents. All documents in the Document Center should be named with the document title or other name that clearly states what the document is.

Form Center

The following types of forms work best in the Form Center:

•    Contact Us forms or other simple requests.
•    Forms consisting of mostly short answer, multiple choice, or long answer questions.
•    Forms that can be emailed to a particular person or accessed by a particular person for processing.
•    Forms that don’t require an official signature or notary. The following types of forms don’t work as well in the Form Center:
     » Forms containing a lot of text based instructions or introductions. » Forms that require attachments that the client has indicated cannot be copies.
     » Forms that require an official signature or notary.
•    The Form Center is not a secured way of collecting information, meaning that the security of the information after being collected through the Form Center cannot be guaranteed. As such, the City does not develop forms that contain specific kinds of identifying information and does not recommend creating such forms via the Form Center. It is recommended that any form with potentially identifying information remain as is or be turned into a PDF that must be printed and mailed or brought in for submission.
•    Identifying information includes:
•    Social Security numbers
•    Driver’s license numbers
•    Tax ID numbers
•    W2 or other tax documentation or information
•    Birth certificate copies
•    Account numbers

Facilities

The Facilities module best houses the following types of information:
           » Parks
           » Rentable City/County facilities
           » Trails
           » Pools
           » Community centers and meeting places

•  All facility amenities should be populated as “features” within the Facilities module. If the amenities are not populated within the features section in the Facilities module, residents will be unable to correctly use reservations and will be unable to search or filter for facilities by amenity.
•  Use a specific address and the map location feature whenever possible.
•   Format information in the editor box within the Facilities module just as you would with page content.
•  The use of the Facilities module to house business information is not recommended. The Resource Directory is designed to display information about local businesses.

FAQs

•   Each department is encouraged to provide residents with answers to a useful set of FAQs.
•   If there are more FAQs than can practically be displayed within the module widget on a page, link a subpage directly to that FAQs category so that all the FAQs can be quickly and easily found.
•     FAQs should be formatted in a way that makes the answer immediately clear, but is not too abrupt. For example:
  Q: Can I pay my bill online?

  
  Poor Answer

  : Yes.

  
  Poor Answer

  : The system allows for online payments at any time

  
  Best Answer

  : Yes. Please visit our E-Pay module to make a payment online.

Quick Links

Category titles should be intuitively named using titles that make sense on their own and out of the   context of any surrounding text, because they may be viewed from the main Quick Link module landing page and will need to make sense standing on their own.
Quick links should be intuitively named. Ask these questions:
         » Does the name of the link make sense out of context?
         » Is it clear where this link is going to take a resident?
    Link titles should be in title case.