![]() |
Français | Contact Us | Help | Search | Canada Site | ||||
What's New | About Us | Policies | Documents | TBS Site |
Calendar | Links | FAQs | Presentations | Home |
![]() |
![]() |
![]() |
Common Look and Feel for the Internet
Navigation and Format SectionOverviewElectronic service delivery provides excellent opportunities for Canadians to obtain information on GoC programs and services when and where they need it. Given the enormous resources now available on-line at GoC sites, a logical and consistent system of navigation is key to improving access. Effective navigation is dependent on consistent application of standards that are both visible and invisible to the end-user. Well-designed and strategically placed menu bars give users visual cues to site navigation. Search functions help simplify the task of locating specific information. Placing all GoC sites under one domain and standardizing URLs will further enhance these elements. Creating a 'common look and feel' for an extended family of related Web sites holds enormous challenges. The programs and services offered by GoC institutions are incredibly diverse and often serve a very specific purpose, for a very specific audience. In some cases, the purpose of a site may be strictly to provide information, in others it may facilitate delivery of a particular service. The Navigation and Format Standards and Guidelines are balanced so as to maintain an appropriate degree of consistency while giving institutions the freedom they need to develop Web pages that serve a variety of functions. Developing a Web site is not a one-time effort: well-designed sites are continuously evolving. Revisions are prompted by user feedback, better understanding of usage patterns, clearer focus of communications objectives, development of new material, modifications to existing documentation, and new interactive options. In the same way, CLF Standards and Guidelines will continuously evolve. Web-site design The site must be designed and developed from a user's point of view and testing is a necessary part of the process. Coherent presentation of content is intrinsically linked to layout, typography, graphic standards, the use of symbols and measurement specifications that can be applied to all GoC Web pages, regardless of their function, to establish a standard framework. Minimalism is a good practice in designing Web sites. Graphic files should be as small as possible to facilitate rapid delivery via any end-user technology and should include text equivalents to ensure all users can obtain a description of what the graphic contains and what purpose it serves. Users should be warned of large file sizes and non-standard formats, i.e., wider than 640 pixels. Navigational aids, such as buttons and links, should be well-designed and easy to use. No specific procedural standard or guideline could adequately cover the use of imagery, but it is recommended that GoC Web sites minimize non-essential visual information. Where visual images are used, they must be accompanied by appropriate ALT Text tags to ensure that all users are provided with information about what the images represent and can identify the target (or destination) of images that act as links. GoC institutions are free to use Web and multimedia technologies to enhance sites, on the condition that all elements are universally accessible. Web developers and content providers can maintain alternate versions of sites that offer demonstrations of advanced technologies, alternate formats or interactive multimedia components. These must be presented as secondary sites and must incorporate appropriate hyperlinks if users are expected to download software or plug-ins to operate multimedia components. Imagery Well-designed and carefully placed images can improve the visual appeal and information content of Web sites. However, the time it takes to display large images may drive users away from the site. Many users choose to turn off their display options; others, including individuals with certain disabilities or those with non-graphical browsers, can not view images at any time. Therefore, imagery should be kept to a minimum on GoC Web pages. In addition, all images (graphics, photographs, icons, etc.) should be accompanied by descriptive text equivalents to ensure all users can obtain the same information. It is critical to indicate when images act as links to other Web pages of the site or to other sites. Web developers may choose to use thumbnail images as a link to enable users to view larger versions, and should include information regarding the file size and format. Animated or Scrolling Images and Text Various simple mechanisms can be used to add an element of motion to either text or graphics, thereby enhancing the look, adding a degree of entertainment, or serving some other legitimate purpose within the context of a particular Web site. The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines do not ban the use of animated or scrolling images and text, but do provide specific instructions on how they can be implemented without having a negative impact on accessibility. When used, these elements should not self-activate; rather, they should be user-controlled, meaning both activation and deactivation are dependent upon specific requests from the user. In addition, text equivalents must be provided via ALT text or LONGDESC tags. If there is any doubt as to the value of an animated or scrolling text or image, it should be removed from the site. Text Elements Like visual elements, Web site texts should be simple and concise. Content should fit within one or two screens, since users are reluctant to scroll endlessly through documents. All information must also be accessible in a text-only format. Font sizes are limited to a single size for headers, and a single size for body text. Hierarchical distinctions can then be made using other font features such as bold and italic. Users should be warned of large file sizes and non-standard formats. Developers should structure information so that it is relatively easy to update. Typography Typography choices can enhance or detract from the overall visual appeal of a site. Although user display preferences in individual browsers have ultimate control over text presentation and fonts are displayed as coded only when browsers are set to the default preference, there are benefits to be gained through consistent font presentation. Layout Web page layout is an integral part of Common Look and Feel. Some common styles of Web page design create barriers for individuals using assistive devices and non-graphical technologies. Such barriers to accessibility can be avoided through thoughtful Web page design in accordance with CLF and W3C guidelines. Accessibility is not the only issue with respect to layout. Beyond the common menu bars and FIP identification, a common approach to organizing site content plays a major role in visually unifying the thousands of government Web sites. The simple fixed columnar arrangement provides for third level navigation requirements, creative themes, and a body text line-length that is easy to read on-screen. This layout anchors, in fixed space, the graphic elements which identify the site as a government site and ensures that the consistent presentation of the site content works together with the mandatory graphic elements. See FIP Toolbox for specifications. It is the responsibility of individual Web developers with the Government of Canada to ensure Web sites are designed to be universally accessible. Information on how to use tables effectively for the layout of images or data presentation is provided from the World Wide Web Consortium Web site. Standards 7.1, 7.2 and 7.3 have both Navigation and Format and Official Languages implications. Standard 6.1All GoC Web pages must include the common menu bar, placed at the top of every Web page, to facilitate navigation through and between GoC sites. The GoC menu options must appear in this order and include: Language (English / French) for bilingual sites only, Contact Us, Help, Search and Canada Site. Version Histories
RationaleConsistent use of a common menu facilitates navigation on GoC sites and consistently consolidates key common functions across all GoC Web sites. ![]() Interpretation (Updated)
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:
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.
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 PracticesCommon Menu BarThe 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 buttonBilingual 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
"Help" page
"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
Standard 6.2All GoC Web pages must incorporate an institutional menu similar in design and placement to the common menu bar. The number of buttons and choice of terminology should represent plain language descriptors of the organization's program and services. Department, Branch / Sector, Division RationaleEstablishing a standard format and location for the primary institutional menu facilitates attainment of CLF navigation objectives and further enhances communication and identification objectives. ![]() InterpretationThe institutional menu is a key feature in providing service delivery within an individual site. Each GoC site and sub-site will need to adopt terminology on the menu buttons that reflects its specific programs and services, yet some degree of standardization should be applied to enhance over CLF objectives. As it can be anticipated that some similarity in the content of institutional menus will occur from site to site, CLF suggests Web developers should consider including the following standard elements: What's New, Publications / Catalogue, Menu / Contents, Home / Previous / Next, Programs & Services, Index, Submit / Order. The standard requires a consistent look and placement for the primary institutional menu. While institutions are free to choose the colour, number of buttons (up to 10) and content of their primary institutional menu, the size and design must match that of the Common Menu. In addition, the primary institutional menu must be placed directly below the Common Menu. The terminology used on menu buttons should be selected carefully to ensure choices are clear to end-users that may or may not understand the phrases or terminology used internally to reflect programs or services. GoC institutions are free to develop additional secondary menu systems as required. Institutions with many Web sites or many levels of content may need this additional navigation assistance. Such secondary menus should be located in the left column of Content Pages. They may incorporate a more graphic or visually thematic approach to displaying navigation options than is used in the mandatory menu. Secondary menus should be designed with the appropriate attention to accessibility concerns and should visually complement overall Web page layout. While the primary institutional menu should contain links to major subject areas that are institution-wide or major functions not included in the Common Menu, the secondary menu may contain links that are more content specific, such as institutional sub-sites, program and service areas, or lengthy content files. Standard 6.3All GoC Web sites must adopt the following five metatags as a metadata standard for description of Web resources: Title, Originator, Language of Resource, Date and Controlled Subject. Metatag Generator Common Look and Feel Metadata Standard Definitions and HTML Examples META Tag Generator is a tool which accepts user input and will generate HTML code according to the standard which can be pasted into an HTML page. These five metadata elements are part of the 15 element Dublin Core Metadata Element Set, the leading international metadata standard for on-line resource discovery. ![]() RationaleMetadata is a key tool in describing and managing information assets. It is particularly important to have an effective identification system for information assets since many are invisible, hidden in Web sites or databases, until a user initiates a search to find the assets relevant to a current need. Whether we in the public service or our clients in the Canadian public are the searchers, we need an effective way to use the labels on our information assets to find them when we need them. You can see that the chair you are sitting on is a chair without looking at the bar code label, but an electronic document is invisible until its label or its text is found by a search tool. The benefits of using a systematic way of assigning and structuring metadata include:
For more information see: Selecting and Implementing a Metadata Standard for the Government of Canada InterpretationEssentially information about information, metadata is made up of elements that define standard descriptions of information holdings. This CLF standard is based on Dublin Core and requires GoC institutions to describe Internet resources using five mandatory metatags in document headers: Title, Originator, Language of Resource, Date and Controlled Subject. Link: Common Look and Feel Metadata Standard Definitions and HTML Examples The Canada Site includes a Web crawler that indexes departmental sites to create a searchable central index. As departments create metatags to describe their information holdings, the Web crawler will incorporate these records in the central index. The Canada Site search index will be configured to recognize Dublin Core metatags and use them in ranking and displaying results. 6.3 Best PracticesTo complement the use of these mandatory GoC metatags, Web developers should also ensure that the HTML Title element and two HTML meta elements, Description and Keywords are specified. Authors should use the Title element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. The content of the HTML Title tag is displayed as the window header in a Web browser, in bookmarks and in search results. Common search engines may use the contents of the Keywords tag to improve the quality of search results. The contents of the Description tag may be displayed as a summary in search results. The display of these elements is limited in length by browsers and search engines. Departments or Web sites requiring additional metadata elements should use the additional Dublin Core elements as a starting point. In accordance with the Government of Canada Metadata Framework domain specific metadata element sets may be developed with the mandatory Common Look and Feel and additional Dublin Core metadata elements at their core. These guidelines were developed by members of the GOL Metadata working Group during the summer of 2002 and approved at the September 17, 2002 meeting. This document targets departments developing indexing policies for the population of the Common Look and Feel mandatory element <dc.subject>. Two user-friendly web-based guides are now available on the Council of Federal Libraries' site (September 2002) An Implementation Guide
for Metadata Developers offers practical assistance to those responsible for
creating metadata content for federal government Web pages in accordance with the
Common Look and Feel standard. It explains the tasks to be performed, demonstrates
how the required information should be created and directs readers to other
resources. It also provides instructions on how and where to insert the required
source codes into a Web document. How to register a controlled vocabulary or thesaurus for use in dc.subject on federal government Web sites: Registering a Standardized Vocabulary LinksSearch to select subject descriptors: Common Look and Feel Metadata Standard Definitions and HTML Examples Training materials for applying Dublin Core metadata Standard 6.4 (Updated)All Government of Canada Web pages must have a date indicator to inform visitors of the currency of the content and signal that the end of that page has been reached. All currency indicators must use the ISO standard format for all-numeric date display (YYYY-MM-DD) and use at least one of the following date labels: "Date published:", "Date modified:", or "Last updated:". Version Histories
RationaleThe date indicator informs the users of the date of the original posting (issuance or publication) to the Web site or the date of last update (modification) of the resource. Because of its positioning at the bottom of the page, the date indicator can also signal to the users that they have reached the end of that page. As GoC sites are increasingly used to obtain valid, accurate and up-to-date information for personal and professional use, it is vitally important that GoC institutions provide clear date indicators for the resources placed on their Web sites. Including a currency indicator is recognized as an industry best practice that users have come to expect, and use of the ISO standard (YYYY-MM-DD) will enhance conformity among GoC sites. ![]() InterpretationThe standard provides for two kinds of dates: "Date published" and "Date modified". The dates must be represented in the ISO all-numeric date standard YYYY-MM-DD. The two dates are defined as follows: "Date published" is the date of formal issuance (i.e., posting to the Web site) of the resource. "Date modified" is the most recent date on which the document was substantially changed and re-posted to the Web site. "Last updated" is alternative wording. Use of "Date modified" is preferred. Either 'Date published' or 'Date modified' must be used, as applicable in accordance with the definitions above. These definitions are consistent with the Common Look and Feel Metadata Standard Definitions and HTML Examples used in Standard 6.3. Encoding for the date value is defined in a profile of ISO 8601 [W3CDTF] and follows the YYYY-MM-DD format. 6.4 Best PracticesIt is useful to establish a standard marker that signifies users have reached the end of any given Web page. Standard 6.5All GoC Web sites must use only standard 216 Web-safe colours for Web site elements, including menu bars and navigation aids, typography and background, and for simple graphic components. RationaleOnly the 216 Web-safe colour options ensures compatibility with the full range of browsers and platforms available. It also makes good design sense to pick complementary colour schemes that display sufficient contrast for the average user. ![]() InterpretationIn general, the standard requires the use of 216 Web-safe colours in all elements of site design to ensure the highest level of display accuracy across all platforms and systems. Web designers should also be aware that colour choices could seriously hamper the functioning of a Web site. While end-users can control colour elements to suit their needs, picking complementary colour schemes that display sufficient contrast such as black text on a white background, is the best way to avoid creating problems for people with visual and perceptual disabilities. 6.5 Best PracticesBlack text on a white background provides high contrast and utility with respect to on-screen and printed information, and provides numerous accessibility advantages.
Standard 6.6Frames must only be used on GoC sites as an alternative format. RationaleFrames are an example of non-sequential text, which can create interpretation problems for individuals using assistive technologies and for advanced multi-modal systems. Frames present additional problems when trying to ensure that organizational identification and CLF elements remain attached to content when located via search engines. Frames can also prevent users from easily bookmarking specific Web site content. ![]() InterpretationIt is the responsibility of individual Web developers to ensure Web sites are accessible to all citizens. Web page layout is critical to universal accessibility in that some common styles of Web page design actually create barriers for individuals using assistive devices and non-graphical technologies. Such techniques can only be used as an alternative, where universal accessibility has been otherwise guaranteed. Standard 6.7Web analyzer tools must be the standard means of collecting site usage data. Counters must not be used to perform this function. RationaleAs corporate investment in Web site development and maintenance continues to rise, many organizations rely on statistics regarding site usage to measure associated costs and benefits. Some use simple counters, or others use more sophisticated Web analyzer tools to obtain data. Counters add little value to a site and often appear to be self-congratulatory. Web analyzer tools provide more information and are virtually transparent to the end user. Standard 6.8All GoC institutions must apply HTML validators to existing Web sites to assess accessibility status and HTML validations must be applied to new GoC sites prior to posting. RationaleAll sites must be tested with a variety of browser software to ensure Web page layout remains intact regardless of what platforms end-users employ. These include graphic as well as character-based browsers. Testing should focus on ease of use, navigation, screen layout, comprehension and user satisfaction. Sites should also be tested with the graphics option turned off, as many users prefer this option as a means of accelerating document downloading. Web developers need to be aware that various hardware and software platforms can all significantly alter the appearance of a site, especially colour in graphics and backgrounds. Validating HTML pages - on both existing and future sites - against a DTD will ensure they are syntactically correct. It should be noted that not all HTML editors are capable of performing this function, and that some are only effective in validating a vendor's proprietary DTD. From: http://www.w3.org/TR/WAI-WEBCONTENT/#validation ![]() ValidationValidate accessibility with automatic tools and human review. Automated methods are generally rapid and convenient but cannot identify all accessibility issues. Human review can help ensure clarity of language and ease of navigation. Begin using validation methods at the earliest stages of development. Accessibility issues identified early are easier to correct and avoid. Following are some important validation methods, discussed in more detail in the section on validation in the Techniques Document. 1. Use an automated accessibility tool and browser validation tool. Please note that software tools do not address all accessibility issues, such as the meaningfulness of link text, the applicability of a text equivalent, etc. 2. Validate syntax (e.g., HTML, XML, etc.). 3. Validate style sheets (e.g., CSS). 4. Use a text-only browser or emulator. 5. Use multiple graphic browsers, with:
6. Use several browsers, old and new. 7. Use a self-voicing browser, a screen reader, magnification software, a small display, etc. 8. Use spell and grammar checkers. A person reading a page with a speech synthesizer may not be able to decipher the synthesizer's best guess for a word with a spelling error. Eliminating grammar problems increases comprehension. 9. Review the document for clarity and simplicity. Readability statistics, such as those generated by some word processors may be useful indicators of clarity and simplicity. Better still, ask an experienced (human) editor to review written content for clarity. Editors can also improve the usability of documents by identifying potentially sensitive cultural issues that might arise due to language or icon usage. 10. Invite people with disabilities to review documents. Expert and novice users with disabilities will provide valuable feedback about accessibility or usability problems and their severity. Guideline 6.1Guidelines are not mandatory with respect to this policy but are provided to help institutions carry out government policy efficiently and effectively. All GoC
Web sites should incorporate Cascading Style Sheets
(CSS) or similarly sized tables to achieve consistent presentation of content.
W3C Cascading Style Sheets,
W3C CSS Validator
RationaleEffective design results from careful consideration of several elements: colour, space, imagery, typography and layout. While Web technologies offer new opportunities for creativity, there are distinct benefits to be gained in communication, identification, navigation and content through standardization of some design elements. When applied across a large group of related Web sites, design standards increase visual recognition by end-users and lead to stronger associations between various GoC institutions. In keeping with good design principles, the common look and feel Web page layout guidelines observe practices developed to maintain consistent, professional and highly cognitive relationships between all elements on each Web page. ![]() InterpretationEffective use of space is crucial to good information design. Effective use of white space in the left-hand column, along with a fixed width for content space, reinforces visual recognition of GoC sites. Consistent use of labels, line width, Web page layout, etc., will further enhance visual recognition of GoC sites and make it easy for users to locate exactly what they are looking for. Carefully coded Cascading Style Sheets are the most efficient means of achieving this standard, but simply coded tables may also be used to establish placement of elements. Best PracticesLayout and presentationOnce a majority of users use browsers that support CSS-2, the following style sheet techniques should be used to control layout and presentation.
Until then tables (to control layout) and bit-mapped text (for special text effects) may be used with alternative pages as necessary. http://www.w3.org/WAI/GL/19980624txt.htm Use Cascading Style Sheets only where the CSS techniques in question are known to have adequate browser support. Each new release of the major graphical browsers include more and better support for the CSS guideline. Many CSS commands especially for font effects, simple margins etc., have been well supported since level 4 graphical browsers. More advanced CSS support is being developed. CSS markup should be used to replace the deprecated <FONT> tag in any case. Following these 6 steps should minimize the need for testing multiple platform / browser combinations and will ensure your content is served.
The following CLF standards have both navigation and format and official languages implications. Their navigation and format characteristics are described below. The Official Languages considerations are fully described in Section 7, Official Languages.Standard 7.1All GoC institutions must register their gc.ca domain names using at least one of the two following domain name conventions. (a) a name or acronym that represents the institution's primary purpose in both official languages, e.g. www.canada.justice.gc.ca, www.ic.gc.ca (b) 2 acronyms or names- one with the English first, the other giving prominence to the French, e.g. pco-bpc.gc.ca and bpc-pco.gc.ca and space-spatial.gc.ca spatial-space.gc.ca
Institutions may also register equivalent unilingual English and French versions of a name, or the acronym thereof, if they wish or need to use those on unilingual content pages (i.e., pco.gc.ca on English content pages and bcp.gc.ca on the French content pages) or when publishing information in unilingual media, e.g., in English or French magazines or newspapers. RationaleJust as government telephone numbers across the country are easily recognized by the '9' at the front of the prefix, the CLF standard to adopt a single domain name seeks to establish a similar identifier for GoC on the Internet. Domain names are vital to end-users. The domain name is the highest level reference to an individual site. If they know the exact domain name, users can effectively 'direct dial' to the information they want. In addition to acting as gateways to information and services, Web sites are key elements of marketing, promotional and information materials. A common domain name will further enhance federal identity, presence and visibility. Bringing all GoC sites into a single domain will improve public recognition and make it easier for individuals to remember domain names they use on a regular basis. The standardization may also increase their chances of finding a site they have not previously visited. Informal surveys suggest Canadians are beginning to associate the gc.ca domain with the GoC. Standard 7.2All GoC Web sites must incorporate Welcome Pages at the main point of entry to the site. Each Welcome Page must incorporate three key elements: the "Canada" wordmark, the institutional signature and the language choice buttons except on unilingual Web sites where a content button must be provided. See Policy on using the official languages on electronic networks, which sets out requirements for bilingual sites as well as for unilingual sites, with a special disclaimer and hyperlink requirement for the latter, see Standard 7.4. If Welcome Pages are used at a sub-site level, they must conform to the above requirements. All elements of each Welcome Page must be viewable without scrolling in a 640 by 480 pixel screen. RationaleWelcome Pages are key to initial communication, identification and navigation on all GoC Web sites, and must therefore be designed to facilitate these functions. The standard single screen size ensures all necessary elements are viewable without scrolling and provides immediate access to the full content of any Welcome Page. While the centre area of any Welcome Page is left open for customisation to suit the needs of the institution (or its programs and services), standardization of the screen size and placement of mandatory elements will enhance visual consistency across all GoC sites. Standard 7.3All Web pages on all GoC Web sites must incorporate the "Canada" wordmark and the institutional signature using high quality reproductions in terms of accuracy, colour and resolution. (a) The "Canada" wordmark must appear in the lower right display area on Welcome Pages and in the upper right display area on Content Pages. (b) The institutional signature must appear in the upper left display on both Welcome and Content pages. On the Welcome page of a site, the order of the official languages is dictated by the location of the office providing the service through the site in question, i.e., English on the left for offices located outside of Quebec and French on the left for offices located inside Quebec. RationaleStandards for the size, placement and prominence of the "Canada" wordmark and FIP institutional signatures at the initial point of entry to GoC sites (the Welcome Page), and on all additional Web pages, foster visual recognition of individual institutions and increases the recognition of their links to the GoC. Consistent use of standard federal identifiers will ensure any area of any site can be easily identified as belonging to the Government of Canada, and will indicate that the information has been provided by a GoC institution. FIP identifiers also serve to assure users that the information is being appropriately used in the intended context. |
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
![]() |
||||||
|
![]() Top of Page |
Important Notices |