Recommendations

These recommendations cover general site-wide characteristics. Accessibility and content recommendations follow.

Architecture

Group broad categories of information on a site according to users' needs.

Breadth Leads to Depth

Page levels should be organized to provide increasing degrees of detail for those who require more information.

Browsers

Northwestern University supports Internet Explorer version 7+, Firefox 2+ and Safari 2+.

Colors

Web-safe colors are not required because fewer than 10% of users still use 8-bit monitors (which are incapable of displaying non-web-safe colors correctly).

Fonts

Verdana is the preferred font for text. Recommended settings (in order of preference): Verdana, Arial, Helvetica, Sans serif. Sizes may be set through Cascading Style Sheets or by setting relative sizes. If an absolute size must be used, it must be a minimum of 10 pt.

Page Dimensions

Pages can use flexible or fixed width. To avoid horizontal scrolling on an 800 x 600 screen, minimum width should be no greater than 740 pixels wide. If a fixed-width page is meant to be printed, provide a "printable version" with a separate style sheet (for print media) or use a minimum width that is no wider than 670 pixels wide in order to print on a PC without cutting off information. If you choose to have only one version of the page (web-viewable and printable), be aware that widths greater than 670 pixels will allow information to be cut off in printing.

Site Structure

Awareness of conventions in web design will help you to plan your site's structure, navigational elements, and page design so that your site visitors can quickly and accurately find what they're looking for.

Make the site's structure obvious on the home page with a visual hierarchy to "clearly and accurately portray the relationships between the things on the page: which things are related, and which things are part of other things" (Krug).

Training

Become familiar with Dreamweaver, Macromedia's web page editing program. Northwestern University Human Resources Training and Development <http://www.northwestern.edu/hr/training/> offers Dreamweaver classes. Call 847-467-5081 or e-mail <training@northwestern.edu>. Dreamweaver instruction books are widely available as well.

User Focus vs. Internal Focus

Try to organize sections and content according to users' needs, not necessarily by departmental organization or hierarchy. Try to identify what items a user would logically want, even if it means grouping functions from different areas together.

Validators

Use a validator program to ensure the site's compliance with W3C recommendations.

W3C Markup Validator
http://validator.w3.org/

Doctor HTML
HTML/">http://www2.imagiware.com/RxHTML/

WDG HTML Validator
http://www.htmlhelp.com/tools/validator/

Accessibility Recommendations

Many visually impaired users rely on text reading devices to make content available to them via audio.

  1. Use language that is as simple and clear as possible.
  2. Provide text equivalents to all nontext content.
    1. Provide a description of all images, sound files, applets, etc. in an ALT attribute. The ALT attribute allows you to convey to all users the content and meaning of your page. For example: <img src="picture.jpg" ALT="Northwestern University Library">
    2. If your nontext content is dynamic, make sure that equivalents change with the nontext elements.
    3. If your page cannot contain text equivalents within it, consider creating a parallel text-only version of the page, but only as a last resort.
  3. Make sure that text and graphics make sense without color. People who cannot differentiate between colors or who are using devices with noncolor or nonvisual displays will not receive or understand information that relies on color for its meaning. Choose backgrounds that contrast with page text and don't interfere with readability of content. Within the content of a page it is customary to underline links. In the navigation area of a page, it is acceptable to use a clear, consistent, non-underlined link format such as a specific and distinct font, style, and size.
  4. Don't use frames. Frames are not universally accessible. The content of frames may not be searchable by search engines.
  5. Avoid using server-side image maps.
    1. Navigation of pages using server-side image maps requires a mouse, which renders the page inaccessible to most visually impaired users.
    2. If used, consider providing a link to an alternate text version or summary.
    3. Client-side image maps are accessible because the information is stored locally and can be linked to using a text reader.
  6. Use descriptive links.
    1. Instead of denoting a link with the words "Click here" or similar phrase, be descriptive when providing links; for example: "further information from the W3C on Web accessibility."
    2. Consider allowing such links to stand on their own line or provide an ordered or unordered list of links in HTML.
  7. Use headings and lists to organize your page and reinforce consistent page structure.
    1. Use mark-up language (<h1>,e.g.) rather than images, visual cues, fonts or sizes alone, to emphasize the structure of your page. Avoid <font size=" ">.
    2. Organize documents so they may be read without style sheets.
  8. Test pages in multiple browsers, operating systems, and connection speeds.
    1. Test your pages on older Windows and Macintosh systems in both Netscape and Internet Explorer. It is helpful, but not required, that you test pages on Lynx, a text-only browser, to understand how the page "looks" to a text reading device.
    2. Pages intended for modem users should be tested for load times on slower connections (56K). A large image that downloads immediately on University computers may take 30 seconds to load on a modem connection.
  9. Provide alternate routes to information when using interactive technologies.
    1. Provide captioning and transcripts of audio and descriptions of video.
    2. Use special effects with caution and only with good reason. Pages that use Flash, Shockwave, or other interactive elements may not be accessible. You must provide a link to a text-only or non-interactive version of the information. Potential difficulties include:
      1. May not work (or will work unpredictably) on different systems
      2. Harder to implement and maintain
      3. Take longer to download and require users to install plug-ins
      4. Text readers and search functions don't support JavaScript -- not ADA compliant.
  10. Don't use browser detects (JavaScript)
    1. Different content is presented to different visitors based on browser. If something doesn't work in a given browser, that element should not be used at all instead of only being presented to a segment of visitors.

