Click here to skip to main content.
scenic picture from Washington state
RESEARCH TOOLS › SAMPLE DOCS › GOV DOCS › City of Bellevue Web Guidelines
 
City of Bellevue Web Guidelines

Sample Only

CITY OF BELLEVUE
WEB CONTENT GUIDELINES
Version 3 January 15, 2002

The purpose of the City of Bellevue Web site is to provide 24-hour access to electronically-based information, to focus service delivery on customer needs, and to make direct community involvement easier. Relevant, accurate and useful information on easily navigated pages will guarantee a quality site that exemplifies Bellevue's core value of exceptional public service.

POLICY

I. Content subject matter

· All content on the city Web site will be:

    _ sponsored or co-sponsored by the city, or;

    _ directly linked to the city's pursuit of policy or departmental activities.

    Example: Announcement of WSDOT meetings on transportation projects on freeways serving Bellevue.

· Content will accurately reflect City Council and city management policy positions. Political advocacy by individuals or interest groups, including current and former elected city officials, is not appropriate material for the City of Bellevue Web site.

II. Web site integrity

· There will be only one official City of Bellevue Internet site.

· The city's Internet site will have a consistent look and feel from page to page and dept to dept, allowing each dept room for limited creativity by following the guidelines and standards established by in these content guidelines. The Web Governance Group has authority interpret the guidelines if questions arise.

· Each department home page, at the least, will include an e-mail address for contacting that department.

· The city logo is easily recognizable. It is complete by itself. The basic elements of the logo are always constant: color, shape. No other elements may be added to the logo.

· Use of the city seal is restricted to city-sponsored or city-contracted pages.

· FrontPage is the city-standard software for content creation for any pages that cannot be managed through the remote administrator system.

III. Technical and Organizational Policies

· Navigation Links

  • Left-side links will be limited to 22 characters, otherwise they will double over

  • No more than 10 third-level links should be located under a second level (section level) page navigation listing, otherwise the left-side navigation will require scrolling.

  • Navigation links leading to "under construction" pages are not allowed. Links will always lead to content.

IV. Technical and Organizational Policies (continued)

· Photos and graphics

  • Most photos and graphics will be no more than 30KB in size to facilitate fast loading

  • Larger photos, maps and graphics can be used by exception with a special template. These materials should be in the lower levels of the site and accessed by users looking for that specific information (who are also willing to wait for it to load).

  • Photo credits should be placed at the bottom of the text.

· Tips for successful placement of images in the templates

  • Try to keep images to a width of 180 pixels. Be sure to give those images about 10 pixels of white space on the side (left or right) adjacent to the text. (As a reference, the pictures of the mainpages of the site are a width of 130 and a height of 180 (130 x 180) and include 10 pixels of white space.)

  • Graphics should be web ready.

  • The current file size limit for images is 30K.

  • Graphics should be saved in jpeg or gif format.

  • Jpeg's are usually smaller files as they are compressed.

· Photo and Image File Naming Convention

  • three letters for the department

  • image name (unlimited length, but should be short as possible)

  • date uploaded in six characters

  • add a "p" if the photo was shot by a professional photographer and needs a photo credit

Example 1: tra_traffic148th_102201p

This photo belongs to the transportation department. It is a picture of traffic on 148th Avenue. It was uploaded on Oct. 22, 2001 and was shot by a professional photographer.

Example 2: par_robinswoodplayarea1_011502

This photo belongs to the parks & community services department. It is number one of several photos of the Robinswood Park play area. It was uploaded on Jan. 15, 2002 and was not shot by a professional photographer and needs no photo credit.

· Bookmarks

1) Highlight text, click on the link button. In the pop up window, take

out the http:// and type in

#nameofthebookmark and then click O.K.

2) Click on edit html and navigate to section that you want the bookmark to

go to and then type in <a name="nameofthebookmark"></a>

· Alias Address Naming Convention

  • In the interest of providing user-friendly Web addresses for print and other promotional materials, "alias" page names may be created that will link to the actual page:

www.cityofbellevue.org/v.asp?n=whateveryouwant

  • Notify the City PIO (Ron Langley) before you use it to make sure no one else is using it and to have it added to the alias database (so the computer knows to match your alias name with the real address for the page).

Adding blue arrows in content arrow tables

