Web Style Guide

Below are some basic guidelines to ensure the user has a consistent and pleasant experience when using the University of Alberta website.

Responsive Design - Mobile First Content

  • Prioritize content for mobile viewing (most important at top to least on bottom)
  • Avoid awkwardly shaped images (extremely wide or tall images will shrink to hard to view sizes on mobile)
  • Take advantage of the grid system, which has predefined behaviours for each device
  • Test your websites on different devices and different resolutions to make sure the page does not "break" at any point

Easy to Navigate Website and Page Structure

  • Limit global navigation items between 4 to 7 items
  • Limit the number of child pages to an element between 5 and 9
  • Combine several pages of similar content into sections of content on a single page
  • Every page should meet the end goal of at least one target audience
  • Complete information architecture building exercises

Carefully Crafting Your Custom Coding

  • Use an HTML5 validator
  • Only use tags for their intended purpose, and not for the appearance that tag provides
  • Do not use inline styling
  • Provide text alternatives to non-text elements
  • Follow accessibility guidelines

Keeping Your Page Light Weight

  • Limit the number of images on a page
  • Compress images used on a page
  • Evaluate your page with tools like PageSpeed and YSlow

Further Reading