Guidelines and
Minimum Standards for Pima County Websites

I.   Introduction

• Implementation
• Definitions and General Comments

II.  Accessibility

III. File Management

• Standards
• File Naming
• Domain Names
• Directories

IV. Coding

• Metadata
• Tags and Attributes

V.  Content

VI. Design

• Common Site Elements
• Templates and CSS
   
  • General
  • Fonts issues
  • Page backgrounds
  • Images
  • Other

VII.  Browser and Editing Software

• Editing Software
• Browser Support

VIII.  Copyright issues

IX. Maintenance

X.   Resources

• Professional organizations and courses
• Copyright
• Validation, Check Services, and Simulations
• Other Tools and Information

I. Introduction

Implementation.

The purpose of these standards and guidelines is to provide assistance to County web publishers who are creating efficient, professional documents and applications. It has often been stated, and is generally accepted, that presenting a consistent face to the public will help make County websites more usable across the board. For that reason, it's in our interest to find ways to make this effort work, although doing so shouldn't be cause for anxiety or impose unnecessary strains on resources.

Exact timelines, priorities, and strategies for implementing and overseeing these standards are being steered through mechanisms that exist outside the scope of this document. Suggestions, complaints and pleas for mitigation can be addressed to the Web Standards Committee or its representatives.

In general, all new web sites should be created using these standards and the provided templates. Existing sites that predate the publishing of these standards need be updated in a timely manner.

Definitions and General Comments

Standards indicate required practices.

Recommendations reflect good practices that, in some situations, may depend on developers exercising judgment.

County policy states that department heads are responsible for what appears on their department websites.

Practices that might compromise security should be avoided.

Templates are available to help make the design process easier for anyone creating web pages. Style sheets (CSS files) accompany the templates. In addition to being an aid to design, the style sheets are intended to be used as a complement to assistive technology. This means that pages should be formatted first using simple and appropriate HTML / XHTML. Any additional stylistic enhancements should be made with style sheets.

For example, use <blockquote> tags to indicate quotes and not as a way of making indents. Indents should be created using style sheets.

II. Accessibility

It is understood that the level of accessibility of some applications may be beyond the control of webmasters, and that these applications may be required in order to provide necessary services. However the recommended standard, Priority 1, is minimal, and for most purposes implementing it won't be a burden that outweighs its benefits.

Standards

Pima County web pages should conform to the Web Content Accessibility Guidelines 1.0 [Priority1 minimum ] which can be found in its entirety at http://www.w3.org/TR/WCAG/ . These guidelines explain how to make web content accessible to people with disabilities. The guidelines are intended for all web content developers (page authors and site designers) and for developers of authoring tools.

The primary goal of these guidelines is to promote accessibility. However, following them will also make web content more available to all users, whatever user agent they are using (e.g., desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.) or constraints they may be operating under (e.g., noisy surroundings, under- or over-illuminated rooms, in a hands-free environment, etc.). Following these guidelines will also help people find information on the web more quickly. These guidelines do not discourage content developers from using images, video, etc., but rather explain how to make multimedia content more accessible to a wide audience.

A QUICK TIPS list is available from the W3C Web Accessibility Initiative (WAI).

A CHECKLIST is also available.

Help can be found at Techniques for Web Content Accessibility Guidelines 1.0 , a gateway to a series of related documents providing accessibility techniques:

• Core Techniques
  http://www.w3.org/TR/WCAG10-CORE-TECHS/
• HTML Techniques
  http://www.w3.org/TR/WCAG10-HTML-TECHS/
• CSS Techniques
  http://www.w3.org/TR/WCAG10-CSS-TECHS/

For more information go to http://www.w3.org/ , and see also the resources listed at the end of this document.

Recommendations

