GC Web Usability Intranet Theme

Overview

Project lead: Chad Farquharson (@cfarquharson)

Purpose

The GC Web Usability Intranet theme was developed to meet the principles of the Standard on Web Usability.

Benefits

  • Top tasks have been tested with users: contact us, search, return to home page, learn about us, stay connected through social media, navigate the site, read the terms and conditions, and toggling to the users official language of choice.
  • Conforms to the Standard on Web Accessibility and meets the principles of the Standard on Web Usability
  • Conforms to WCAG 2.0 AA
  • Responsive design that includes both mobile and desktop views
  • Uses HTML5 semantic elements and WAI-ARIA to enhance accessibility
  • Groups most of the navigation after the content area
  • Validates to HTML5 and is XML conformant

Recommended usage

Use When

This theme can be used on Government of Canada intranet sites (including web applications).

Do Not Use When

This theme can only be used on Government of Canada intranet sites.

Appearance

The theme adapts the appearance of the GC Web Usability theme for intranet sites.

Content

Content should focus on users' top tasks. Users tend to navigate through the content area first and then to the menus. They are looking for keywords that will help them meet their information need. Write in active voice and use verbs. Users will often scan the information looking for things that stand out - like links. Each link must be descriptive and representative of the content to which it leads. This is especially pronounced when users are accessing the site via a mobile device.

Implementation

General instructions

  1. Use the \theme-gcwu-intranet\*.html files to create your Web pages.
  2. Optional: Create and install one or more new CSS files (will be used for custom CSS)
  3. Optional: Create link(s) to the new CSS file(s) in between the following comments: 
    < !-- CustomScriptsCSSStart -->
< !-- CustomScriptsCSSEnd -->
  4. Correct all *.css, *.js, and *.gif file paths referenced in the installed *.html files
  5. Replace the page title (in between <title> and </title>,), the site title, and the content title (in between <h1 id="wb-cont"> and </h1>)
  6. Correct the metadata values
  7. Correct the Terms and conditions/Avis link(s)
  8. Additional instructions

Server Instructions

Configure Custom HTTP Headers to emit "X-UA-Compatible" "IE=Edge". Instructions on configuring IIS (English / French) or Apache (English / French) can be found on MSDN. This setting will ensure Internet Explorer 8, 9, and 10 will use their most recent rendering engine, as opposed to "Compatibility Views".

Content page-specific instructions (cont*.html)

  1. Correct the menu bar links or remove the mega menu
  2. Correct the English/français link or remove the language selection links
  3. Optional: Add a sub-site title
  4. Optional: Implement either secondary navigation version 1 (3 levels maximum) or secondary navigation version 2 (4 levels maximum)
  5. Correct the search field or remove the search field
  6. Correct the breadcrumb trail or remove the breadcrumb trail
  7. Correct the Transparency/Transparence link or remove the Transparency/Transparence link
  8. Correct the site footer links
  9. Correct the Date modified/Date de modification or remove the Date modified/Date de modification

Welcome page-specific instructions (sp-pe*.html)

  1. Correct the English and French language links

Server message page-specific instructions (serv*.html)

  1. Replace the English and/or French messages.

Examples

Development

The code for the GC Web Usability Intranet theme is located in several places within the source folder of WET:

Known Issues

  • CSS styling will not be entirely consistent across all browsers since many of them will interpret CSS syntax differently.
  • Usability testing is required on the styles in the CSS grid system.

Version History

Related Documentation