CLF for the Internet - Navigation and Format

Version Histories

Rationale

Consistent use of a common menu facilitates navigation on GoC sites and consistently consolidates key common functions across all GoC Web sites.

Interpretation (Updated)

• Download and use the CLF page template
• Download and use the CLF Welcome Page template

To facilitate navigation within individual GoC sites and between multiple GoC sites, a Common Menu has been developed to provide specific service enhancements. Prominently placed at the top of every GoC Web page, the buttons on the Common Menu provide direct links to crucial navigation features. The Common Menu buttons are placed such that the most critical buttons hold the most prominent positions. For example, the language choice and 'Canada Site' buttons should be placed at the left and right extremes (respectively) of the bar itself. The Common Menu bar for unilingual sites is slightly different.

The width of Government of Canada Web pages must be no less than 600 pixels. The width dimensions for page components will be as follows:

• Header: Fixed, 600 pixels
• Footer: Fixed, 600 pixels
• First Column (left navigation): Fixed, 132 pixels
• Second column (vertical white space): Fixed, 18 pixels
• Third column (content area): Minimum column width of 450 pixels. 
  In exceptional cases where specific content (e.g. maps, large tables, charts, graphs, etc.) cannot adapt by way of wrapping or linearization to the standard 450 pixel width the content can extend to the right beyond the 450-pixel boundary. 
  When content does extend beyond the 450-pixel boundary a version suitable for printing on standard 8-1/2" x 11" (21.6 cm x 27.9 cm) paper must be provided.

The buttons in the common menu bar must have a black background with white text that is left justified and at least a 9 pixel font size. The dimensions of the buttons are 14 pixels high and 89 pixels wide with a 1 pixel space between the buttons. The common menu bar must appear on all html pages along with the other mandatory elements. See specifications.

• Tools and templates
• How to use skip navigation links
• GoC Web Applications

Web site vs Web document

CLF Standards are mandatory on all HTML navigation pages of GoC Web sites. In the case of downloadable versions of documents on your Web sites that are in non-HTML formats such as .doc, .rtf, .pdf, .txt, .wpd, the implementation of the menu bars is not required. However, the CLF Standards for Federal Identity, Official Languages, Important Notices, Collaborative Arrangements and Accessibility are required.

6.1 Best Practices

Common Menu Bar

The following are best practices to help institutions standardize the kinds of information that should be available behind each of the buttons on the Common Menu Bar.

English / Français Language button

Bilingual Web sites: This button provides a direct link to the page content in the other official language. Change language scripts

Unilingual Web sites: This button should read "Disclaimer" and take the user to the Unilingual Welcome page where a link to bilingual information on the department / agency is available. The Federal Identity Program Toolbox provides the specifications and guidance on building a unilingual Web site.

Multiple language Web sites: CLF Technical Working Group will provide guidance in the form of best practices on how to implement navigation of GoC content available in more than the two official languages.

"Contact Us" page

• GoC sites should provide relevant contact information, including information that could accommodate those with disabilities or special needs. The contact information provided should be in the context of where a user is on the Web site. An example of contact information can be found at the Canada site Contact Us page - http://canada.gc.ca/comments/form_e.html.
• Institutions should establish service standards or refer to existing institutional service standards. Service standards should be provided to the user up front so that they understand the process and know what to expect, i.e. response time for service delivery.
• Ensure proper implementation of Common Look and Feel Standard 4.4 - acknowledgements.
• Ensure proper implementation of Common Look and Feel Standard 5.4 - personal information.

"Help" page

• Provide a link to the site map or an alphabetical list of products that are available on your site.
• Provide an overview of any Accessibility features that are available on your site. e.g. Access Keys, personalization.
• Describe what formats are available throughout your site. Please see the Help page on this Web site for more information and examples.
• Provide a link to technical help for problems with the Web site or for users who are having problems accessing information on the Web site, i.e. link to webmaster's e-mail.
• Provide a link to the "Contact Us" page on the Web site.
• Provide site specific help information as well links to the institution's more general help.

"Search" page

• This button should link to search and retrieval systems that enable users to obtain information on a particular subject in any GoC Web site How to create an accessible Search page.
• Provide detailed help on how to search the information on your site with examples of how to conduct a simple and advanced search Information on how to search in other languages, and how to use other characters is encouraged when appropriate. Termium features, services and software could also be included.
• Provide links to the other levels of searching within your institution e.g. Department or Agency.
• Provide a link to the Canada Site AltaVista search page.

To ensure information on your site is found by users proper implementation of Common Look and Feel Standard 6.3 on metadata must be applied to html resources.

Canada Site button

• Provide a direct link to the Government of Canada Web site. When your site is a GoC intranet provide a link to the GoC Publiservice Web site.
• When linking from an English content page to the Canada Site / Publiservice Site always link to the index page of the site and never to the Splash page where the user is then forced to make their language selection again.