• The federal government has developed accessibility standards under Section 508 (http://www.section508.gov/). These complement the W3C guidelines and may be useful to some County sites.
• Consider exceeding the Priority 1 standard.

III. File Management

General

Standards

• The county web master must be notified if a county sponsored site is created, moved, or deleted so that links to these new, moved or deleted sites can be updated on the main county portal page.
• Use file formats which are native to the web where possible or that are supported seamlessly. Provide plug-in information if needed.
• In situations where HTML is impractical to implement, PDF is preferred over files that require desktop applications such as Microsoft Word, Excel, Word Perfect, etc.
• Files that require Desktop applications should be used only when there's no suitable web compatible alternative. Clear explanations of their handling should be provided for the user.

Recommendations

• Every published folder should have an index.* or default.* file. If a folder lacks an index or default file, either rename the folder's main page, if appropriate, or create an index or default file that points to where a user should go.
• Don't include index file names in links.

------------

File Naming

Attention to file name hygiene can facilitate portability and compatibility between different systems. Concise naming also assists maintenance and makes for logical and easy to read URLs.

Do not drop file extensions.

Standards

• Do not use spaces or special characters (other than underscores) in file names.
• Do not use excessively long (more than 20 characters) or excessively short names.
• File names should begin with a letter.
• File names should accurately indicate file content.
• URLs may be case sensitive, and so case should be preserved.
  

Recommendations

• Follow the 8.3 rule (8 characters to name the file, a period, and 3 characters to identify the file type)
  (*.htm is preferred or use *.html, but be consistent).
• Use all lowercase.
• Underscores should be used sparingly since they can be hard to read in URLs.
• Avoid unprofessional sounding names.

Examples

Good
census02.htm
crimestat.gif
orgchart.jpg

Acceptable
propval_draft.htm

Bad
stuff.graphic
44 things.html
my BIG idea
pf.gif
thefilethatcameonadiskwitha&^%$mustardstainonitthatromanadvoratrelundargavemethursdayinthatmeetingwithsomebodyorother.doc

------------

Domain Names

It's seldom necessary to create new domain names for sites. Effective URLs can be devised that simply reflect both content and logical position within the pima.gov domain. There may be times, however, when it's desirable to have a special domain name for public relations purposes: on certain high profile issues, for instance. Careful thought should be given to choosing a name that's appropriate, concise, and meaningful.

When the temptation to carve out a new domain is too powerful to resist, please remember the following:

Standards

• When possible, end the name with pima.gov.
• Top Level Domain (TLD) suffix or extension: We're U.S. civilian government. In most cases, .gov will be preferred over .com, .edu, .org, .mil, .um, .ca or any other designation. We're not a "dot-com."
• Choose a name that's appropriate, concise, and meaningful. The main reason for creating a new domain is to make access easier for users. Avoid assigning names to your site that don't make sense, are cryptic, or are hard to remember.
• It's preferable to have one domain name for a group of similar or related sites rather than a separate domain for each site. For example, a series of highway construction projects could be grouped under www.roadprojects.pima.gov.

Recommendations

• Unless you're setting up a new server, avoid creating new domains if possible.

Examples

Good
www.roadprojects.pima.gov

Bad
www.asdfghjkl.com
www22.stafffilebeagle.animalspuppiesmemo.edu

------------

Directories

Standards

• Naming -- same as files (without extensions).
• Create only as many subdirectories as needed to help manage your web site and to make
  sense to the user. Too many directories make for long, cumbersome URLs. Too few directories result in too many files per directory and difficult maintenance.
• Preliminary source or development files for published material should not be stored in web space.
• If your application uses database files or other supporting files that the end user doesn't use directly, do not store them in web space. For instance, Microsoft Access .mdb files should not be kept in a web space directory with its corresponding application web pages.

Recommendations

• Naming -- same as files (without extensions).
• Local development folders:
   
  • Create one folder with everything related to a particular website (defined here categorically as a logically related, manageably sized grouping of web materials that can readily be understood as such by an average web designer).
  • Within the development folder, create a second, production folder that contains everything that gets published to the production server.
  • Within these two main directories create subdirectories as appropriate.
• Production folders:
   
  • Organize your working production folder in the same manner in which it will reside on the production server.
  • Create an "images" subdirectory for the site within the production directory to reduce redundancy and site size. The idea is that commonly used graphics don't need to be copied to more than one directory. More heavily used graphics should be stored closer to the root. Avoid referencing images from other servers. These principles apply to any commonly used resources and not just to images.

IV. Coding

Metadata

While the browser does not actually care who the author of a page is, having this information makes it easy for the webmaster to check on updates, make sure the file is up-to-date, and find the author of the page if more information is needed among other things.

This is also the area that search engines look for when they are out gathering data on the net. Use this area to your advantage and fill it with any key words or phrases that someone would type into a search engine to look for your page -- and to provide information for the results listing.

Standards

• Fill in the TITLE tag.

Recommendations

Include:

• Valid DOCTYPE declaration.
• Valid base language declaration.
• Appropriate Character Set declaration.

Consider also:

• Description
• Keywords
• Author
• Originator
• Date created
• Date modified

Examples

<title>...document title...</title>
<meta name="Description" content="...short description in English...">
<meta name="Keywords" content="...comma delimited keywords...">

<meta name="Author" content="...name of person responsible for page...">
<meta name="Originator" content="...full name of organization...">
<meta name="Date created" content="...ISO YYYY-MM-DD format...">
<meta name="Date modified" content="...ISO YYYY-MM-DD format...">


Sample Header

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<title>Privacy Statement: Pima County Government</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Privacy statement for Pima County government website." />
<meta name="keywords" content="privacy, privacy statement, Pima County privacy statement, legal" />
<meta name="author" content="gsd" />
<meta name="originator" content="Pima County" />
<meta name="date created" content="2003-08-08" />
<meta name="date modified" content="2003-25-12" />
<meta name="subject" content="Legal information about privacy for visitors to the Pima County website." />
<link href="legal.css" rel="stylesheet" type="text/css" />
</head>


------------

Tags and Attributes

Standards

• Use ALT tags only as text alternatives to images and not as expanded descriptions. Instead,
  use TITLE attributes for pop-up or "tool tip" supplements to objects.
• Label form elements with the label attribute.
• If you're hand coding, use HEIGHT and WIDTH attributes with images to speed page loading and to aid assistive technologies.
• Do not shrink images in your HTML editor. This wastes bandwidth and resampling is often poor. It's better to resize images in a graphics program prior to inserting them into your document

Recommendations

• Avoid the use of deprecated (outdated) or obsolete elements (W3C).
• Move to conform with XHTML (W3C).

------------

Other

Standard

• Use relative paths for internal links. For example, don't use a full URL like http://animals/mammals/dogs/boxer.htm when dogs/boxer.htm will suffice.
• Keep keyboard access in mind:
  http://www.w3.org/TR/WCAG10-HTML-TECHS/#link-accesskey
  http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-keyboard-access
• URLs may be case sensitive, and so case should be preserved.
• Debug, test, validate all pages, scripts, applications etc.

V. Content

Tone should be professional, helpful and to the point. Chatty verbiage, however warm and pleasant, should be kept to a minimum. Access to mission and vision statements can be provided by links to pages designed specifically to convey this information. These statements shouldn't be spelled out on home pages or pages intended for other purposes.

Standards

• Use plain language.
• Use correct spelling and grammar. Eliminate typos.
• Consider breaking lists longer than 3 items into a bulleted list.
• Avoid paragraphs longer than 5 or 6 lines. Shorter paragraphs are easier to read on screen.
• Avoid duplicating information.
• Limit page length and complexity where material can logically be broken down into more than one page.
• Exercise good taste. If you have doubts about what that means, get some assistance.
• Don't link to questionable sites. If you have doubts about what that means, get some assistance.
• Don't use unrequested sounds and motion.
• See Common Site Elements under VI. Design below.
• Avoid using "click here" in link text. The W3C writes: "Not only is this phrase device-dependent (it implies a pointing device) it says nothing about what is to be found if the link is followed. Instead of "click here", link text should indicate the nature of the link target..."

Recommendations

• Linking to a commercial site can provide a necessary function, like access to a plug-in for instance. But it can also imply an endorsement. Think twice. If you have doubts about what that means, get some assistance.

VI. Design

The pima.gov portal and all pima county web sites should all have the same look, feel and functionality. This can be achieved by using the pima.gov template pages and style sheet. Using consistent headers with graphic indentifying logos and navigational links will help the user know where he is at all times, how to get back to the main portal page, how to get to the home page of each particular area, and how to locate what he is looking for.

Common Site Elements

Basic elements are included with templates.

Standards

• Each county sponsored web site HOMEPAGE must include: 1) a link to the county home page 2) a graphic of the county seal 3) the date the site was last updated 4) a link to the county disclaimer and privacy statement 5) copyright notice
• Use the templates and style sheets that are posted on the Web Resources site or use them as a pattern or model to retro-fit existing pages.
• All pages should have a link to http://www.pima.gov/ in the upper right header.
• The department or page identity logo or text should always be in the upper left header. This logo or text should be a link back to the home page of that particular area.
• Include links to privacy statements and disclaimers at the bottom of each page as a footer, or on gateway pages to certain applications.
• Include department contact information at or near top level. Where it doesn't conflict with departmental policy, contact information should include e-mail addresses. (Images may be substituted for text e-mail addresses to avoid harvesting by spammers.)
• Include webmaster contact information.
• Include any credits or citations needed.
• Use the pima.gov templates format for your department home page and at least 2 levels down.