FYI: What Northwestern University does to facilitate accessibility on top-level pages

  1. Have descriptive ALT attributes on images that carry content
  2. Have empty ALT attributes on images that do not carry content
  3. Design table structure to keep columnar information together instead of reading in rows left to right (use TH and TD to designate table head and table data cells)
  4. Allow navigation independent of JavaScript
  5. Keep navigational elements in the same location on every page

Northwestern's future plans for accessibility

  1. Have "Next Page," "Previous Page," and "Up a Level" navigational meta tags
  2. Have "Skip to Main Content" links
  3. Enable keyboard shortcuts or hotkeys for link selection
  4. Use the "label" tag on forms whenever the field label is not obvious

Accessibility Tips

Recommended

  1. Consult the latest W3C guidelines <http://www.w3.org/WAI/>.
  2. Use high contrast text/background combinations with little or no pattern in background.
  3. Use proper heading styles to structure a page <h1>, <h2>, etc.
  4. Use CSS when possible.
  5. Use "ALT" attributes to describe images
  6. Make sure page is "backwards compatible" (that is, that it "fails gracefully").

Strongly Discouraged (all hinder accessibility for those with visual impairments)

  1. Use of red/green combinations
  2. Designation of headings by using "Bold" formatting
  3. Making navigation or other essential information depend solely on images

Content Recommendations

Writing for the Web

Users want to find what they are looking for as quickly and easily as possible. Web-oriented writing and editing are essential for optimal content delivery.

Key Concepts

  1. Omit non-essential words. Users don't read -- they scan.
  2. Use "inverted pyramid" writing style: start with the point, then support it, using links for more in-depth details.
  3. One idea per paragraph.
  4. Keep the most important elements "above the fold," that is, visible upon initial page view without scrolling.
  5. Categorize according to users' needs, not by departmental organization or hierarchy.
  6. When creating a link, highlight only the one-to-three most important words, NOT "click here."

Do

  1. Facilitate scanning with subheads, bullet points, lists, and captions.
  2. Provide links to related and additional detail.
  3. Use an active voice: "The company published the book."
  4. Use lists or tables when possible.

Don't

  1. Expect your visitors to read everything.
  2. Put everything on one page.
  3. Use a passive voice: "The book was published by the company."
  4. List items in a paragraph to save room.

Consistency of Style

The only web constant is change. Stylistic debates continue ("Is it E-mail, e-mail, or email?"). Style manuals will help, but the most important style and usage point, one that cannot be emphasized enough, is consistency. You must adhere to the style you choose.

A to Z Style Guide

Northwestern University University Relations' Publications Group has produced a guide <http://www.northwestern.edu/univ-relations/publications/resources/styleguide/styleguide.html> that addresses many stylistic issues you are likely to encounter in Northwestern University-related communications. Standard University terminology is found here. If you have any questions regarding reference to a specific University entity, confirm information directly with that entity, in the University's printed faculty/staff/student directory, or through the University Relations Publications Group at 847-491-4880 or <publications@northwestern.edu>.

Copyright Issues

Copyright protects expression -- your expression and that of others. All original expression is eligible for copyright protection as soon as it is fixed in a tangible form: In fact, almost all original expression is protected as soon as it is expressed. Virtually everything you can upload and download on the web is protected by copyright.

Items NOT eligible for copyright protection include:

  1. Ideas
  2. Facts
  3. Titles
  4. Names
  5. Short phrases
  6. Blank forms

While it's easy to download and copy files (text, photographs, graphics, sound, movies, etc.) from the web, you must have permission from the copyright holder to use them on your own web pages (or anywhere else). Under the terms of the Digital Millennium Copyright Act, the University is obligated to take appropriate action if it receives a complaint that copyrighted material is being published over our network without permission from the copyright holder.

Copyright notice on your pages

The standard Northwestern University footer contains a copyright notice. If you wish to use copyrighted material, send a Copyright Request Form to the content owner.

University Relations
Web Communications