Web Page Design
Documents for the FDA Web site should meet the
same standards for clarity and correct grammar,
syntax, spelling and punctuation as any other form
of FDA public information. Refer to appropriate
style manuals for guidance. The Website Management
Staff relies primarily on the most recent edition of
the AP Style Manual. In-house copy-editors, if they
are available, should review the documents.
Required Elements for Documents on the FDA
Website:
1. The Doctype
(document type declaration)
For example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN">
The doctype goes on the very first line of the
document (above the <html> designation) and
describes which version of HTML the document uses.
2. The <HEAD> Section
This section should include:
- <TITLE> information
- required Meta Tags (content-type, keywords,
description, posted, author, poster,
updated)
Example of the <HEAD> section for HTML
documents:
(The words in bold must be filled in
appropriately by the person preparing the page)
<head>
<title> "Title of document"</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta name="keywords" content="a list of words
pertinent to the subject matter of the document">
<meta name="description" content="description of
the document">
<meta name="posted" content="date of the document
is posted on the Website">
<meta name="author" content="content author of
the document">
<meta name="poster" content="initials/name of
person who posts the document on the Website">
<meta name="updated"
content="date the document was last
updated">
</head>
Proper use of <title> information and meta tags
can improve the manner in which a document is
indexed by FDA's Search Engine and by other search
sites, such as Yahoo and Alta Vista.
<Title> Information
The <title> describes the contents of the
document. This information appears in the bar of the
Web browser (such as Internet Explorer or Netscape)
and is frequently used to identify the document on
hotlists, lists of bookmarks, search results, and
site indexes. If the field is left empty for
example, FDA's search engine will list the title as
"No Title" in the search results.
Because many browser windows, hotlist entries and
bookmarks display only a limited number of
characters, the title should be short (generally
fewer than 64 characters). But it must also be fully
informative and specific (e.g., "FY 1996 FDA Budget"
is preferable to "Budget"), so that it can be
understood even out of context. The title should
contain the document's more important key words.
The Required Meta Tags
- Keywords: a list of no more than 25
words (separated by a comma and a single space)
describing the subject matter of the document.
You can use words that aren't acutally in the
document (such as synonyms).
- Description: a one- or two-sentence
summary of what the document is about. This
information is often displayed in Search
results. If the meta tag isn't used, the Search
engine will display the first few lines of the
document instead.
- Posted: the date the document is
posted to the Website. The date format is
mm-dd-year (e.g., 01-24-2001). The posted date
does not change: If changes are made to the
document, the date of these revisions should be
indicate in the body of the document.
- Author: the initials or name of the
person or office that prepared the content of
the document.
-
Updated: the date the document was
last
updated. This meta tag is added the
first time a page is revised.
Additional Meta Tags
- Poster: the initials or name of the
person who posted the document to the Internet
use of this is optional.
- <meta name="issued" content="date the
printed version of a document was originally
published or the date of the last major
revision">: for instance, if a jornal article is
printed in May 1998, this will be the Issued
date, even though the document may not be placed
on the Web until some time later. This date
does not change to reflect online revision.
- <base target="_top">: Use of this tag in the
HTML header of all pages that are not inside a
Frameset (or of their owning Frameset, if they
are) will reduce the likelihood of FDA pages
being "trapped" inside non-FDA sites that are
using Frames. Including this HTML command will
not prevent the original linked page from being
displayed inside another site's Frames, but when
the user clicks on any links within that FDA
page, the linked page will be popped out of the
Frame and to the top-level browser window.
- <meta http-equiv="Content-Language"
content="en">: establishes the language of the
page as English. Otherwise it is possible that a
Browser might become "confused" when moving from
a foreign-language page to one in English. This
tag ensures that the correct font set for
English will be used.
Sources on Meta Tags
PDF Documents
Meta information should also be added to PDF
documents. Use the following fields available in the
General Document Information for PDF files:
Title, Subject, Author, and Keywords. Avoid the
use of custom tags because it increases the
complexity of the indexing needed for the search
engine.
The date issued should be the first
information entered in the Subject field in the
General Document Information.The description
should be included in the Subject field of the
General Document Information, after the issued date.
The posted information should be included in
the Subject field of the General Document
Information, using the same format as for the posted
meta tag. The Author field of the General
Document information should be used for both the
document author (required) and poster (optional).
The format is Author: Lucy Ricardo. Poster:
Ethel Mertz.
3.The <BODY> Section for
HTML Documents
The body of every document must include:
- the source as the U.S. Food and Drug
Administration. Use of the "U.S. Food and Drug
Administration" gif file (/graphics/header.gif)
is one format but others may be used. Beginning
July 7, 2003, all Center home pages and all
newly created pages must use the new red, white
and blue top graphic, which identifies FDA as
the source. (See
Appendix H)
- a means to contact the author or the
Center/Office webmaster responsible for the
document--phone number, fax number, regular mail
address, e-mail address, or hyperlink
- for certain documents, such as reports and
articles, the date (month and year) when the
document was issued or the date of the last
significant revision
- links to the upper levels of the site.
Beginning July 7, 2003, all newly created
documents must use the standard navigation
footer. (See
Appendix H)
Additional Guidelines:
- Avoid horizontal scrolling
- Be consistent in layout-- When similar items
appear together, arrange them in the same order.
- Reserve frames for situations in which they
provide significant benefits. In sections where
it may be necessary to use frames, design to
mitigate the usability problems that frames
pose. If possible, avoid using them.
- When possible, distinguish ordinary links
from links to differently formatted documents
(e.g., PDF, RTF, WPD, DOC).
- Whenever a page references another page,
consider making the reference a hotlink.
- Use meaningful link text that indicates the
nature of the document to which the link leads.
- When Web documents are
updated, the address (URL) of the
document should not be changed. To change the
URL would break hyperlinks and bookmarks
directed to that document. If earlier versions
of a document need to be kept, they should be
given a new URL or archived in some way.
- When designing forms, make sure that the
user receives a confirmation message after
submitting the form.
- When using a form to receive information or
requests from the public, allow the user to
complete and submit the form online whenever
possible. Also, try to design the form so that a
person who submits the form with
incomplete/erroneous information should not have
to recomplete the entire form in order to submit
it again.
- If a document is posted in a format limited
to certain platforms/applications (e.g. Micosoft
Word, WordPerfect) also try to provide in in a
format accessible to all platforms (e.g., HTML,
text, or PDF). It's best to avoid using
proprietary formats whenever possible because of
the inconvenience they can cause for visitors
who don't have that application with which to
view to document.
- Use of personal "greetings" from center
directors or other top management, photos of
employees, and lengthy biographical information
(e.g., "Meet the Director") are usually not
appropriate for posting on the FDA Web site.
This kind of material too often is "puffery" and
as such has no place in government information
materials, whether print or electronic.
- No "Under Construction" notices are to be
used on any FDA Web page. However, it is
acceptable to mention specific "Coming
Attractions" when it is reasonably certain that
upcoming documents will be posted soon.
- Do not use all uppercase text. It is
difficult to read.
- For special characters, use HTML
abbreviations, not ASCII# codes.
Page Size
Keep pages reasonably short. Subdivide long
documents or provide navigation within them. When a
document spans mutiple Web pages consider providing
an alternate long version to facilitate printing.
Generally, no page should be larger than 150
kilobytes. Use images (icons, photographs, drawings,
etc.) sparingly, and only when they provide useful
information (not just for appearance). They can take
up a great deal of memory and significantly slow
down access. When images are used, they should be
displayed as "thumbnails," which take up less memory
and loading time than full-size in-line images. A
user who wants to see a larger version of the image
can do so by clicking on the thumbnail. The
thumbnail should indicate how many bytes the
full-size version is. Image size can often be
significantly reduced without compromising the
information conveyed by reducing the color depth,
especially for non-photographic material such as
icons, charts and graphs.
The size of large documents (larger than 256 Kb)
should also be indicated so that users can decide
whether they have the computer resources (and time)
needed to download and view the materials.
Web pages should be tested in multiple browsers
and on different versions of the browsers, to ensure
that the pages display correctly. At the very least,
pages should be tested in Internet Explorer,
versions 5 and higher, since those are the browsers
versions used by the vast majority of visitors to
the FDA website. Developers may also want to test
their pages in Opera. Since its development in 1996,
Opera has developed a reputation for being more
standards-compliant than other browsers. If your Web
site works in Opera, you can be almost certain that
it is open and accessible and will work in all major
browsers and for all major platforms and operating
systems.
Web pages must be validated both for HTML (or
XHTML) coding and CSS (if CSS is used) before they
are posted to the Web site. Some Web editors include
validators. The W3C also provides free online
validators:
Under both the Americans with Disabilities Act
and Section 504 of the Rehabilitation Act, Federal
agencies have been obliged to make their
services--including Web services--accessible to the
handicapped, including the blind. In 1998, Congress
created more stringent standards when it amended
Section 508 of the Rehabilitation Act to require
Federal agencies to make their electronic and
information technology accessible to people with
disabilities. Under Section 508 (29 U.S.C. Sec.
794d(a)(1)(A)(i)), agencies must give
disabled employees and members of the public access
to information that is comparable to the
access available to others. Official standards (see
www.access-board.gov/sec508/508standards.htm)
were published by The Access Board in the Federal
Register (Dec. 21, 2000) and went into effect
Feb. 20, 2001.
Guidelines
The FDA Website Management Staff recommends the
following Web sites as a source of useful
information for complying with the standards:
1. The Access Board guidelines for Web-based
Intranet and Internet Information and Applications
www.access-board.gov/sec508/guide/1194.22.htm
2. The National Cancer Institute's Section 508
site
http://usability.gov/web_508/
Tools for Checking Compliance
There are a number of tools for checking for 508
compliance although none of them works without some
human intervention. Many come with (or can be
downloaded for) newer Web editors, such as
Dreamweaver.
Bobby
(http://bobby.watchfire.com/bobby/html/en/index.jsp)
is a free on-line service supported by WatchFire
that tests for both Section 508 compliance and the
W3C's accessibility guidelines.
Accessibility vs. Section 508
The Section 508 requirements consist of a subset
of the World Wide Web Consortium's (W3C's) Web
Content Accessibility Guidelines. Federal agencies
are legally obligated to comply only with
Section 508. However, it is advisable for anyone
creating Web pages to be familiar with the
accessibility guidelines espoused by the W3C. See
www.w3.org/TR/WCAG10/.
Documents should be designed so that users will
have to rely as little as possible on navigational
aids in their browsers (e.g., back and forward
buttons, history lists). For example, on a given
document, if two clicks of the "Back" button or
command do not return a user to the center/office
sub-home page, then a direct link should be
provided.
Relative URLs should be used whenever possible,
for both anchors and images, in order to make
documents and collections portable. For example, a
link from the file "default.htm" to the file
"chapter1.html", when both files reside on
the WWW server "www.fda.gov" in the directory
"/mybook/", should be expressed as <a
href="chapter1.html"> , not as <a
href="http://www.fda.gov/mybook/chapter1.html">.
Whenever possible, avoid changing the URL of a
page. When a document must be moved to a
new location (with a new URL), create a redirect
page named with the original URL that directs people
to the new location of the document. To prevent the
redirect page from being indexed by search engines,
include in the <head> of the document the meta tag:
<meta name="robots" content="noindex, nofollow">
Always inform the FDA Webmasters of the
change and, if possible, inform the Webmasters of
other Government websites that are linking to that
document. A Google link search will reveal all the
pages linking to the old location of the moved
document
