General Web Style Guide

All elements of a web site contribute to the public perception of the University. To provide a consistent message to the public, this web style guide aims to provide guidance and best practices when it comes to use of the University brand online. Please use this guide as a supplement to the Visual Style Guide [PDF] and Editorial Style Guide.

Quality Content

  • Content published to the web must support the goals of the University and have a solid reason for being on the web. If it does not, it should not be published.
  • Content must be concise, relevant, up-to-date, and accurate.
  • When content is published to the web, there must be a point-person in charge of maintaining that content.

Writing for the web

  • People generally scan information on the web, so make your content easy to peruse. Keep your sentences simple, limit paragraph length, use proper heading levels, and use bulleted lists.
  • Categorize information based on the user’s perspective, not by the organization of your department or office.
  • Avoid using meaningless terms like “click here” or spelling out an entire URL to link to content. Use a more active approach such as "To register, fill out the registration form."

Images

  • Use only images to which you maintain usage rights.
  • Optimize your images so that the file size is as low as possible. For a guide on how to optimize images, see our guide on image formatting.
  • Use crisp, high quality images. Photographs taken by a professional photographer are preferred. Do not use images taken with a low-resolution camera.
  • Do not use animated GIFs.
  • For Social Media icons, use the icon set available here.
  • For File Type icons (e.g., .pdf, .doc, .jpg), use the icon set available here.

Semantic HTML

All documents on the web should be written in semantic markup, meaning HTML tags are used to accurately describe the content they contain. Below is a short list of guidelines to follow.

  • Headings. Use headings properly. Each page should have only one <h1> and it should contain the title of the page, not the title of the website. Use the other headings in order and do not skip a heading level.
  • Lists. Use lists not only for literal lists, but for site navigation. Be sure to use the proper list type (ordered, unordered, or definition) for each situation.
  • Tables. Use tables only for tabular data. <table> tags should not be used for formatting content into a particular layout.
  • Forms. For every form field, provide a corresponding <label>.

Provide Alternative Content

  • Images. Use the alt attribute on images and animations to accurately describe the content. Do not use images that are void of content; for example, spacer images.
  • Audio and video. Provide captions and transcripts of audio content. Provide a description for video content.
  • Rich media. Provide alternative content in case a feature is unavailable, inaccessible or unsupported on a user's machine. Examples of such features include Java applets and Flash content. Use Flash sparingly, if at all.

Presentation

  • Information architecture. Create your information architecture from the perspective of the user, not the inner workings of your school or department.
  • Be consistent. Use consistent navigation and page layout throughout your website.
  • Bold text. Use bold type only to highlight key phrases, not for entire sentences or paragraphs.
  • Underlined text. Maintain the default underline as part of hyperlinks. This convention has been around since the dawn of the internet and helps identify text as a link. Avoid underlining text except in appropriate citations, as it can be confused with links.
  • Moving text. Do not use moving text of any kind.
  • Color. Use more than color to convey meaning. Make sure your color scheme has a high level of contrast that allows text to be legible to people with vision imperatives.

Usability

  • Warn of unexpected outcomes. Let the user know if a particular link is going to do something other than open a new web page. For example, if the link is going to open a PDF, you can put "[PDF]" or a PDF icon before or after the link.
  • Links. Make all links accessible to the keyboard by using the <a> tag. Do not use JavaScript to denote a link via onclick.
  • Let them skip. Give the user the option to skip redundant information; for example, site-wide navigation. Create an anchor to your main content area and then create a link to that anchor just below the <body> tag. Here is an example:
    <a href="#content">Skip Navigation, Go To Main Body Content</a>
  • Going bare. Do not rely on JavaScript, CSS, or images to convey your message. Turn off all JavaScript, CSS, and hide all images using a tool such as the Web Developer Toolbar. Does your website still make sense? Can you navigate with only your keyboard?
  • Test. Test your website in the most popular browsers on the most popular operating systems. Test your website on the most popular screen sizes. Test your website on the most popular mobile phones.
  • Always be sure to validate your code.