To properly edit blue arrows in content arrow tables do the following:

    1.) Click on the "Edit Html" checkbox so that it has a checkmark in the box. By doing this, you are now in HTML mode and have the ability to modify the html code.

    2.) Locate the table in the html code.

        i. Here is an example of a content arrow table. As you can see the table begins with a <TABLE> tag and ends with a </TABLE>. A new row in the table is indicated by a <TR> tag and the end of that row is indicated by </TR>. The <TD> tags are where content is placed in and is closed by </TD>. Highlighted in RED is an html row.

        <TABLE cellSpacing=0 cellPadding=0 border=0>
        <TBODY>
        <TR>
        <TD vAlign=top align=left><A href="http://cob.bisc.com/page.asp?view=996"><IMG src="http://cob.bisc.com/img/blue_arrow.gif" border=0></A></TD>
        <TD>Visitor Information Offices</TD></TR>
        <TR>
        <TD vAlign=top align=left><A href="http://cob.bisc.com/page.asp?view=970"><IMG src="http://cob.bisc.com/img/blue_arrow.gif" border=0></A></TD>
        <TD>City Hall Campus/Administration</TD></TR>
        </TBODY></TABLE>

    3.) Copy a table row (use "control-c" on the keyboard rather than the buttons) and place it after </TR> and/or before <TR> tag like so (using "control-v" on the keyboard). The green row indicates the copied-and-pasted text:

        i. <TABLE cellSpacing=0 cellPadding=0 border=0>
        <TBODY>
        <TR>
        <TD vAlign=top align=left><A href="http://cob.bisc.com/page.asp?view=996"><IMG src="http://cob.bisc.com/img/blue_arrow.gif" border=0></A></TD>
        <TD>Visitor Information Offices</TD></TR>

        <TR>
        <TD vAlign=top align=left><A href="http://cob.bisc.com/page.asp?view=996"><IMG src="http://cob.bisc.com/img/blue_arrow.gif" border=0></A></TD>
        <TD>Visitor Information Offices</TD></TR>
        <TR>
        <TD vAlign=top align=left><A href="http://cob.bisc.com/page.asp?view=970"><IMG src="http://cob.bisc.com/img/blue_arrow.gif" border=0></A></TD>
        <TD>City Hall Campus/Administration</TD></TR>
        </TBODY></TABLE>

    4.) Uncheck the "Edit HTML" checkbox

    5.) Replace the text of the newly created row with the new text. If the new text contains a link, highlight the text and use the internal links section to build your new link.

V. Linking Policy

· To be determined by the Web Governance Group

VI. Redirects and External Domain Names

1. All City of Bellevue departments and services should be accessed via the official city web site URL, which is:

http://www.cityofbellevue.org/

The former address - http://www.ci.bellevue.wa.us/ -- still functions and does not have to be removed or changed on existing print documents. However, http://www.cityofbellevue.org/ should be used on new documents or reprints of old documents.

For purposes of printing web addresses that refer customers to department main pages, departments may request a "redirect" address which creates a user-friendly address that simplifies user access to the page. For example:

www.cityofbellevue.org/utilities.asp

www.cityofbellevue.org/transportation.asp

Departments may also request a redirect address to send a user to a specific web page for assistance or information about a specific city service. For example:

http://www.cityofbellevue.org/businessrecycling

http://www.cityofbellevue.org/constructionupdate

2. External URLs

Generally, the Web Governance Group will not entertain requests for an external URL/domain name for items on the city web site. Possible exceptions can be brought to the Web Governance Group on a case-by-case basis.

CONTENT STYLE AND PRESENTATION

I. In General

· Refer to the AP (Associated Press) Stylebook for questions of writing style, punctuation and word usage.

· Specific Bellevue style issues:

  • The word "city" is capitalized only when used in the proper name "City of Bellevue." All other references to the city should be lower case unless the word is begins a sentence or title, or is used in the formal title of a document.

  • We use "web site" (lower case, separated). This is not AP style, but AP style is inconsistent with the previous example, which is also AP style. Go figure.

· Put usability first.

· Write at least 50% less than you would in writing for print.

· Visitors to a site should always know where they are, where they've been, and where they can go.

(Research has shown that short content and easy navigation can double the effectiveness of a Web site)

II. Design Style requirements

· PAGE TITLES SHOULD BE IN ALL-CAPS

· Sub-headlines should be AP style - that is, first word capitalized but other words not capitalized unless they are part of a proper noun such as a name of a person, place or organization.

· Always provide a space between a text block and a photo or graphic

· Black, Arial 10 pt. Font only

III. Accessibility (Americans with Disabilities Act Requirements)

Why do we design for persons with disabilities?

    · They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.

    · They may have difficulty reading or comprehending text.

    · They may not have or be able to use a keyboard or mouse.

    · They may have a text-only screen, a small screen, or a slow Internet connection.

    · They may not speak or understand fluently the language in which the document is written.

    · They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.).

    · They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

Our clean, simplified design will assist with many of these disabilities. We will strive to meet these guidelines as we develop and maintain the City of Bellevue Web site:

· Avoid long tables - they can be difficult to read with a text reader because a blind user can lose orientation on the table because he/she can't see the gridlines.

· All PDF documents will have "(.pdf)" within the hyperlink description.

· All graphical images have an "Alt tab" with a short description of that graphic image

· Photographs/graphics that contribute to the content of the page will have a selectable hyperlink to a description of the photograph/graphic.

