Skip over navigation
- Home
- Patient and Visitor Info
- Physicians
- Services
- Clinical Trials
- Event Calendar
- Locations
- Health Library
- About Duke Medicine
Quick Links
Web Development Standards
Document History
Feb. 8, 2010
Review and updates
Mar. 15, 2009
Review and updates
June 30, 2005
Document creation
Share
1 Browsers
At a minimum, sites should display correctly in:
- Internet Explorer 7
- Internet Explorer 8
- Mozilla Firefox 3
- Safari 3
Sites will be styled using well-structured XHTML and CSS, allowing older browsers to degrade gracefully.
2 Content
Users expect certain content to exist when visiting a Web site. Below are some of these common elements that should exist to meet those needs
2.1 Contact Us
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).
2.2 Copyrights
A copyright should be displayed in the footer of every page. The proper format for a copyright is:
Copyright ©
2004-2010 Duke University Health System
The XHTML markup for this is:
Copyright ©
2004-2010 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. 2004-2010).
2.3 Site Map
Nontrivial (more than a dozen pages) 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.
3 XHTML
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 Web site:
Below are some XHTML guidelines covering the key rules and practices that lead to well-formed documents.
3.1 Doctype Declaration
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 Web sites 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.
3.2 XML Name Space Declaration
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">
3.3 Character Sets and Content Type
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.
3.4 Tags in Lower-case
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>
3.5 Tags Closed
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>
3.6 Empty Tags Closed
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 />
3.7 Attributes Quoted
All attribute values must be quoted, using the standard double-quote (not the single-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"
/>
3.8 Special Characters
Do not cut and paste special characters directly into HTML documents. Special characters are any characters than you can't naturally find on an EN English (United States) 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:
™
3.8.1 When to use the Entity Reference
Always use the entity reference to display any of the characters found in the tables found on the two pages, below.
3.8.2 When to use the Decimal Character Reference
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:
3.9 Deprecated HTML Tags and Attributes
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>
4 Accessibility
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 Web sites:
-
http://www.w3.org/WAI/
The W3C's Web site for guidelines, tips, techniques, and the different levels of compliance.
There are also online validators for accessibility, and sites must pass the Section 508 compliance using the Cynthia Says™ portal, using the URL, below:
-
http://www.contentquality.com/
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, Duke Medicine Web sites should comply with the rules outlined below.
4.1 Provide text equivalents for all non-text content
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="" />
4.2 CSS
Use CSS for all text styling. I.e., do not use the <font> tag or the style attribute.
4.3 Avoid using color to convey meaning
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
4.4 Multimedia
4.4.1 Provide alternate content for elements requiring a plug-in
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>
4.4.2 Animated Images
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.
4.4.3 Sounds
Use 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.
4.4.4 Music
Music should only be played in response to a user action, like playing a video or a song. Music or sounds should not auto-play when loading a Web page.
4.5 Links With Titles
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>.
4.6 Image Tags Need Dimensions
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" />
4.7 Forms
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" />
4.8 Tables
Do not use tables for layout purposes. Only when a table of data truly needs to represented on a Web page is an HTML table appropriate.
4.9 Frames
Do not use frames. Use of frames causes accessibility problems, and should be avoided. This includes iframes.
4.10 Links
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.
5 CSS
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) Web site:
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.
5.1 Best Practices
The following are good rules to follow when creating a style sheet:
- use ems or percentages rather than pixels for sizing fonts, padding, and margins
- set both body margins and padding
- set body font-family and font-size
- set form margins and padding to zero
- set text, background, and link colors
- establish a link roll-over style
- set image borders, margins, padding
- set font-size for the headers (h1, h2, and h3, at least)
- use pseudo-classes to control recurring border and spacing styles
- set font sizes using relative measurements
5.2 CSS Resources
Here are some excellent resources for CSS development:
- Complete CSS Guide
http://www.westciv.com/style_master/academy/css_tutorial/
John Allsopp's online tutorial - Practical CSS Layout
http://www.alistapart.com/articles/practicalcss/
A guide from A List Apart that discusses using CSS as an alternative to table-based layout
