-
Notifications
You must be signed in to change notification settings - Fork 0
OGPL theme
The OGPL theme was developed to support the Open Government Platform (OGPL).
Project lead: Paul Jackson (@pjackson28)
The OGPL is based on the WET theme and is intended for use on OGPL sites.
- 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
- This theme can be used for OGPL sites.
- This theme should not be used for non-OGPL sites.
The theme adapts the Web Experience Toolkit core framework for use on other sites.
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-ogpl\*.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>)
- Replace the metadata values
- Correct the menu bar links or remove the menu bar
- Correct the mega menu links or remove the mega menus
- Correct the English/français link or remove the language selection links
- Optional: Implement either secondary navigation version 1 (3 levels maximum) or secondary navigation version 2 (4 levels maximum)
- Correct the site title
- Add a sub-site title
- Correct the search field or remove the search field
- Correct the breadcrumb links or remove the breadcrumb trail
- Correct the site footer links
- Correct the Date modified/Date de modification or remove Date modified/Date de modification
- 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
};The code for the OGPL theme is located in several places within the source folder of WET:
- theme-ogpl/js/theme.js - contains the JavaScript code for the OGPL theme
- theme-ogpl/sass/theme.scss - contains the CSS for the OGPL theme content pages
- theme-ogpl/sass/theme-ie.scss - contains the IE7/8-specific CSS for the OGPL theme content pages
- theme-ogpl/sass/includes/ - contains the include files for building the CSS files for the OGPL theme
- theme-ogpl/jquery.mobile/jquery.mobile.theme.css - contains the jQuery Mobile specific CSS for the OGPL theme
- theme-ogpl/images/ - contains the images for the OGPL theme
- theme-ogpl/jquery.mobile/images/ - contains the jQuery Mobile specific images for the OGPL 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.