· Text links will use words that indicate the content of the link rather than `click here' or similar description

· Provide an alternate mechanism for on-line forms - such as phone number or e-mail address for assistance.

· The "contact us" page will provide a phone number or e-mail address for obtaining the requested information at the top of the page to provide easy access to a text reader. (we need to test this design)

III. Scanability (Skimming) -- 79% of users scan content rather than read it.

    · Use multiple levels of headings and subheads.

    _ No deeper than 3 levels

    _ Make sure the heads clearly indicate the content of the sections. (Use meaningful headlines that can stand on their own.)

    · Use bulleted lists whenever possible. (They slow down the scanning eye and draw attention.)

    _ Limit number of items to 9 or less.

    _ Limit lists to no more than 2 levels.

    · Use numbered lists when the sequence of entries is important.

    · Use the inverted pyramid style, starting with the conclusion and followed by details and background info.

    · Emphasize words with bold type to catch attention.

    · Highlight key words but not entire sentences or long phrases. (Eye only picks up 2 or 3 at a time)

    · List one main idea per paragraph; users skip second points as they scan.

    · Keep important info "above the fold." Make sure the info and links that all readers of a page need are visible without scrolling when a page is first viewed.

IV. Readability -- Reading from a computer screen is 25% slower than reading from paper.

    · Create a strong, consistent, visual hierarchy; emphasize important elements; organize content logically.

    · Use white space.

    · Keep it short.

    · Use an informal and personal style of writing.

    · Write in the active voice.

    · Use simple sentence structure.

    · Always try to write in complete sentences.

    · Beware of graphic embellishments; use horizontal rules, graphic bullets, & icons sparingly, if at all.

    · Use images only where they complement, enhance, or describe the textual content.

    · Use screen captures.

    · Use bookmarks for long documents.

V. Credibility

    · Use objective language (neutral rather than subjective, boastful, or exaggerated); users detest marketing fluff or overly hyped language (marketese) and prefer factual, objective information.

    · Content is king: quality and relevance of content score more points than easy navigation.

    · Use humor with caution.

    · Hyperlinks leading to more detailed information create and help users assess credibility.

    · Keep pages up to date.

    · Strive for well-written content (including correct grammar, usage, punctuation, and consistency).

    · Spell check.

    · Don't use "under construction" pages; a Web site is always under construction.

    · Consider information in the context of city and department mission & responsibilities as well as public disclosure laws.

VI. Linking

    · Don't use a hyperlink if the info can be briefly presented on the page.

    · Write links that don't have to be followed; provide a one-sentence description of the hyperlink so users can decide whether they want to go there.

    · Only the most pertinent links should be part of the document.

    _ Position less relevant (minor, illustrative, parenthetic, footnote) links at the bottom where they are available but not distracting.

    · Don't say you are linking; use a description of the information to be found in the link and place the link anchor on the most relevant word. Avoid "click here," "follow this link," and this Web site."

    · Think of linking as the quickest means to get the user to the most relevant information.

    _ State conclusions and link to supporting details.

    _ Enumerate categories and link to lists.

    _ Summarize and link to full-length treatments.

    · If the link takes the user outside the document, make sure it is to guide the user to additional info that is directly connected to paragraph or section being read.

    · Try not to wrap text links across multiple lines; users can't tell if it's one continuous link or separate links.

General Tips for Effective Web Writing

    · More than half of Web users rely on search engines to navigate pages; list the most important terms in a keywords metatag.

    · Use hyperlinks to provide supplemental info (def. of terms & abbrev., reference, background info)

    · Only use PDF for distributing documents that are long, complicated, might be printed, and are specifically sought by the user. Warn the reader by noting that the link is a PDF by including (.pdf) in the link

    · Do not begin a title with a generic term or an article. Make the first word an important, information-carrying one, resulting in a better position in alphabetized lists; this facilitates scanning.

    · Give different titles to different pages.

    · Skip leading articles (a, an, the) in page titles since lists are often alphabetized, but include them in headlines that are embedded within a page for readability.

Two methods for effective Web writing . . .

    · Top Down methodology: (Nathan Wallace)

      1. Create the major headings/sections

      2. Write down the minor points for each section, ordering them appropriately.

      3. Put relevant links next to their corresponding point.

      4. Work through the article in order, turning each minor point into a paragraph.

      5. Boldface the minor points.

      6. Write a one-sentence summary of the article.

      7. Use that sentence to start a one-paragraph summary.

      8. Shorten the one-sentence summary into a short informative title.

      Then work back up through the article, checking that jargon is consistent, minor points are clear, and headings are useful.

    · Levels of reader interest (A Web page that caters to each level of reader interest, but avoids attracting the "no interest" users, will result in more satisfied visitors.)

      1. no interest

      2. title only

      3. one-sentence summary

      4. one-paragraph summary

      5. major points

      6. minor points

      7. detailed interest

      8. thirst for more information

      Test your writing for readability at each interest level.