This document defines and explains the standards used and recommended by the Office of Creative Services and Marketing Communications (CS) at Duke University Health System (DUHS) to design, edit, and build Web sites.
Table of contents loading...
| Version | Description | Author(s) | Date/Time |
|---|---|---|---|
| 1.0 | Creation | Bart Hubbard | 06/30/05 |
At a minimum, sites should display correctly in:
Sites will be styled using well-structured XHTML and CSS, allowing older browsers to degrade gracefully.
All web sites should offer a means to contact the staff in charge of the site. A link to the contact information should appear on every page, in a consistent location (typically in the footer).
A copyright should be displayed in the footer of every page. The proper format for a copyright is:
Copyright © 2004-2007 Duke University Health System
The XHTML markup for this is:
Copyright © 2004-2007 Duke
University Health System
The copyright symbol should be preceded by the actual word "Copyright", and followed by the year the site was first published, followed by the organization name, which is "Duke University Health System." Optionally, the publication year can display a time span representing when the site was launched up until when it was last modified (e.g. 2001-2007).
Nontrivial sites should have a site map. The site map should show at least the top level content, and may go as deep as necessary as long as the resultant page does not become unwieldy (e.g. if a 4 level site map results in 300K of HTML, then back off a level).
Nodes that represent web pages should hyperlink to the actual pages. Site maps ideally are generated dynamically by the back-end system used, as maintaining them can be burdensome.
Web sites should be authored using XHTML 1.0 Transitional. As the web is slowly moving towards XML, XHTML offers a good intermediate solution to ensure future compatibility, and greater accessibility due to its well-defined rules.
When complete, sites must fully validate against this standard. To check this use an automated validator, such as the one at the W3C website:
Below are some XHTML guidelines covering the key rules and practices that lead to well-formed documents.
XHTML documents must begin with a line declaring the appropriate document specification. The specific doctype to use is XHTML 1.0 Transitional. See below for an example doctype declaration for this specification:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This declaration is needed at the top of every web page, and should be the first line of text in the source code. Note that some websites have XHTML pages that begin with a standard XML document start (<?xml>), but do not do this, as it causes problems in many web browsers.
The second line of code must be the HTML tag specifying the proper namespace. The HTML tag should always look like the following, for English language sites:
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
Declare the appropriate content type and character encoding in the <head> section of the source. The preferred character encoding, for flexibility and compatibility, is UTF-8. Content type will be text/html, in general. Below is how this meta tag* should appear:
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
*NOTE: Merely setting this meta tag does not ensure that web pages will be served in the UTF-8 encoding. The actual content must be input in this encoding, and the web server must be appropriately configured.
XML is case-sensitive, and all XHTML tags must be in lower-case. So, instead of:
<HEAD>
<TITLE>Family Brothers Pizza</TITLE>
</HEAD>
...write instead:
<head>
<title>Family Brothers Pizza</title>
</head>
In HTML, some tags do not require a matching close tag, for instance <p>. In XHTML, all tags that open must have a matching close tag. So, instead of:
<p>This paragraph has no closing tag.
<p>And neither does this one.
...write instead:
<p>This paragraph does have a closing tag.</p>
<p>Well formatted
XHTML is the
way to go.</p>
Empty tags also must be closed. Common empty tags include <br> and <img>. To close an empty tag, insert a space and forward slash / before the closing angle bracket. The space in front of the slash is required so that older browsers will handle this formatting correctly. So, instead of:
<img src="wingchun.gif"> <br>
...write instead:
<img src="wingchun.gif" />
<br />
All attribute values must be quoted, using the standard double-quote. So, instead of:
<img src=taichi.gif
width=22>
...write instead (note the tag closing slash, as well):
<img src="taichi.gif" width="22"
/>
Do not cut and paste special characters directly into HTML documents. Special characters are any characters than you can't naturally find on your keyboard (i18n issues are another matter). Special characters include the copyright symbol, trademark symbol, em dash, en dash, and others.
Special characters can be represented in HTML using either the character entity reference (a name-based code), or the decimal character reference (a number-based code). For example, the entity reference for the trademark sign ™ is:
™
while the decimal character reference is:
™
Always use the entity reference to display any of the characters found in the tables found on the two pages, below.
At the time of this document's creation, many browsers do not support the entity references for a certain set of special characters. For this set of characters, always use the decimal character reference, instead. A table of these special characters, with their decimal references, can be found on the following web page:
Do not use any of the deprecated tags. This includes:
<applet> <basefont>
<center> <dir> <font> <isindex>
<menu> <s> <strike> <u>
Avoid using any of the following deprecated attributes (all of which can be replaced by style-sheet controls):
| Attribute | When used within: |
|---|---|
| align | <caption>,<img>,<table>,<td>,<th>,<hr>, <div>,<h1..6>,<p> |
| alink | <body> |
| background | <body> |
| bgcolor | <body>,<table>,<tr>,<td>,<th> |
| clear | <br> |
| compact | <ol>,<ul> |
| border | <img>,<object> |
| hspace | <img>,<object> |
| link | <body> |
| noshade | <hr> |
| nowrap | <td>,<th> |
| size | <hr> |
| text | <body> |
| type | <li> |
| valign | <img>,<table>,<td>,<th>,<hr>,<div>, <h1..6>,<p> |
| value | <li> |
| vlink | <body> |
| width | <hr>,<pre>,<td>,<th> |
| vspace | <img>,<object> |
Additionally, do not use these tags at any time:
<blink> <marquee> <big> <small>
For a site to effectively reach as many visitors as possible, there are accessibility guidelines that should be considered to account for the variety of web browsers. Here are some resources to help in the development of accessible websites:
The W3C's website for guidelines, tips, techniques, and the different levels of compliance.
Dive Into Accessibility offers a set of very detailed tips for making a more accessible web site in 30 days.
There are also online validators for accessibility, and sites must pass the Section 508 compliance using the Cynthia Says™ portal, using the URL, below:
The Cynthia Says Portal is a web content accessibility validation solution, which can help identify Section 508 and WCAG guideline violations.
In addition, to meet the minimum accessibility standards, DUHS websites should comply with the rules outlined below.
Primarily, this implies that all <img> tags should specify a value for the alt and title attributes. The title value should be a name for the image, while the alt value should describe the image. As an example, an image of a boy eating a pizza may have the following <img> tag:
<img src="sam_pizza.jpg" width="300"
height="124" title="Samuel Richaldson" alt="boy eating a pizza"
/>
For images that are used as layout elements, like lines, spacers, etc., no title is required, and the alt value should be set to the empty string, like so:
<img src="spacer.gif" width="1" height="1" alt="" />
Use CSS for all text styling. I.e., do not use the <style> attribute.
As some readers have different perceptions of color, using color to convey meaning is not always effective. For instance, here is an example of what not to do. (In the following example, the 'A' link is violet, the 'B' link is red, and the 'C' link is green.)
Click
on the red link to visit our office: A B C
When non-native media types are embedded in pages, like Flash, or QuickTime, specify an alternate content source that can be displayed by browsers that do not have the plug-in installed.
For Flash movies, use the following as an example to embed
multimedia on web pages. Note that this code snippet is not
the standard HTML seen when using Flash, but is instead based
on the 'Flash Satay' style of coding. For more details on this
style, and why it is a good solution, see this article:
Flash Satay
<object id="flash_ad" type="application/x-shockwave-flash" width="245" height="490" data="flash_ad.swf">
<param name="movie" value="flash_ad.swf" />
<param name="wmode" value="opaque" />
<param name="allowScriptAccess" value="sameDomain" />
<!-- alternate content for non-flash visitors -->
<div>
<ul>
<li><a href="foo">Foo</a></li>
<li><a href="bar">Bar</a></li>
<li><a href="sassafras">Sassafras</a></li>
</ul>
<p style="padding-top: 2em;">
<u>Note:</u> There is multimedia content on this page which requires the Flash viewer.
To see it, download and install the Flash plugin here: <br />
<a href="http://www.macromedia.com/go/getflashplayer">Macromedia Flash Player</a>
</p>
</div>
</object>
Animation usage should be minimized, in general. When it is used, the animation should not loop more than twice. GIFs are a good choice when creating small animations, but Flash is more efficient for larger components.
Usage of sounds should be minimized. If used, ensure that the volume is at a low level, and that the sounds are not harsh or grating. Like color usage, sound should not be used to convey meaning.
Generally, music should not be used on websites. This includes music files (MIDI, WAV, etc.) that play automatically upon page load, or music embedded in Flash animations (or other plug-in formats).
When a link's enclosed text is not very descriptive for the destination web page, a title should be specified. A common case is when the word "here" is linked. Here is an example of using the title attribute effectively:
For more information, go <a href="/library" title="Health
Library">here</a>.
If the enclosed text is descriptive, this is not needed. For instance:
For more information, visit the <a
href="/library">Health Library</a>.
Image tags should specify the width and height. This will ensure that page layout is correct and stable even should the image fail to load. For example:
<img src="twobyfour.jpg" width="2" height="4" />
Ensure that form elements tab logically. Form input elements should also have their labels (when present) explicitly associated. For example, instead of this:
Username: <input type="text" />
...write instead:
<label for="username">Username:</label>
<input id="username" type="text" />
Use tables for layout purposes sparingly.
HINT: When using tables for layout, be aware that setting border-collapse to "collapse" via CSS can make cross browser layouts difficult to reconcile - in particular the positioning.
Do not use frames. Usage of frames causes accessibility problems, and should be avoided. Inner frames are sometimes used to perform complex JavaScript trickery, but do not rely on frames for page layout.
Avoid using the "target" attribute on <a href="123"> tags. Opening links in new windows can be frustrating for users, who have become accustomed to using the back button to quickly navigate out of content. Attempts to trap users on your site will typically have a negative, rather than positive, effect on your site's success.
Sites must use valid CSS. As with XHTML, this can be checked using an automated validator, such as the one at the W3C (World Wide Web Consortium) website:
As mentioned above, usage of the table tag for layout is discouraged, and CSS offers an alternative that has many benefits, of which the most important is the separation of presentation from content. A completely CSS style site can be redesigned by simply modifying the style sheet.
The following are good rules to follow when creating a style sheet:
Here are some excellent resources for CSS development: