-
Notifications
You must be signed in to change notification settings - Fork 0
GC Web Usability theme
Project lead: Paul Jackson (@pjackson28)
The GC Web Usability theme was developed to comply with the Standard on Web Usability.
- All working examples
- Working example with mega menu
- Working example with mega menu and optional vertical menu (secondary navigation version 1)
- Working example with mega menu and optional vertical menu (secondary navigation version 2)
- Working example for Web applications
- 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
- This theme must be used on Government of Canada websites (including web applications).
- This theme can only be used on Government of Canada websites.
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.
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 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.
- 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)
- 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
- Correct the English and French language links
- Optional: Include language links for other languages
- Replace the English and/or French messages.
- Optional: Include messages for other languages
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
- 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.
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.