Intranet Page Standards

These standards are required for all new pages added to UL@ND, the Libraries Intranet.

Intranet pages are defined as pages whose URL begins with http://libstaff.library.nd.edu/

These standards are also recommended for all new pages added to the Libraries Web site that aren't in the Libraries Intranet.

Benefits of following the standards:

Usability
- Users can more easily tell what the page is about
- Users can contact someone about the page
- Users get more useful information when the page appears in search results lists
Findability
- Search engines index the pages with more and better terms
- The Intranet's search engine lets users limit their search to terms appearing in particular meta tags (e.g. subject="intranet" or "web standards")
Accessibility
- Screen readers read the text in image alt tags for visually impaired people.
Forward compatibility
- These standards help move us towards XHTML and XML, the future language of the Web

The Standards

DOCTYPE and Meta Tags

Begin each page with the following DOCTYPE. The DOCTYPE tells which standard the page is based on. With the newest and future browsers, the DOCTYPE tells the browser how to render the page.

 <!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">

Include the following meta tags before the closing head tag (</head>). The meta tags enable field searching in the Libraries Intranet search engine.

<meta name = "DC.Creator" content = "" /> <meta name = "DC.Date.Created" content = "" /> <meta name = "DC.Description" content = "" /> <meta name = "DC.Subject" content = "" />

NOTE: DC stands for Dublin Core, a widely accepted metadata standard.

An example of meta tags:

 <meta name = "DC.Creator" content = "Tom Lehman" /> 

      <meta name = "DC.Date.Created" content = "2004-05-11" /> 

      <meta name = "DC.Description" content = "This page describes standards 
      for University Libraries of Notre Dame Intranet pages." /> 

      <meta name = "DC.Subject" content = "web pages, web standards, UL@ND, 
      ND Libraries Intranet" />

Validate your code

Submit the URL of your page to the W3C Markup Validator Service ("The Validator") at http://validator.w3.org/.

If your page uses CSS, validate it using the W3C CSS Validation Service at http://jigsaw.w3.org/css-validator/validator-uri.html.

Hint. W3C's HTML Tidy Service can clean up your HTML and make it easier to validate. Submit the URL of the page you want Tidy'ed to http://cgi.w3.org/cgi-bin/tidy.

Titles

Include a title in the <title> tag. The title tag displays in the title bar of a browser window, which helps identify the page if there are two or more windows open. Search engines use the title in the <title> tag to identify results of a search. If a search uses words in the title tag, the page may be higher in the results list.

Good practice is to put a specific page identification, followed by the page's context (dept., project, etc.)

Examples of <title> tags

Good: <title>Serials Department, Aleph Migration Project Page</title>
Better: <title>Aleph Migration Project Page - Serials Department</title>

Good: <title>CORRESPONDENCE V</title>
Better: <title>Correspondence V - O'Melia Collection - University Libraries</title>

Good: <title>News & Current Awareness (18)</title>
Better: <title>News & Current Awareness - Virtual Reference Desk</title>

Bad: <title>Test page</title>
Worse: <title>Memo</title>
Worst: [no title tag at all]

Headers and Footers

Every page should use a standard header and footer. Each part of the Libraries website will have a header and footer with information appropriate to that site. The header will have appropriate links for the site (ND Home, University Libraries, etc.); the footer will have appropriate navigation, a script that displays the date the page was last updated, and a link to the Notre Dame copyright page.

In addition to the standard footer, add the name or title and the phone number or email address (as a mailto:) of the person or group responsible for maintaining the page. Examples:

Good: Contact us.

Better: Web Central
Maintained by the Notre Dame Web Group
502 Grace Hall, Notre Dame, IN 46556
web@nd.edu

To make it harder for spammers to harvest email addresses from your page, encode the actual email address. There are several ways to do this. For example, see:

If you need a header or footer made, or need information on how to include them in your page, contact DAIAD's Web Developer, Elaine Savely at 1-9445 or by email at Savely.1@nd.edu.

Images

Every image tag (<img src="...) must have an alt attribute.

If the image is a graphic (picture), the alt attribute should contain a brief description of the image.
If the image is just text (for example "FindText", the alt attribute should contain the text; e.g. alt="FindText" .
If the image is a spacer gif, the alt attribute should be blank (alt="").

Screen readers will read the alt attribute for persons who can't see the image. Also, if the browser can't find the image, it will print the alt attribute in place of the image.

Use height and width tags for images, to speed loading and to eliminate confusion for screen readers and text browsers.

Only use images you have the rights to use. This means images you own (you took the picture), images that are free; i.e. in the public domain (from U.S. government sites, on sites that say "free"), or that are from resources Notre Dame or the Libraries have licensed or own the rights to. Do not modify any existing University of Notre Dame logos or trademarks without prior approval of the Licensing Department.

Sample <img tag with alt attribute

See the chapter on images in "Building Accessible Websites" for helpful information on making images accessible.

Links

If you link to file (word document, pdf file, etc.), add the file type next to the link description. Example: Reimbursement Form (.doc)

If a link opens in a new window, alert the user. Example: Currency Converter (opens in a new window)

And Finally ...

Avoid tpyogrphacial errosr. Use Spell/Grammar check. Then proofread, as spell check doesn't catch all errors, such as using "from" when you meant "form."
Keep your page as small as possible. Anything over 40K bytes will take a noticeable amount of time to load.
Avoid using images of text.
- Users can't search for text contained in images.
- Users can't copy text contained in images.
- Search engines can't index text contained in images.
Test your site in Netscape and Microsoft Internet Explorer browsers, viewed on PCs and Macs. Intranet pages should be tested in version 5 or above of these browsers. Pages intended to viewed outside the Libraries should be tested in version 4.0 of those browsers. It is not necessary that the page look the same in 4.0 browsers, just that the content be readable.

Web Standards Resources

Notre Dame's Web Standards
NYPL Web Standards
Building Accessible Websites
Web Standards: What They Are and Why They're Important
(PowerPoint presentation by Tom Lehman)

If you have questions, email us.

Team Intranet:

Elaine Griffen
Tom Lehman
Trudie Mullins
Elaine Savely
David P. Williams