Recommendations

• Use the pima.gov templates format for all web pages.
• Include date last updated.
• Include copyright designation if copyright is asserted.
• For legal purposes, it may be advantageous to have pages stamped with codes indicating the current date and time. For example, if a page were to be copied by a user, the date and time when that occurred would appear on the copy.
• Text, tables, and included elements should be allowed to wrap when a user resizes a browser window.
• Generally, sizes should be specified as percentages rather than in absolute dimensions.
• Avoid the use of Splash Pages. Splash Pages are graphic intensive lead-in pages inserted before a home page.
• Do not allow sounds or animations to be deployed without a user's specific request.
• Do not use sound or graphic elements that are unnecessary to page content.

------------

Text

Standards

• Avoid substituting images for text. This is an accessibility issue as readers cannot read an image such as a button unless it has an alt tag. Also,images take up much more bandwidth than text does. However: images may be substituted for text e-mail addresses to avoid harvesting by spammers.
• All fonts and text size are specified in the pimagov.css style sheet - do not change them at the HTML level except for special applications or needs.
• Text Color
   
  • Legibility is the priority. Keep a high contrast between text and background.
  • Never use white or light color fonts - white or light text is hard to see and may not print properly. Make sure text color has high contrast with the background color of the page, table, cell, or graphic that it is on. Light text over a black or dark background is discouraged because some users may have images & backgrounds turned off, which makes the white text invisible. Also, white or light text may not show up when printed.
