GC Web Usability theme - nschonni/wet-boew GitHub Wiki

français

Table of Contents Overview Description Benefits Recommended usage Use When Do Not Use When Appearance Behaviour Content Implementation General instructions Content page-specific instructions (cont.html) Welcome page-specific instructions (sp-pe.html) Server message page-specific instructions (serv*.html) Examples Development Known Issues Future Version History Related Documentation

Overview

Project lead: Paul Jackson (@pjackson28)

Description

The GC Web Usability theme was developed to comply with 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 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 must be used on Government of Canada websites (including web applications).

Do Not Use When

This theme can only be used on Government of Canada websites.

Appearance

The theme prescribes the look of the template for content pages, splash pages and server error pages. Content layout, including that of the home page, is not prescribed, except for the Priorities section that is right-aligned somewhere below the breadcrumbs.

Behaviour

The application template demonstrates a number of exceptions in the Standard on Web Usability. It opens many links in a new window to help prevent user error that may be caused by leaving a session during a transactional process.

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

Use the \theme-gcwu-fegc\*.html files to create your Web pages.
Optional: Create and install one or more new CSS files (will be used for custom CSS)
Optional: Create link(s) to the new CSS file(s) in between the following comments:

< !-- CustomScriptsCSSStart -->
< !-- CustomScriptsCSSEnd -->

Correct all *.css, *.js, and *.gif file paths referenced in the installed *.html files
Replace the page title (in between <title> and </title>,), the site title, and the content title (in between <h1 id="wb-cont"> and </h1>)
Correct the metadata values
Correct the Terms and conditions/Avis link(s)

Content page-specific instructions (cont*.html)

Correct the menu bar links
Correct the mega menu links or remove the mega menus
Correct the English/français link
Optional: Implement either secondary navigation version 1 or secondary navigation version 2
Correct the site title
Correct the search field
Correct the breadcrumb
Correct the Transparency/Transparence link
Correct the site footer links
Correct the Date modified/Date de modification

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

Correct the English and French language links
Optional: Include language links for other languages

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

Replace the English and/or French messages.
Optional: Include messages for other languages

Examples

Development

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

theme-gcwu-fegc/js/theme.js - contains the JavaScript code for the GC Web Usability theme
theme-gcwu-fegc/sass/theme.scss - contains the CSS for the GC Web Usability theme content pages
theme-gcwu-fegc/sass/theme-ie.scss - contains the IE7/8-specific CSS for the GC Web Usability theme content pages
theme-gcwu-fegc/sass/theme-serv.scss - contains the CSS for the GC Web Usability theme server message pages
theme-gcwu-fegc/sass/theme-serv-ie.scss - contains the IE7/8-specific CSS for the GC Web Usability theme server message pages
theme-gcwu-fegc/sass/theme-sp-pe.scss - contains the CSS for the GC Web Usability theme splash pages
theme-gcwu-fegc/sass/theme-sp-pe-ie.scss - contains the IE7/8-specific CSS for the GC Web Usability theme splash pages
theme-gcwu-fegc/sass/includes/ - contains the include files for building the CSS files for the GC Web Usability theme
theme-gcwu-fegc/jquery.mobile/jquery.mobile.theme.css - contains the jQuery Mobile specific CSS for the GC Web Usability theme
theme-gcwu-fegc/images/ - contains the images for the GC Web Usability theme
theme-gcwu-fegc/jquery.mobile/images/ - contains the jQuery Mobile specific images for the GC Web Usability theme

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.

Future

Work is underway for the following scenarios:

Multilingual Sites - those available in languages in addition to English and French
Sign-in / Sign-out feature in applications
Mobile view - the default treatment of menus, splash pages and server error messages when sites are viewed on screens that are less than 700 pixels wide.