GC Web Usability Intranet Theme

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

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
10. Optional: Fix the mobile view header navigation bar to the top of the viewport by adding the following to settings.js:

    // Mobile view
    var wet_boew_mobile_view = {
    	header_fixed : true
    };

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.