• Font Use
   
  • Keep text size large enough to be legible.
  • Use relative instead of absolute font size whenever possible.
  • Default fonts for the pima.gov web: Verdana, Arial, Helvetica, sans-serif font-family. If you decide to use different fonts on a page, you must be careful which fonts you use. Many people have only the standard fonts installed by the operating system. Generally, the following fonts are found on most systems.
  • Windows (95/98/2000/NT):
       - Arial
       - Verdana
       - Times
       - Times New Roman
  • Macintosh
       - Arial
       - Helvetica
       - Times

Recommendations

• Do not use underlined text unless it is a link. Underlined text has become an unwritten standard on the WWW meaning the text has a link. Underlining non-linked text creates an ambiguity for the user. You can distinguish text by using bold (strong), one of the special emphasis colors, italics (em), or CAPS.
• Text Color
   
  • Legibility is the priority. Keep a high contrast between text and background.
  • Acceptable text colors:
    

    Text and Headers - Black - #000000

    Text and Headers - Dark Red - #330000

    Special Emphasis - Green - #336633

    Special Emphasis - Olive - #666600

    Special Emphasis - Orange - #FF6633

    Special Emphasis - Brown- #663333

    Special Emphasis - Dark Red-#990000

    Special Emphasis - Gray- #666666

     

    Text with navigation functions has these colors set up in pimagov.css:
    

    Link - Brown -#663300

    Visited Link - Light Brown - #996600

    Active Link - Red - #EE0000

    Link - Hover - Blue - #0033FF

------------

Page, Table, and Cell Backgrounds

Recommendations

