Web Design Guidelines

USITS Home » Web Design Guidelines

Accessibility

  • Provide descriptive alt attribute text on images and descriptive title attribute text on links.
  • Put all style information in the CSS file. Separating the presentation from the content of a page allows the greatest variety of devices to access and sensibly render the content.
  • Use semantic markup.
  • Provide an alternate, accessible page when using scripts, frames or dynamic content that may make the content inaccessible.
  • Add a "skip navigation" link at the top of the HTML page. If you don't like the look, hide the link with a text-indent:-5000px style rule in the CSS file.
  • Make sure your design allows people to resize text.
  • Use an image replacement technique for text graphics.
  • Use color to enhance communication, not diminish it. For example, black-on-white text is easier to read than gray-on-white. Links of noticeably different color are more easily spotted—but don't rely on color, underline links as well.
  • Provide a site map.
  • Validate your code using one of the many free accessibility tools: Webxact (used to be Bobby), Wave, Cynthia, and W3C's Markup Validation Service.
  • For more information, review ASU's Web Accessibility Guidelines

Content

  • Department web pages will contain current, grammatically correct, typo-free information.
  • Page title will include Arizona State University and department name.
  • Provide the following information: page developer and/or contact name, date of last update, e-mail, postal address, phone numbers, and counters (preferably not visible).

Design

  • New web pages will, at minimum, incorporate the standardized header and footer from the ASU template. It is preferential to incorporate the entire template.
  • The use of the logo will comply with university graphic standards.
  • Department web sites will be organized so that information will be available with as few clicks as possible.
  • Keep main page length to a minimum. Detailed information should be on secondary pages.
  • Photos/graphics will make sense within the context of the department's services. The graphics will load quickly.
  • Pages will work within the structure of the common monitor size to reduce scrolling.
  • No horizontal scrolling.
  • Text should be in high contrast with any background color or images, leading to better printing quality.
  • ASU Logo Guideline information can be found in the online ASU Graphic Standards Manual.
  • More information can be found in the ASU Communication Guide

Technical

  • Read and understand the FERPA Policy
  • Design for 1024 x 768 pixels. Keep in mind that your content may be displayed from a mobile device.
  • Image Size: lower than 200kb and resolutions no larger than 72 dpi.
  • Never point links to local drives.
  • Avoid frames, unless absolutely necessary.
  • Avoid plug-ins, such as Flash, etc.
  • Printed forms should be in Word and PDF format.
  • Design pages to be downloadable on 28.8 modems.
  • Test pages and different browsers/platforms.
  • Use META tags for search engines.
  • Use web safe colors (216 colors).
  • When changing filenames, a redirect should be put in place.
  • Pay attention to code detail.

W3C guidelines

  • Images and animations: Use the ALT attribute to describe the function of each visual.
  • Image maps: Use client-side map and text for hotspots.
  • Multimedia: Provide captioning and transcripts of audio, and descriptions of video.
  • Hypertext links: Use text that makes sense when read out of context. For example, avoid "click here".
  • Page organization: Use headings, lists, and consistent structure.
  • Graphs and charts: Summarize or use the LONGDESC attribute.
  • Scripts, applets and plugins: Provide alternative content in case active features are inaccessible or unsupported.
  • Tables: Make line-by-line reading sensible. Summarize.
  • Check your Work: Validate. Use tools, checklist and guidelines at http://www.w3.org/TR/WCAG.