• To keep a consistent look among all pima.gov pages, use a plain white background (#FFFFFF). The use of a white background makes the header sit better on the page, it makes text easier to read, and is more appealing to the eye than a graphic or a bright color. If you need to use a background color for a table, or cell, remember to keep it light in value to maintain a high contrast between the background and the text. Legibility is the priority. Light text over a black or dark background is discouraged because some users may have images & backgrounds turned off, which makes the white text invisible. Also, white or light text may not show up when printed.
• Generally, any color that does not detract from a page, is OK to use. To maintain some consistency between pages, we have devised a color-scheme using the basic Pima.gov colors.
• Use of background images is strongly discouraged as they tend to distract and make text hard to read.

------------

Colors

Recommendations

These colors may be used as background table or cell colors.When applying colors, try to harmonize with the overall look and content of the page. Note that the color names are only given as an aid. When authoring pages, use the hexadecimal color codes.

------------

Graphics

Keep bandwidth usage low. Pages should be suitable for dial-up connections.

Standards

• All graphics should be in standard web native GIF, JPEG, or PNG formats. Make sure they are RGB or index color.
• All graphics should be at a resolution of 72 pixels per inch (ppi).
• All graphics should be sized to the the width and height that they will appear on the page. Do not shrink images on your page. This wastes bandwidth and resampling is often poor. It's better to resize images in a graphics program prior to inserting them into your document
• If you're hand coding, use HEIGHT and WIDTH attributes with images to speed page loading and to aid assistive technologies.
• Use the ALT attribute. If the graphic doesn't convey information, use ALT with empty quotes.
• Where color is key to understanding the graphic, use value contrast, supporting text or other alternative.
• Optimize PDF files for download display (recent versions of Distiller offer an eBook set of job options which is convenient for those who don't want to tinker with settings).

Recommendations

• Use of animated graphics should be avoided. If used, viewers should be provided with a way to control the rate at which things blink or flash on the screen.

VII. Browser and Editing Software

Browser Support

Standards

• A website's top levels should be readable and functional in all commonly used browsers. In other words, no matter how degraded a home page may appear in some browsers, all of the essential information should be present as intelligible text and links.
• Identify for users any special applications and the level of browser required for functionality. For the majority of pages, we don't expect to be too concerned with browsers prior to IE 5.0 and Netscape 6.0. See the recommendations below in this section.
• Pages using Cascading Style Sheets (CSS) must still be readable with or without this technology enabled.
• Avoid frames at top levels of a site or use a noframes alternative.
• If third party plug-ins are needed on a page - provide links to appropriate software providers.

Recommendations

• Where possible, pages using scripting technologies such as JavaScript should work with or without these technologies enabled.

------------

Editing Software

Macromedia Dreamweaver and Contribute are the recommended web authoring packages and the only ones that will be supported internally by the County. Pages can also be modified using Notepad or any text or HTML editor, but you run the risk of losing some of the formatting and coding that is wrapped into the template pages and style sheets.

VIII. Copyright issues

Copyright applies to the web.

Pima County owns the copyright and trademark rights of material generated for official County sites. Assertion of those rights is not required in all cases.

When in doubt, check with County policies and procedures or with one of the attorneys.

Standards

• Get permission of copyright holder before posting anything on the web.
• Include citations.

Recommendations

• Include on pages where appropriate:
  © 20XX Pima County. All contents copyrighted. All rights reserved.

IX. Maintenance

Standards

• If a site (domain) home page or a major section's URL is changed, retain the URL with a notice or automatic redirect to the new location. If there are higher level pages such as the County home page that link to a changed page, notify the webmaster(s) of the change and relate the new address.
• If a folder or commonly used page is removed, replace it with a pointer to a suggested location.
• Information must be:
   
    - timely
    - up-to-date
    - accurate
    - relevant
   
• Develop a housekeeping strategy for dealing with old files.
• Weed out bad links.

X. Resources

Professional Organizations and Courses

World Wide Web Consortium
http://www.w3c.org/

The HTML Writers Guild
http://www.hwg.org/

International Webmasters Association
http://www.iwanet.org/

Copyright

Copyright Basics -- from the U.S. Copyright Office
http://www.copyright.gov/circs/circ1.html

Stanford University Libraries Copyright and Fair Use -- has lots of links
http://fairuse.stanford.edu/

Validation, Check Services, and Simulations

HTML

W3C MarkUp Validation Service
http://validator.w3.org/

Web Design Group HTML Validator
http://www.htmlhelp.com/tools/validator/

 

CSS

W3C CSS Validation Service
http://jigsaw.w3.org/css-validator/

Web Design Group CSSCheck
http://www.htmlhelp.com/tools/csscheck/

 

Accessibility

Bobby Online Free Portal -- helps repair barriers to accessibility
http://bobby.watchfire.com/bobby/html/en/index.jsp

Vischeck -- how things look to someone who is color blind
http://www.vischeck.com/

LynxView -- simulates how your page would be viewed in Lynx and gives an indication of how your page would look when linearized
http://www.delorie.com/web/lynxview.html

Screen Reader Simulation (requires Shockwave)
http://www.webaim.org/simulations/screenreader

 

Search Engine Accessibility

Search Engine World Tools -- includes Sim Spider
http://www.searchengineworld.com/misc/tools.htm

 

Usability and Accesssibility

Lift
http://www.usablenet.com/

 

Other Tools and Information

Accessibility for Common Products

Microsoft Accessibility
http://www.microsoft.com/enable/

Macromedia Accessibility
http://www.macromedia.com/macromedia/accessibility/

Access Adobe
http://access.adobe.com/

IBM Accessibility Center
http://www-3.ibm.com/able/

 

Color

Effective Color Contrast
http://www.lighthouse.org/color_contrast.htm

 

Section 508

Federal Government Site
http://www.section508.gov/

 

 University of Arizona

UA Web Resources
http://uaweb.arizona.edu/

Other

A List Apart: For People Who Make Websites
http://www.alistapart.com/stories/

Webmonkey: The Web Developer's Resource
http://hotwired.lycos.com/webmonkey/

 

Privacy Statement / Disclaimer