Technical specifications for the Web and mobile presence

Table of contents

Introduction

This document is a companion to the Standard on Web Usability and to the Standard on Optimizing Websites and Applications for Mobile Devices. It describes how to optimize websites and Web applications for mobile devices, as well as the layout and design specifications for websites, Web applications and device-based mobile applications. This ensures that Government of Canada websites, Web applications and device-based mobile applications are recognizable, easy to use and optimized for a wide variety of devices, such as smart phones (small device screens), tablets (medium device screens) and desktop computers (large device screens).

Terms used in this document

In this document:

  • Device screen refers to the physical screen of a device used to view a page/screen.
  • Page/screen refers to the entire canvas upon which the elements of the site/application are laid out.
  • Viewport refers to the window through which the page/screen is viewed.

How to use this document

If designing a website or a Web application, implement all of the following specifications:

If designing a device-based mobile application, implement all of the following specifications:

Images, icons and other graphical elements

The images, icons and other graphical elements mentioned in this document are distributed as part of the GC Web Usability theme of the Web Experience Toolkit.

Standardized terms

A list of standardized terms, in both official languages is available in Appendix A: Standardized terms.

Optimizing websites and Web applications for mobile devices

Websites and Web applications are optimized for mobile devices by:

  1. Adapting the layout and design of websites and Web applications for small, medium and large screen sizes, and for different input methods, such as touch input and keyboard and mouse input. This can be accomplished by implementing the Web Experience Toolkit.
  2. Designing the content and interface of websites and Web applications for small, medium and large screen sizes and for different input methods, such as touch input and keyboard and mouse input.

Layout and design specifications for small device screens

The specifications for small device screens are applied when:

  • the screen (media query device-width) is less than 768 pixels wide; or
  • the viewport (media query width) is less than 768 pixels wide.

1. Content pages/screens

Content page/screen showing all elements described in Section 1. Content pages/screens.

Each content page/screen contains the Government of Canada navigation bar, the site/application title, the page/screen title and a body.

Dimensions:

  • Width: 100% (full width of the viewport).

1.1. Government of Canada navigation bar

The Government of Canada navigation bar contains the Canada Wordmark and home, back, menu, search and settings buttons.

Location:

  • Aligned vertically with the top edge of the page/screen.

Dimensions:

  • Width: 100% (full width of the page/screen).

Presentation:

  • Background colour: Top-to-bottom linear gradient from #3c3c3c to #111.
1.1.1. Canada Wordmark

Location:

  • Aligned horizontally with the left edge of the Government of Canada navigation bar.
  • Centred vertically.

Dimensions:

  • Width: 90 pixels.
  • Height: 22 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Transparent.
  • White flag symbol.
  • Text equivalent: "Symbol of the Government of Canada".
  • Image: wmms.
1.1.2. Home button
Content page/screen with the home button omitted as described in the exceptions for Section 1.1.2. Home button.

Location:

  • When the menu button is present: Aligned horizontally with the left edge of the menu button.
  • When the menu button is omitted and the search button is present: Aligned horizontally with the left edge of the search button.
  • When both the menu button and the search button are omitted: Aligned horizontally with the left edge of the settings button.

Dimensions:

  • Width: 46 pixels.
  • Height: 32 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Icon: House (House icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Home".

Behaviour:

  • Activating the home button returns the user to the home page/screen.

Exceptions:

The home button is omitted when:

  • The page/screen is the home page/screen.
  • The back button is present.
  • Activating the home button is likely to cause user error or loss of data, for example, in a transactional workflow.
  • The site/application does not have a home page/screen.
  • The site/application is a single-page/screen site/application.
1.1.3. Back button
Content page/screen with the home button replaced with a back button as described in Section 1.1.3. Back button.

Location:

  • When the menu button is present: Aligned horizontally with the left edge of the menu button.
  • When the menu button is omitted and the search button is present: Aligned horizontally with the left edge of the search button.
  • When both the menu button and the search button are omitted: Aligned horizontally with the left edge of the settings button.

Dimensions:

  • Width: 46 pixels.
  • Height: 32 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Icon: Back arrow (Back arrow icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Back."

Behaviour:

  • Activating the back button return the user to the previously-viewed page/screen.

Exceptions:

The back button is omitted when:

  • There is no previously-viewed page/screen.
  • The home button is present.
  • Activating the back button is likely to cause user error or loss of data, for example, in a transactional workflow.
  • The site/application is a single-page/screen site/application.
1.1.4. Menu button
Content page/screen with the menu button omitted as described in the exceptions for Section 1.1.4. Menu button.

Location:

  • When the search button is present: Aligned horizontally with the left edge of the search button.
  • When the search button is omitted: Aligned horizontally with the left edge of the settings button.

Dimensions:

  • Width: 46 pixels.
  • Height: 32 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Icon: Three bars (Three bars icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Menu."

Behaviour:

  • Activating the menu button displays the navigation overlay.

Exceptions:

The menu button is omitted when:

  • Navigation is provided in the body.
  • Activating a menu item is likely to cause user error or loss of data, for example, in a transactional workflow.
  • The site/application is a single-page/screen site/application.
1.1.5. Search button
Content page/screen with the search button omitted as described in the exceptions for Section 1.1.5. Search button.

Location:

  • Aligned horizontally with the left edge of the settings button.

Dimensions:

  • Width: 46 pixels.
  • Height: 32 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Icon: Magnifying glass (Magnifying glass icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Search".

Behaviour:

  • Activating the search button displays the search overlay.

Exceptions:

The search button is omitted when:

  • Search is not a function of the site/application.
  • Search is a primary function of the site/application and is provided in the body.
  • Activating a search is likely to cause user error or loss of data, for example, in a transactional workflow.
1.1.6. Settings button
Content page/screen with only the settings button displayed as described in the exceptions for the subsections of Section 1. Content pages/screens.

Location:

  • Aligned horizontally with the right edge of the Government of Canada navigation bar.

Dimensions:

  • Width: 46 pixels.
  • Height: 32 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Icon: Cog (Cog icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Settings".

Behaviour:

  • Activating the settings button displays the settings menu.

1.2. Site/application title

Content page/screen with the site/application title omitted as described in the exceptions for Section 1.2. Site/application title.

Location:

  • Aligned vertically with the bottom edge of the Government of Canada navigation bar.

Dimensions:

  • Width: 100% (full width of the page/screen).

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #6facd5 to #497bae.
  • Font: Verdana, sans-serif.
  • Font size: 19.2 pixels.
  • Text: The title of the site/application.

Exceptions:

The site/application title is omitted when:

  • The page/screen cannot be accessed without first going through another page/screen of the site/application which displays the site/application title.

Device-based mobile applications also omit the application title when:

  • The device-based mobile application is launched by activating the application icon for the device-based mobile application, if the application title is displayed in conjunction with the application icon.

1.3. Page/screen title

Content page/screen with the site/application and page/screen titles omitted as described in the exceptions for sections 1.2. Site/application title and 1.3. Page/screen title.

Location:

  • When the site/application title is present: Aligned vertically with the bottom edge of the site/application title.
  • When the site/application title is omitted: Aligned vertically with the bottom edge of the Government of Canada navigation bar.

Dimensions:

  • Width: 100% (full width of the page/screen).

Presentation:

  • Foreground colour: Black (#000).
  • Border: bottom only; 1 pixel dotted #ccc.
  • Font: Verdana, sans-serif.
  • Font size: 21.76 pixels.
  • Text: The title of the page/screen.

Exceptions:

  • The site/application is a single-page/screen site/application.

1.4. Body

The body contains the contents/interface for the site/application.

Location and Dimensions:

  • The body occupies all the page/screen real estate not used by the Government of Canada navigation bar, the site/application title and the page/screen title. When the site/application title or the page/screen title are omitted the body expands to occupy the unused space.

Presentation:

  • Background colour: White (#fff).
  • Font: Verdana, sans-serif.
  • Font size: At least 16 pixels.

2. Server message pages/screens

Unilingual server message page/screen as described in Section 2. Server message pages/screens.

The server message page/screen contains the site/application title and a body.

If the user's language can be determined, the server message is provided only in the user's language. If the user's language cannot be determined, the server message is provided in each language in which the site/application is available.

2.1. Site/application title

The site/application title is displayed in each language in which the server message is provided.

Location:

  • First official language: Aligned vertically with the top edge of the screen/page.
  • Second official language: Aligned vertically with the bottom edge of the site/application title in the first official language.
  • Additional languages: Aligned vertically with the bottom edge of the previous site/application title.

Presentation:

  • Foreground colour: #295376.
  • Background colour: White (#fff).
  • Font: Verdana, sans-serif.
  • Font size:
    • First and second official languages: 19.2 pixels.
    • Additional languages: 15.3667 pixels.
  • Text:
    • First official language: The title of the site/application in the first official language.
    • Second official language: The title of the site/application in the second official language.
    • Additional languages: The title of the site/application in the additional language and in its native alphabet.
  • Border:
    • After the last site/application title: bottom-only; 1 pixel solid #666.

2.2. Body

The body contains a server message block and a terms and conditions link in each language in which the server message is provided and the Canada Wordmark.

2.2.1. Server message blocks

Each server message block contains a server message title, a server message body and links to the home page and the contact information.

Location:

  • First official language: Aligned vertically with the bottom edge of the last site/application title.
  • Second official language: Aligned vertically with the bottom edge of the server message block in the first official language.
  • Additional languages: Aligned vertically with the bottom edge of the previous server message block.

Dimensions:

  • Width: 100% (full width of the page/screen).
2.2.1.1. Server message title

Location:

  • Aligned vertically with the top edge of the server message block.
  • Aligned horizontally with the left edge of the server message block.

Presentation:

  • Text: The title of the server message in the language of the server message block and in its native alphabet.
2.2.1.2. Server message body

Location:

  • Aligned vertically with the bottom edge of the server message title.
  • Aligned horizontally with the left edge of the server message block.

Presentation:

  • Text: The body of the server message in the language of the server message block and in its native alphabet.
2.2.1.3. Home link

Location:

  • Below the message body.
  • Aligned horizontally with the left edge of the server message block.

Presentation:

  • Text: "Home" in the language of the server message block and in its native alphabet.

Behaviour:

  • Activating the home link returns the user to the home page/screen.

Exceptions:

  • The site/application does not have a home page/screen.
  • The site/application is a single-page/screen site/application.
2.2.1.4. Contact information link

Location:

  • Below the home link.
  • Aligned horizontally with the left edge of the server message block.

Presentation:

  • Text: "Contact us" in the language of the server message block and in its native alphabet.

Behaviour:

  • Activating the contact information link takes the user to the contact information.
2.2.2. Terms and conditions link

The terms and conditions link is displayed in each language in which the server message is provided.

Location:

  • First official language: Aligned vertically with the bottom edge of the last server message block.
  • Second official language: Aligned vertically with the bottom edge of the terms and conditions link in the first official language.
  • Additional languages: Aligned vertically with the bottom edge of the previous terms and conditions link.
  • Aligned horizontally with the left edge of the page/screen.

Presentation:

  • Text:
    • First official language: "Terms and conditions" in the first official language.
    • Second official language: "Terms and conditions" in the second official language.
    • Additional languages: "Terms and conditions" in the additional language and in its native alphabet.

Behaviour:

2.2.3. Canada Wordmark

Location:

  • Below the last terms and conditions link.
  • Centred horizontally.

Dimensions:

  • Width: 90 pixels.
  • Height: 22 pixels.

Presentation:

  • Foreground colour: Black (#000).
  • Background colour: White (#fff).
  • Black text and FIP red flag symbol.
  • Text equivalent: "Symbol of the Government of Canada".
  • Displayed as a block-level element.
  • Image: wmms.

3. Splash pages/screens

Bilingual splash page/screen as described in Section 3. Splash pages/screens.

Splash pages/screens contain the welcome banner, a site/application title block, a language links block, a terms and conditions links block and the Canada Wordmark.

Dimensions:

  • Width: 100% (full width of the page/screen).

Presentation:

  • Background colour: White (#fff).

Exceptions:

  • Websites and Web applications that have a unilingual website addresses do not implement splash pages.
  • Device-based mobile applications implement application launch screens instead of splash screens.

3.1. Welcome banner

Location:

  • Aligned vertically with the top edge of the page/screen.
  • Aligned horizontally with the left edge of the page/screen.

Dimensions:

  • Width: 100% (full width of the page/screen).
  • Height: 189 pixels.

Presentation:

  • Foreground colour: Black (#000).
  • Background image: splashpage-background.jpg.
  • Text: "Welcome / Bienvenue".

3.2. Site/application title block

The site/application title block contains the site/application title in each language in which the site/application is available.

Location:

  • Below the welcome banner.

Presentation:

  • Foreground colour: Black (#000).
3.2.1. Site/application title in the first official language

Location:

  • Aligned vertically with the top edge of the site/application title block.
  • Aligned horizontally with the left edge of the site/application title block.
  • On the same baseline as the site/application title in the second official language.

Presentation:

  • Text: The title of the site/application in the first official language.
  • Alignment: Left-aligned.
3.2.2. Site/application title in the second official language

Location:

  • Aligned vertically with the top edge of the site/application title block.
  • Aligned horizontally with the right edge of the site/application title block.
  • On the same baseline as the site/application title in the first official language.

Presentation:

  • Text: The title of the site/application in the second official language.
  • Alignment: Right-aligned.
3.2.3. Site/application titles in additional languages

Location:

  • Below the site/application title in the first and second official languages.
  • First, third and subsequent odd-numbered additional language:
    • Aligned horizontally with the left edge of the site/application title block.
    • On the same baseline as the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • Aligned horizontally with the right edge of the site/application title block.
    • On the same baseline as the previous odd-numbered additional language.

Presentation:

  • Text: The title of the site/application in the additional language and in its native alphabet.
  • Alignment:
    • First, third and subsequent odd-numbered additional language: Left-aligned.
    • Second, fourth and subsequent even-numbered additional language: Right-aligned.

3.3. Language links block

The language links block contains links to each language version of the site/application.

Location:

  • Below the site/application title block.
3.3.1. Language link for the first official language

Location:

  • Aligned vertically with the top edge of the language links block.
  • Aligned horizontally with the left edge of the language links block.
  • On the same baseline as the language link for the second official language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Text: The official name of the first official language in its native language and alphabet.
3.3.2. Language link for the second official language

Location:

  • Aligned vertically with the top edge of the language links block.
  • Aligned horizontally with the right edge of the language links block.
  • On the same baseline as the language link for the first official language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Text: The official name of the second official language in its native language and alphabet.
3.3.3. Language link for additional languages

Location:

  • Below the language links for the first and second official languages.
  • First, third and subsequent odd-numbered additional language:
    • Aligned horizontally with the left edge of the language links block.
    • On the same baseline as the language link for the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • Aligned horizontally with the right edge of the language links block.
    • On the same baseline as the language link for the previous odd-numbered additional language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Text: The official name of the first official language in its native language and alphabet.

3.4. Terms and conditions links block

The terms and conditions block contains links to the terms and conditions for each language in which the site/application is available.

Location:

  • Below the language links block.
3.4.1. Terms and conditions link for the first official language

Location:

  • Aligned vertically with the top edge of the terms and conditions links block.
  • Aligned horizontally with the left edge of the terms and conditions links block.
  • On the same baseline as the terms and conditions link for the second official language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
  • Text: "Terms and conditions" in the first official language and in its native alphabet.
3.4.2. Terms and conditions link for the second official language

Location:

  • Aligned vertically with the top edge of the terms and conditions links block.
  • Aligned horizontally with the right edge of the terms and conditions links block.
  • On the same baseline as the terms and conditions link for the first official language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
  • Text: "Terms and conditions" in the second official language and in its native alphabet.
3.4.3. Terms and conditions link for additional languages

Location:

  • Below the terms and conditions links for the first and second official languages.
  • First, third and subsequent odd-numbered additional language:
    • Aligned horizontally with the left edge of the terms and conditions links block.
    • On the same baseline as the terms and conditions link for the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • Aligned horizontally with the right edge of the terms and conditions links block.
    • On the same baseline as the terms and conditions link for the previous odd-numbered additional language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
  • Text: "Terms and conditions" in the additional language and in its native alphabet.

3.5. Canada Wordmark

Location:

  • Aligned vertically with the bottom edge of the page/screen.
  • Centred horizontally.

Dimensions:

  • Width: 90 pixels.
  • Height: 22 pixels.

Presentation:

  • Foreground colour: Black (#000).
  • Background colour: White (#fff).
  • Black text and FIP red flag symbol.
  • Text equivalent: "Symbol of the Government of Canada".
  • Displayed as a block-level element.
  • Image: wmms.

4. Content overlays

Each content overlay is displayed over the page/screen and contains a title bar and a body. Content overlays are used to present content such as full-screen images and videos or contextual help.

4.1. Title bar

The title bar contains the title and the back and close buttons.

Location:

  • Aligned vertically with the top edge of the content overlay.

Dimensions:

  • Width:
    • When the content overlay title is present: 100% (full width of the content overlay).
    • When the content overlay title is omitted: The width of the close button.

Presentation:

  • Background colour: Top-to-bottom linear gradient from #3c3c3c to #111.
4.1.1. Title

Location:

  • Centred horizontally and vertically.

Dimensions:

  • Width: The width of the title bar less the width of the back and close buttons.

Presentation:

  • Foreground colour: White (#fff).
  • Single-line, no wrapping.
  • Overflow: ellipsis.

Exceptions:

The title is omitted when:

  • It contains a single element, for example, a map, a photograph or a video.
4.1.2. Back button

Location:

  • Aligned horizontally with the left edge of the title bar.

Dimensions:

  • Width: 18 pixels.
  • Height: 18 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Transparent.
  • Icon: Back arrow (Back arrow icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Back."

Behaviour:

  • Activating the back button returns the user to the content overlay or menu from which the content overlay was launched.

Exceptions:

The back button is omitted when:

  • The content overlay was not launched from a content overlay or menu.
  • The result of activating the back button is the same as the result of activating the close button.
4.1.3. Close button

Location:

  • Aligned horizontally with the right edge of the title bar.

Dimensions:

  • Width: 18 pixels.
  • Height: 18 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Transparent.
  • Icon: X (X icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Close".

Behaviour:

  • Activating the close button removes the content overlay from view.

4.2. Body

Location:

  • Aligned vertically with the bottom edge of the title bar.

Dimensions:

  • Width: Up to 100% of the width of the viewport.

Presentation:

  • When the contents are wider than the viewport, the contents:
    • are resized to accommodate the width; or
    • scroll horizontally.

Behaviour:

  • The body grows or shrinks to accommodate its contents.

5. Menus

Menu with the back button omitted as described in Section 5. Menus and the exceptions in Section 5.1.2. Back button.

Each menu is displayed over the page/screen and contains a title bar and a body.

5.1. Title bar

The title bar contains the title and the back and close buttons.

Location:

  • Aligned vertically with the top edge of the menu.

Dimensions:

  • Width:
    • When the menu title is present: 100% (full width of the menu).
    • When the menu title is omitted: The width of the close button.

Presentation:

  • Background colour: Top-to-bottom linear gradient from #3c3c3c to #111.
5.1.1. Title

Location:

  • Centred horizontally and vertically.

Dimensions:

  • Width: The width of the title bar less the width of the back and close buttons.

Presentation:

  • Foreground colour: White (#fff).
  • Single-line, no wrapping.
  • Overflow: ellipsis.
5.1.2. Back button
Menu with the back button displayed as described in Section 5.1.2. Back button.

Location:

  • Aligned horizontally with the left edge of the title bar.

Dimensions:

  • Width: 18 pixels.
  • Height: 18 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Transparent.
  • Icon: Back arrow (Back arrow icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Back."

Behaviour:

  • Activating the back button return the user to the previous level of menu.

Exceptions:

The back button is omitted when:

  • There is no previous level of menu.
5.1.3. Close button

Location:

  • Aligned horizontally with the right edge of the title bar.

Dimensions:

  • Width: 18 pixels.
  • Height: 18 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Transparent.
  • Icon: X (X icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Close".

Behaviour:

  • Activating the close button closes all open menus.

5.2. Body

Location:

  • Aligned vertically with the bottom edge of the title bar.

Dimensions:

  • Width: Up to 100% of the width of the viewport.

Behaviour:

  • The body grows or shrinks to accommodate its contents.
5.2.1. Menu items

Location:

  • If it is the first item in the menu's body: Aligned vertically with the bottom edge of the title bar.
  • If it is the second or subsequent item in the menu: Aligned vertically with the bottom edge of the previous menu item.

Dimensions:

  • Width:
    • When the menu body contains only menu items: 100% (full width of the menu).
    • When the menu body contains menu items and other elements: 100% (full width of the body).

Presentation:

  • Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.

Behaviour:

  • Activating a menu item displays either a sub-menu, a page/screen or a content overlay.

6. Navigation overlay

Navigation overlay as described in Section 6. Navigation overlay.

The navigation overlay is identical to the content overlay, except for the following differences.

6.1. Title bar

6.1.1. Title

Presentation:

  • Text: "Menu".

6.2. Body

The body of the navigation overlay contains the breadcrumb navigation, the secondary navigation and the site/application navigation.

6.2.1. Breadcrumb navigation

The breadcrumb navigation contains horizontal list starting with a home link, followed by links to each of the pages/screens above the current page/screen in the site/application's hierarchy, and ending with the title of the current page/screen.

Location:

  • Aligned vertically with the top edge of the body.

Presentation:

  • Foreground colour:
    • Breadcrumb links: #295376.
    • Current page/screen: #555.
  • Background colour: Top-to-bottom linear gradient from #f0efef to #dfdfdd.
  • Text:
    • Home breadcrumb link: "Home".
    • Breadcrumbs links and current page/screen: The title of the corresponding page/screen.
  • Separator: bcrumb-mobile.png.

Behaviour:

  • Home breadcrumb link:
    • Activating the home link returns the user to the home page/screen.
  • Subsequent breadcrumb links:
    • Activating the breadcrumb link takes the user to the corresponding page/screen.

Exceptions:

The breadcrumb navigation is omitted when:

  • The page/screen is the home page/screen.
  • Activating a breadcrumb item is likely to cause user error or loss of data, for example, in a transactional workflow.
6.2.2. Secondary navigation

Location:

  • When the breadcrumb navigation is present: Below the breadcrumb navigation.
  • When the breadcrumb navigation is omitted: At the top of the body.

Dimensions:

  • 100% of the width of the body.

Exceptions:

The secondary navigation is omitted when:

  • It is not used by the site/application.
6.2.3. Site/application navigation

Location:

  • When the secondary navigation is present: Below the secondary navigation.
  • When the secondary navigation is omitted and the breadcrumb navigation is present: Below the breadcrumb navigation.
  • When both the secondary navigation and the breadcrumb navigation are omitted: At the top of the body.

Dimensions:

  • 100% of the width of the body.

Exceptions:

The site/application navigation is omitted when:

  • It is not used by the site/application.

7. Search overlay

Search overlay as described in Section 7. Search overlay.

The search overlay is identical to the content overlay, except for the following differences.

7.1. Title bar

7.1.1. Title

Presentation:

  • Text: "Search".

7.2. Body

The body contains a search input field and a search button.

7.2.1. Search input field

Location:

  • Aligned vertically with the bottom edge of the title bar; centred horizontally.

Dimensions:

  • Width: 100% of the width of the body.
  • Height: 31 pixels.

Presentation:

  • Label: "Search".
7.2.2. Search button

Location:

  • Aligned vertically with the bottom edge of the search input field.
  • Aligned horizontally with the right edge of the body.

Dimensions:

  • Width: 100% of the width of the body.
  • Height: 39 pixels.

Presentation:

  • Foreground colour: Black (#000).
  • Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
  • Text: "Search".

Behaviour:

8. Settings menu

Settings menu as described in Section 8. Settings menu.

The settings menu is identical to the menu, except for the following differences.

8.1. Title bar

8.1.1. Title

Presentation:

  • Text: "Settings".

8.2. Body

The body contains menu items for:

  • The sign-in/sign-out.
  • The language menu.
  • The site/application's user-modifiable settings (other than language).
  • The about information overlay.
8.2.1. Sign-in/sign-out menu item

The sign-in/sign-out menu item is identical to a menu item, except for the following differences.

Presentation:

  • Text:
    • When the user is signed-in: "Sign out".
    • When the user is signed-out: "Sign in".

Behaviour:

  • When the user is signed-in: Activating the sign-in/sign-out menu item signs the user out of the site/application.
  • When the user is signed-out: Activating the sign-in/sign-out menu item allows the user to sign in of the site/application.

Exceptions:

The sign-in/sign-out mechanism is omitted when:

  • The site/application does not require the user to sign-in to use it.
8.2.2. Language menu menu item

The language menu menu item is identical to a menu item, except for the following differences.

Presentation:

  • Text: "Language".

Behaviour:

  • Activating the language menu item displays the language menu.

Exceptions:

The language menu menu item is omitted when:

  • Changing the language is likely to cause user error or loss of data, for example, in a transactional workflow.
8.2.3. User-modifiable setting menu items

User-modifiable setting menu items are identical to menu items, except for the following differences.

Behaviour:

  • Activating a user-modifiable setting menu item either displays a sub-menu, a page/screen or a content overlay, or toggles or changes a setting.
8.2.4. About information overlay menu item

The about information overlay menu item is identical to a menu item, except for the following differences.

Presentation:

  • Text: "About"

Behaviour:

  • Activating the about information overlay menu item displays the about information overlay.

9. Language menu

Language menu as described in Section 9. Language menu.

The language menu is identical to a menu, except for the following differences.

9.1. Title bar

9.1.1. Menu title

Presentation:

  • Text: "Language".

9.2. Body

The language menu body contains a menu item for each language in which the site/application is available.

9.2.1. Language menu items

Each language menu item is identical to a menu item, except for the following differences.

Presentation:

  • Text: The name of the language in its native language and alphabet.

Behaviour:

On websites and in Web applications:

  • Activating a language menu item changes the language of the site/application to the selected language.

In device-based mobile applications:

  • Activating a language menu item either changes the language of the device-based mobile application to the selected language or displays the instructions for obtaining the device-based mobile application in the selected language if the selected language is not installed.

10. About information overlay

About information overlay as described in Section 10. About information overlay.

The about information overlay is identical to a content overlay, except for the following differences.

10.1. Title bar

10.1.1. Title

Presentation:

  • Text: "About".

10.2. Body

The about information overlay body contains the site/application title, the version identifier, links to the notices and the about us, contact us, news and stay connected links.

10.2.1. Site/application title

Location:

  • Aligned vertically with the bottom edge of the title bar.
  • Aligned horizontally with the left edge of the body.
10.2.2. Version identifier

Location:

  • Below the site/application title.
  • Aligned horizontally with the left edge of the body.

Exceptions:

The version identifier is omitted when:

  • A date of last modification is provided.
10.2.3. Terms and conditions link

Location:

  • Below the version identifier
  • Aligned horizontally with the left edge of the body.

Behaviour:

10.2.4. Transparency link

Location:

  • Below the terms and conditions link.
  • Aligned horizontally with the left edge of the body.

Behaviour:

Website and Web applications:

  • Activating the transparency link takes the user either to the department's main transparency page/screen or, where the site/application is not departmental, to the Government-wide Reporting page on the Treasury Board of Canada Secretariat website.
10.2.5. About us link

Location:

  • Below the links to the notices.
  • Aligned horizontally with the left edge of the body.

Presentation:

  • Text: "About us".

Behaviour:

  • Activating the about us link displays information about the site/application.
10.2.6. Contact us link

Location:

  • Below the about us link.
  • Aligned horizontally with the left edge of the body.

Presentation:

  • Text: "Contact us".

Behaviour:

  • Activating the contact us link displays the contact information for the site/application.
10.2.7. News link

Location:

  • Below the contact us link.
  • Aligned horizontally with the left edge of the body.

Presentation:

  • Text: "News"

Behaviour:

  • Activating the news link displays media products, such as press releases.

Exceptions:

The news link is omitted when:

  • The site/application does not release media products, such as press releases.
10.2.8. Stay connected link

Location:

  • Below the news link.
  • Aligned horizontally with the left edge of the body.

Presentation:

  • Text: "Stay connected"

Behaviour:

  • Activating the stay connected link displays social media, email subscription and/or Web feeds.

Exceptions:

The stay connected link is omitted when:

  • The site/application does not have social media, email subscriptions or Web feeds.

Layout and design specifications for medium device screens

The specifications for medium device screens are applied when:

  • the screen (media query device-width) is at least 768 pixels wide and less than 1024 pixels wide; or
  • the viewport (media query width) is at least 768 pixels wide and less than 960 pixels wide.

On medium screens, the view for small screens is applied with the following exceptions:

Layout and design specifications for large device screens

The specifications for large device screens are applied when:

  • the screen (media query device-width) is at least 1024 pixels wide; and
  • the viewport (media query width) is at least 960 pixels wide.

The pixel measurements and positions in the following layout specifications are relative to the inner and outer boundaries. These are 960 pixels for the inner width and 100% of the screen's width for the outer width.

11. Content pages

Content page with all elements displayed as described in Section 11. Content pages.

Each Web page contains the following common visual elements and structured into three main areas: header, body and footer.

11.1. Header

The header includes the background image, the Government of Canada navigation bar, the Government of Canada signature, the site/application title, the Canada Wordmark, search and the navigation bar.

Presentation:

  • Background colour: White (#fff).
  • Background image: background-withglow-andleaf.jpg), centred, 40 pixels from the top edge of the Web page, repeats horizontally.
11.1.1. Government of Canada navigation bar

The Government of Canada navigation bar is located at the top of the header and includes header links and official language selection.

Dimensions:

  • Height when using the Government of Canada signature: 41 pixels.
  • Height when using the Arms of Canada signature: 65 pixels.

Presentation:

  • 13 pixels below the top boundary of the Government of Canada navigation bar
  • Background (outer width): black (#000) for the colour
  • Canada.ca, Services, Departments ("Ministères"), and official language selection link are displayed from left to right, 10 pixels to the left of the inner right boundary of the Government of Canada navigation bar
  • Each link is separated by a white (#fff) vertical bar with 13 pixels of space on each side of the vertical bar.
  • Font: 9 point Verdana
  • Foreground: white (#fff)
  • Text is vertically centred in the Government of Canada navigation bar.
  • Confirmation is requested from the user if switching between languages would cause the loss of data or a disruption in the process of a transactional service.

Behaviour:

  • Canada.ca links to http://canada.ca/en/index.html or http://canada.ca/fr/index.html
  • Services links to http://www.servicecanada.gc.ca/eng/home.shtml or http://www.servicecanada.gc.ca/fra/accueil.shtml
  • Departments ("Ministères") links to http://canada.ca/en/gov/dept/index.html or http://canada.ca/fr/gouv/min/index.html
  • Language selection links take the user to the equivalent content in that language.
  • The official language selection link takes the user to the same Web page in the other official language.

Exceptions:

  • For websites and Web applications in non-official languages the links to Canada.ca, Services, Departments ("Ministères") are replaced with the additional languages. The official languages are displayed at the furthest boundary, with additional languages displayed across the navigation bar. For languages that read right to left, this would mean official languages are left aligned.
  • For websites and Web applications that require users to be logged-in and provide the option of selecting, setting, or changing the language preference, the language selection links can be removed from the navigation bar.
11.1.1.1. Government of Canada signature

The Government of Canada signature (sig-eng-bg or sig-fra-bg) is applied to all government Web pages of departments identified by the flag symbol. Departments identified by the Arms of Canada use their approved Arms of Canada signature or the Government of Canada signature. Departments who have received Treasury Board approval to be identified by a symbol other than the flag symbol or the Arms of Canada use the Government of Canada signature or their approved symbol.

Location:

  • 10 pixels to the right of the inner left boundary of the Government of Canada navigation bar
  • Centred vertically in the Government of Canada navigation bar

Dimensions:

  • Width: 234 pixels for Government of Canada signature
  • Height:
    • 22 pixels for Government of Canada signature.
    • 61 pixels for Arms of Canada signatures or approved symbols.
11.1.2. Site/application title

Provides the title of the site/application.

Location:

  • 10 pixels to the right of the inner left boundary of the banner
  • Centred vertically in the banner

Dimensions:

  • Available width: 360 pixels
  • Available height: 123 pixels

Presentation:

  • Font: 22.5 point Arial or decreased to accommodate title length
  • Text shadow:
    • Colour: dark grey (#333)
    • Position (right, down): 1 pixel, 1 pixel
    • Blur radius: 1 pixel
  • Foreground: white (#fff)
  • Background: transparent

Behaviour:

  • Underlined for mouse hover and keyboard focus (not underlined otherwise)
  • Links to the home page of the site/application.
11.1.3. Canada Wordmark

The Canada Wordmark (wmms-bg) is to be applied to all Government of Canada Web pages.

Location:

  • 10 pixels to the left of the inner right boundary of the banner
  • 39 pixels below the top of the banner

Dimensions:

  • Width: 139 pixels
  • Height: 33 pixels
11.1.4. Search
Content page with the search omitted as described in the exceptions for Section 11.1.4. Search.

Location:

  • "Search" ("Recherche") button is 10 pixels to the left of the inner right boundary of the banner
  • Search text input field is 5 pixels to the left of the Search ("Recherche") button
  • "Search" ("Recherche") button and search text input field are 5 pixels above the bottom of the banner

Presentation:

  • Button foreground: Dark grey (#333)
  • Button background (normal): search-button for the image and grey (#ccc) for the colour
  • Button background (hover/focus): search-button-focus for the image and grey (#ddd) for the colour
  • Button and search text input field are enclosed in a container with the following properties:
    • Background: #146094
    • Border-left: 1px solid #15527D
    • Border-right: 1px solid #15527D
    • Border-top: 1px solid #87AEC9
    • Padding (top, right, bottom, left): 11 pixels, 10 pixels, 6 pixels, 12 pixels
    • Font: 10 point Verdana
  • Search text input field background is white (#FFFFFF).
  • Search text input field width is 27 characters.

Behaviour:

  • Submitting a search query sends the user to a search engine results page.

Exceptions:

Search element can be removed where:

  • search engine results are displayed,
  • search is the primary task of the page; or
  • the act of executing the search would cause the loss of data or a disruption in the process of a transactional service.
11.1.5. Site/application navigation bar
Content page with the site/application navigation bar omitted as described in the exceptions for Section 11.1.5. Site/application navigation bar.

Provides links for moving from section to section across the entire website or application.

Location:

  • The site/application navigation bar is located immediately below the banner

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Top Level
    • Foreground: white (#FFF)
    • Foreground (link, hover/focus/active): black (#000)
    • Background (inner width): menu-bg for the image and #23447E for the colour
    • Background (outer width): transparent
    • Background (link, normal): transparent
    • Background (link, hover/focus/active): grey (#CCC) for the colour
    • Down arrow (for submenus): menu-arrow
    • Border-bottom: 4 pixels solid grey (#CCC)
    • Font: 13 pixels Verdana bold
  • Secondary menu
    • Foreground: black (#000)
    • Foreground (link, hover/focus/active): black (#000), underline
    • Background: grey (#CCC) for the colour
    • Background (link, normal): transparent
    • Font: 13 pixels Verdana and 16 pixels Verdana bold for mega menu column headings
    • Border-bottom: 4 pixels solid blue (#0F315B)
    • Link properties:
      • Border-left: 1px solid #124B79
      • Border-right: 1px solid #15598F
      • Padding (top, right, bottom, left): 6 pixels, 14 pixels, 6 pixels, 10 pixels

Behaviour:

  • Links are text-based and are the same throughout the site/application.
  • Link appearance for mouse hover and keyboard focus must be visually distinct from the default link appearance.
  • Link appearance for the item selected on the primary navigation bar must be visually distinct from the unselected state.
  • Content is limited to within the inner boundaries of the navigation bar. Only prescribed background colours and images can be used outside of those boundaries.

Exception

  • The site/application navigation bar can be removed when menu links not associated with primary tasks are likely to cause user error or loss of data, for example, in a transactional workflow.

11.2. Breadcrumbs

Provides links to the pages above the current page in the site/application's hierarchy.

Location:

  • Immediately below the site/application navigation bar.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Horizontal list of breadcrumbs (text-based links) representing the pages above the current page within the site/application's hierarchy.
  • The current page is displayed and is not hyperlinked.
  • Breadcrumbs are separated by the greater-than sign ( > ).
  • The first breadcrumb is "Home" ("Accueil").

Behaviour:

  • "Home" ("Accueil") links to the home page of the site/application. Subsequent breadcrumbs are linked to the corresponding Web pages.

Exceptions:

  • Breadcrumbs are not displayed
    • on home pages; or
    • where breadcrumb links not associated with primary tasks are likely to cause user error or loss of data, for example, in a transactional workflow.

11.3. Body

The body is located immediately below the header and includes a content area and may also include secondary navigation. The content area includes the Date modified and may include the Government priorities. The preferred fonts for the body areas are Arial, Helvetica and Verdana.

Location:

  • Immediately below the header

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)
  • Content area is the full width and height of the inner body except where accommodating secondary navigation.

Presentation:

  • Content area and secondary navigation are limited to within the inner boundaries of the body. Only background colours and images prescribed can be used outside of those boundaries.

11.4. Background

Presentation:

  • Inner width: content-deco for the image and white (#fff) for the colour
  • Outer width: transparent
  • Background image repeats vertically

11.5. Government priorities

Provides links to government priorities, use is determined by the head of communications, in consultation with Privy Council Office.

Location:

  • Aligned with the right boundary of the content area.
  • Exact location to be determined by the head of communications, in consultation with Privy Council Office.

Dimensions:

  • Dimensions to be determined by the head of communications, in consultation with Privy Council Office.

Presentation:

  • Section heading is "Priorities" ("Priorités")
  • Remaining presentation aspects are determined by the head of communications of the department, in consultation with Privy Council Office.

11.6. Date modified

Provides the most recent date on which the Web page content was formally issued, substantially changed or reviewed.

Location:

  • Aligned with the right boundary of the content area.
  • Aligned with the bottom boundary of the content area.
  • The date modified is removed where a version identifier is used.

Presentation:

  • "Date modified:" ("Date de modification :") using the ISO standard format (YYYY MM DD)

11.7. Footer

The footer is located immediately below the body and includes the site/application footer and the Government of Canada footer.

Location:

  • Immediately below the body.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • The background area is transparent.
  • Content is limited to the two areas included in the footer. Only background colours and images prescribed can be used outside of those areas.
11.7.1. Site/application footer

Includes links to the site/application's Terms and conditions and Transparency pages as well as About us, News, Contact us and Stay connected.

Location:

  • The site/application footer is located immediately below the body.
  • "News" ("Nouvelles") link is removed where the site/application does not release media products such as press releases.
  • "Stay connected" ("Restez branchés") link is removed where no social media, email subscriptions or Web feeds are available.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Foreground: dark grey (#222)
  • Background (outer width): foot-bottom-deco for the image and light grey (#efefef) for the colour
  • Background image (outer width) repeats horizontally
  • Background (inner width): footer-deco for the image and light grey (#efefef) for the colour
  • Left-most column is 10 pixels to the right of the inner left boundary of the site/application footer
  • Font: 10.5 point Arial for the column headings and 9.5 point Arial for regular column text
  • Column headings are not underlined by default
  • Includes the following four links arrayed from left to right in the same order: "About us" ("À propos de nous"), "Contact us" ("Contactez-nous"), "News" ("Nouvelles") and "Stay connected" ("Restez branchés").
  • Additional links may be included in columns below the top-most links. Each column of links is left aligned with the associated top-most link.
  • Top-most links are bolded while the additional links are not.
  • Link appearance for mouse hover and keyboard focus are underlined.
  • Links are text-based and are the same throughout the website or application.
  • Content is limited to within the inner boundaries of the site/application footer. Only background colours and images prescribed can be used outside of those boundaries.

Behaviour:

  • "About us" ("À propos de nous") links to a page with information about the site/application.
  • "Contact us" ("Contactez-nous") links to a page with contact information for the site/application.
  • "News" ("Nouvelles") links to a page with media products such as press releases.
  • "Stay connected" ("Restez branches") links to a page where social media, email subscriptions and/or Web feeds are available.
11.7.1.1. Terms and conditions ("Avis") and Transparency ("Transparence") links

Location:

  • Aligned with the inner left boundary of the site/application footer.
  • "Transparency" ("Transparence") link is to the right of the "Terms and conditions" ("Avis") link.

Presentation:

  • Links are text-based.

Behaviour:

  • "Terms and conditions" ("Avis") links to a page containing the notices in Appendix C of the Standard on Web Usability, or links to those same notices.
  • "Transparency" ("Transparence") links to either the department's main Transparency page or, where the site/application is not departmental, to the Government-Wide Reporting page on the Treasury Board of Canada Secretariat website.
11.7.2. Government of Canada footer

Provides links to common Government of Canada resources.

Location:

The Government of Canada footer is located immediately below the site/application footer.

Dimensions:

  • Height: 57 pixels
  • Width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Background: #040707 for the colour
  • Only background colours and images prescribed can be used outside of those boundaries.
  • HEALTH (SANTÉ), TRAVEL (VOYAGE), SERVICE CANADA, JOBS (EMPLOIS), and ECONOMY (ÉCONOMIE) links are displayed from left to right 10 pixels to the right of the inner left boundary of the Government of Canada footer. The domain names appear on the second line
  • Canada.ca link is 15 pixels to the left of the inner right boundary of the Government of Canada footer
  • Canada.ca link is separated from the other links by a grey vertical bar (#666) with 45 pixels of space between the Canada.ca link and the vertical bar
  • Other links are separated by 45 pixels of space
    • Font: Arial
    • Font size ("Canada.ca"):16 point
    • Font size (other links): 9 point
    • Font colour is white (#fff)
    • Background: transparent
    • All links are vertically aligned in the middle of the Government of Canada footer
    • HEALTH links to http://healthycanadians.gc.ca/index-eng.php, and SANTÉ links to http://canadiensensante.gc.ca/index-fra.php
    • TRAVEL links to http://www.travel.gc.ca/index-eng.asp and VOYAGE links to http://www.voyage.gc.ca/index-fra.asp
    • SERVICE CANADA links to http://www.servicecanada.gc.ca/eng/home.shtml or http://www.servicecanada.gc.ca/fra/acscueil.shtml
    • JOBS links to http://www.jobbank.gc.ca/intro-eng.aspx, and EMPLOIS links to http://www.guichetemplois.gc.ca/Intro-fra.aspx
    • ECONOMY links to http://actionplan.gc.ca/en and ÉCONOMIE links to http://plandaction.gc.ca/fr
    • Canada.ca links to http://canada.ca/en/index.html or http://canada.ca/fr/index.html

Exception:

  • No links are displayed when site/application is in non-official languages.

12. Server message pages

Single-column, unilingual server message page as described in Section 12. Server message pages.

The following specifications apply to all server message pages. Each server message page is structured into three main areas: header, body and footer. The header includes the Government of Canada signature, the Canada Wordmark, and the site/application title in each language. The body includes a content area. The footer includes a Terms and conditions ("Avis") link.

If the user's language can be determined, the server message is provided only in the user's language. If the user's language cannot be determined, the server message is provided in each language in which the site/application is available.

12.1. Header

Includes the Government of Canada signature, the Canada Wordmark, and the site/application title block.

Location:

  • Top of the server message page.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • The background of the header is white (#FFFFFF).
  • Content is limited to the three elements in the header.
12.1.1. Government of Canada signature

The Government of Canada signature (sig-eng or sig-fra) is to be applied to all government server message pages.

Location:

  • 10 pixels to the right of the inner left boundary of the header
  • 20 pixels below the top boundary of the header

Dimensions:

  • Width: 214 pixels
  • Height: 20 pixels
12.1.2. Canada Wordmark

The Canada Wordmark (wmms) is to be applied to all Government of Canada server message pages.

Location:

  • 10 pixels to the left of the inner right boundary of the header
  • 10 pixels below the top boundary of the header

Dimensions:

  • Width: 126 pixels
  • Height: 30 pixels
12.1.3. Site/application title block
Two-column, bilingual server message page as described in Section 12. Server message pages.

The site/application title block contains the site/application title in each language in which the server message is provided.

Location:

  • 17 pixels below the Government of Canada signature and the Canada Wordmark.

Presentation:

  • Columns:
    • When only one language is provided: 1 column.
    • When more than one language is provided: 2 columns.
  • Foreground colour: #295376.
  • Left margin: 10 pixels.
  • Right margin: 10 pixels.
  • Border: bottom only; 1 pixel solid #666.
12.1.3.1. Site/application title in the first official language

Location:

  • In the first column.
  • When the site/application title in the second official language is present: On the same baseline as the site/application title in the second official language.

Presentation:

  • Font size: 14.5 point or decreased to accommodate title length.
  • Text: The title of the site/application in the first official language.
  • Alignment: Left-aligned.
  • On hover / on focus: Underlined.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.
12.1.3.2. Site/application title in the second official language

Location:

  • In the second column.
  • On the same baseline as the site/application title in the first official language.

Presentation:

  • Font size: 14.5 point or decreased to accommodate title length.
  • Text: The title of the site/application in the second official language.
  • Alignment: Right-aligned.
  • On hover / on focus: Underlined.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.
12.1.3.3. Site/application title in additional languages

Location:

  • First, third and subsequent odd-numbered additional language:
    • In the first column.
    • 10 pixels below the previous site/application title in the column.
    • On the same baseline as the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • In the second column.
    • 10 pixels below the previous site/application title in the column.
    • On the same baseline as the previous odd-numbered additional language.

Presentation:

  • Font size: 11.5 point or decreased to accommodate title length.
  • Text: The title of the site/application in the additional language and in its native alphabet.
  • Alignment:
    • First, third and subsequent odd-numbered additional language: Left-aligned.
    • Second, fourth and subsequent even-numbered additional language: Right-aligned.
  • On hover / on focus: Underlined.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.

12.2. Body

The body contains the server message block in each language in which the server message is provided.

Location:

  • Immediately below the header.

Dimensions:

  • Outer width: 100% (full width of the page).
  • Inner width: 960 pixels (centred).

Presentation:

  • Columns:
    • When only one language is provided: 1 column.
    • When more than one language is provided: 2 columns.
  • Background: Transparent.
  • Left margin: 10 pixels.
  • Right margin: 10 pixels.
  • Bottom margin: 12 pixels.
  • Border: bottom only; 10 pixels solid #28507A.
12.2.1. Server message block in the first official language

Each server message block contains a server message title, a server message body and links to the home page and the contact information.

Location:

  • In the first column.
  • When the server message block in the second official language is present: On the same baseline as the server message block in the second official language.

Presentation:

  • Alignment: Left-aligned.
12.2.1.1. Server message title

Location:

  • At the top of the server message block.

Presentation:

  • Text: The title of the server message in the first official language.
12.2.1.2. Server message body

Location:

  • Below the server message title.

Presentation:

  • Text: The server message body in the first official language.
12.2.1.3. Home page link

Location:

  • Below the server message body.

Presentation:

  • Text: "Home" in the first official language.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.
12.2.1.4. Contact information link

Location:

  • Below the home page link.

Presentation:

  • Text: "Contact us" in the first official language.

Behaviour:

  • Links to the contact information for the site/application in the corresponding language.
12.2.2. Server message block in the second official language

Each server message block contains a server message title, a server message body and links to the home page and the contact information.

Location:

  • In the second column.
  • On the same baseline as the server message block in the first official language.

Presentation:

  • Alignment: Left-aligned.
12.2.2.1. Server message title

Location:

  • At the top of the server message block.

Presentation:

  • Text: The title of the server message in the second official language.
12.2.2.2. Server message body

Location:

  • Below the server message title.

Presentation:

  • Text: The server message body in the second official language.
12.2.2.3. Home page link

Location:

  • Below the server message body.

Presentation:

  • Text: "Home" in the second official language.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.
12.2.2.4. Contact information link

Location:

  • Below the home page link.

Presentation:

  • Text: "Contact us" in the second official language.

Behaviour:

  • Links to the contact information for the site/application in the corresponding language.
12.2.3. Server message block in additional languages

Each server message block contains a server message title, a server message body and links to the home page and the contact information.

Location:

  • First, third and subsequent odd-numbered additional language:
    • In the first column.
    • 20 pixels below the previous server message block in the column.
    • On the same baseline as the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • In the second column.
    • 20 pixels below the previous server message block in the column.
    • On the same baseline as the previous odd-numbered additional language.

Presentation:

  • Alignment: Left-aligned.
12.2.3.1. Server message title

Location:

  • At the top of the server message block.

Presentation:

  • Text: The title of the server message in the additional language and in its native alphabet.
12.2.3.2. Server message body

Location:

  • Below the server message title.

Presentation:

  • Text: The server message body in the additional language and in its native alphabet.
12.2.3.3. Home page link

Location:

  • Below the server message body.

Presentation:

  • Text: "Home" in the additional language and in its native alphabet.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.
12.2.3.4. Contact information link

Location:

  • Below the home page link.

Presentation:

  • Text: "Contact us" in the additional language and in its native alphabet.

Behaviour:

  • Links to the contact information for the site/application in the corresponding language.

12.3. Footer

The footer contains the terms and conditions link in each language in which the server message is provided.

Location:

  • Immediately below the body.

Dimensions:

  • Outer width: 100% (full width of the page).
  • Inner width: 960 pixels (centred).

Presentation:

  • Columns:
    • When only one language is provided: 1 column.
    • When more than one language is provided: 2 columns.
  • Background: Transparent.
  • Top margin: 17 pixels.
  • Left margin: 10 pixels.
  • Right margin: 10 pixels.
12.3.1. Terms and conditions link in the first official language

Location:

  • In the first column.
  • When the terms and conditions link in the second official language is present: On the same baseline as the terms and conditions link in the second official language.

Presentation:

  • Bottom padding: 11 pixels.
  • Font: 9 point Verdana.
  • Text: "Terms and conditions" in the first official language.
  • Alignment: Left-aligned.
  • Not underlined.

Behaviour:

12.3.2. Terms and conditions link in the second official language

Location:

  • In the second column.
  • On the same baseline as the terms and conditions link in the first official language.

Presentation:

  • Bottom padding: 11 pixels.
  • Font: 9 point Verdana.
  • Text: "Terms and conditions" in the second official language.
  • Alignment: Right-aligned.
  • Not underlined.

Behaviour:

12.3.3. Terms and conditions link in additional languages

Location:

  • First, third and subsequent odd-numbered additional language:
    • In the first column.
    • Below the previous terms and conditions link in the column.
    • On the same baseline as the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • In the second column.
    • Below the previous terms and conditions in the column.
    • On the same baseline as the previous odd-numbered additional language.

Presentation:

  • Bottom padding: 11 pixels.
  • Font: 9 point Verdana.
  • Text: "Terms and conditions" in the additional language and in its native alphabet.
  • Alignment:
    • First, third and subsequent odd-numbered additional language: Left-aligned.
    • Second, fourth and subsequent even-numbered additional language: Right-aligned.
  • Not underlined.

Behaviour:

13. Splash pages

Bilingual splash page as described in Section 13. Splash pages.

Each splash page is structured into three main areas: header, body and footer. The header includes the Government of Canada signature. The body includes three elements: the site/application title in each language, the language selection links and the Canada Wordmark. The footer includes the Terms and conditions ("Avis") links in each language.

Exceptions:

  • Websites and Web applications that have a unilingual website addresses do not implement splash pages.

13.1. Header

The header includes the Government of Canada signature. The background is white (#fff).

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Content is limited to the Government of Canada signature. Only background colours and images prescribed can be used.
13.1.1. Government of Canada signature

The Government of Canada signature (sig-eng or sig-fra) is to be applied to all Government of Canada splash pages.

Location:

  • 10 pixels to the right of the inner left boundary of the header
  • 20 pixels below the top boundary of the header
  • 10 pixels above the bottom boundary of the header

Dimensions:

  • Width: 214 pixels
  • Height: 20 pixels

13.2. Body

The body is located immediately below the header and includes the background, the site/application title in each language, language selection links and the Canada Wordmark.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Welcome / Bienvenue or Bienvenue / Welcome at the top of the body
  • Color: Dark grey (#222)
  • Horizontal alignment: centre-aligned
  • Padding-top/bottom: 40px
  • Font: 19. 5 point Verdana or decreased to accommodate title length
  • Background outer: transparent
  • Background inner: (splashpage-background.jpg) for the image and white (#fff) for the colour
  • Background image begins 20 pixels to the left of the inner left boundary of the body and 42 pixels above the top boundary of the body
  • Background image repeats horizontally
  • Content is limited to within the inner boundaries of the body. Only background colours and images prescribed can be used.
13.2.1. Site/application title

Provides the title of the site/application.

Location:

  • 62 pixels below Welcome / Bienvenue or Bienvenue / Welcome
  • Left-aligned site/application titles are 10 pixels to the right of the inner left boundary of the body
  • Right-aligned site/application titles are 10 pixels to the left of the inner right boundary of the body
  • Site/application title in the first official language is aligned with the inner left boundary of the body.
  • Site/application title in the second official language is aligned with the inner right boundary of the body.
  • Site/application titles for the first and second official languages are vertically aligned.
  • Site/application titles for additional languages are below the site/application titles for the first and second official languages.

Presentation:

  • Foreground: black (#000)
  • Minimum height (total): 90 pixels
  • Font: 14 point Verdana decreased to accommodate title length
  • Font size (site/application title in another language): 11.5 point or decreased to accommodate title length
13.2.2. Language selection links

Provides links to the home pages in the supported languages.

Location:

  • 10 pixels to the right of the inner left boundary of the body
  • 61 pixels below the site/application title
  • Language selection links for the first and second official languages are vertically aligned below the site/application title.
  • Additional language selection links are below the language selection links for the first and second official languages.

Presentation:

  • Text for each link is the official name of the corresponding language, in its native language and alphabet.
  • Foreground: dark grey (#333)
  • Background (normal): sp-pe-button for the image and grey (#ccc) for the colour
  • Background (hover/focus): sp-pe-button-focus for the image and grey (#ddd) for the colour
  • 21 pixels of horizontal spacing between language selection links
  • 14 pixels of vertical spacing between rows of language selection links
  • Font: Verdana
  • Width: 139 pixels
  • Horizontal alignment: centre-aligned
  • Padding-top/bottom: 10 pixels
  • Padding-left/right: 30 pixels
  • Border-bottom:1px solid #999
  • Border-right: 1px solid #999
  • Border-top: 1px solid #fff
  • Border-left: 1px solid #fff

Behaviour:

  • Each link is to the home page in the corresponding language.
13.2.3. Canada Wordmark

The Canada Wordmark (wmms) is to be applied to Government of Canada splash pages.

Location:

  • 10 pixels to the left of the inner right boundary of the body
  • 65 pixels below the site/application title

Dimensions:

  • Width: 126 pixels
  • Height: 30 pixels

13.3. Footer

The footer is located immediately below the body and includes the Terms and conditions ("Avis") link.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)
13.3.1. Terms and conditions (Avis) link

Location:

  • 10 pixels to the right of the inner left boundary of the footer
  • Links are 10 pixels below the corresponding language selection link

Presentation:

  • Links are not underlined
  • 21 pixels of horizontal spacing between links
  • Font: 9 point Verdana
  • Width: 139 pixels
  • Horizontal alignment: left-aligned
  • Content is limited to the Terms and conditions ("Avis") link included in the footer. Only background colours and images prescribed can be used.

Behaviour:

Layout and design specifications for print

Only content pages/screens are required to offer a version optimized for printing.

14. Content pages/screens

Each content page/screen contains a header and a body.

14.1. Header

The header contains the Government of Canada signature, the Canada Wordmark and the site/application title.

Location:

  • Aligned vertically with the bottom edge of the top margin of the first printed page.
  • Aligned horizontally with the right edge of the left margin of the first printed page.

Dimensions:

  • Width: 100% of the width of the printed page, excluding the gutter and the left and right margins.

Presentation:

  • Background color: White (#fff).
14.1.1. Government of Canada signature

Location:

  • Aligned vertically with the top edge of the header.
  • Aligned with the left edge of the header.

Dimensions:

  • Width: 214 pixels.
  • Height: 20 pixels.

Presentation:

  • Image:
    • Pages in French: sig-fra.
    • Pages in English: sig-eng.
14.1.2. Canada Wordmark

Location:

  • Aligned vertically with the top edge of the header.
  • Aligned horizontally with the right edge of the header.

Dimensions:

  • Width: 126 pixels.
  • Height: 30 pixels.

Presentation:

  • Image: wmms.
14.1.3. Site/application title

Location:

  • Below the Government of Canada signature and the Canada Wordmark.
  • Aligned horizontally with the left edge of the header.

Presentation:

  • Foreground colour: Black (#000).
  • Background colour: White (#fff).
  • Font: Verdana.
  • Font size: 16 points.

14.2. Body

Location:

  • Aligned vertically with the bottom edge of the header.

Dimensions:

  • Width: 100% of the width of the printed page, excluding the gutter and the left and right margins.

Presentation:

  • Foreground colour: Black (#000).
  • Background colour: White (#fff).
  • Font: Times New Roman.
  • Font size: 12 points.
  • Border-top: 3px outset #666

Design specifications for archived content

Archived content is identified by:

  • Adding an archived content notice immediately before the archived content. The archived content notice informs readers that archived content is not subject to the Government of Canada Web standards and that readers can request alternate formats.
    • Where the archived content has been replaced or updated, the archived content notice includes a link to the most recent version of the content.
    • Where the archived content notice cannot be added immediately before the archived content, the archived content notice is added to a content page/screen from which the content is accessed.
  • Where the content of a page/screen is archived in its entirety, adding the word "archived", in the language of the content, to the beginning of the screen title.

Links to archived content are identified by:

  • Adding the word "archived", in the language of the link, to the end of the link text.

15. Archived content notice text

Archived information

Archived information is provided for reference, research or recordkeeping purposes. It is not subject to the Government of Canada Web Standards and has not been altered or updated since it was archived. Please contact us to request a format other than those available.

Design specifications for social media icons

Social media icons displayed on Government of Canada websites link only to official Government of Canada social media accounts.

Exceptions:

  • Where social media icons are displayed for the express purpose of facilitating sharing information on personal accounts, for example, through a "share" widget, a mandatory disclaimer is displayed.

16. Social media disclaimer

No endorsement of any products or services is expressed or implied.

Design specifications for application icons for device-based mobile applications

Each device-based mobile application must provide the applications icons required by the mobile operating system and associated main corporate store for which the application is developed.

In addition to the requirements specific to the mobile operating system and associated main corporate store, each application icon:

  1. Displays the Canada Wordmark:
    1. Vertically aligned with the bottom edge of the icon and centred horizontally.
    2. With a width equal to 85% of the width of the shortest edge of the icon.
    3. On either a white or a black background.
  2. Does not use optional visual treatments, such as gloss or shine effects, provided by mobile operating systems.

Design specifications for application launch screens for device-based mobile applications

Application launch screen for device-based mobile applications as described in the Design specifications for application launch screens for device-based mobile applications.

Each device-based mobile application must provide an application launch screen when it is supported by the mobile operating system and associated main corporate store for which the application is developed.

In addition to the requirements specific to the mobile operating system and associated corporate store, each application launch screen:

  1. Displays the Canada Wordmark:
    1. Centred vertically and horizontally.
    2. With a width equal to 85% of the width of the shortest edge of the launch screen.
    3. On a black background.

Design specifications for the launch sequence of device-based mobile applications

Device-based mobile applications inform users of their rights and responsibilities by:

  • Displaying the End User License Agreement described in Appendix D of the Standard on Optimizing websites and Applications for Mobile Devices the first time the device-based mobile application is launched.
    • If the user accepts the End User License Agreement, the execution of the device-based mobile application continues.
    • If the user rejects the End User License Agreement, the execution of the application aborts and the End User License Agreement is displayed the next time the user launches the device-based mobile application.

Enquiries

Please direct enquiries about these technical specifications to your department's Web Standards Centre of Expertise. For interpretation of these technical specifications, Web Standards Centres of Expertise should contact:

Web Standards Office
Chief Information Officer Branch
Treasury Board of Canada Secretariat
Ottawa ON K1A 0R5
E-mail: Webstandards@tbs-sct.gc.ca

Appendix A: Standardized terms

English Français
About À propos
About us À propos de nous
Archived Archivé
Back Retour en arrière
Canada.ca Canada.ca
Close Fermer
Contact us Contactez-nous
Date modified Date de modification
Departments Ministères
Economy Économie
Health Santé
Home Accueil
Jobs Emplois
Language Langue
Menu Menu
News Nouvelles
Priorities Priorités
Search Recherche
Search website Rechercher dans le site
Service Canada Service Canada
Services Services
Settings Paramètres
Sign in Ouvrir une session
Sign out Fermer la session
Signature of the Government of Canada Signature du gouvernement du Canada
Stay connected Restez branchés
Symbol of the Government of Canada Symbole du gouvernement du Canada
Terms and conditions Avis
Transparency Transparence
Travel Voyage
Welcome Bienvenue
Our mandate Notre mandat
The Minister Le ministre
Organizational structure Structure de l'organisation
Publications Publications
Site map Plan du site
News releases Communiqués
Speeches Discours
Media advisories Avis aux médias
Backgrounders Notes d'information
Statements Déclarations
Photo gallery Galeries de photo
Multimedia Multimédia
Addresses Adresses
Telephone Téléphone
Fax Télécopieur
Teletypewriter Téléimprimeur
Email Courriel
Find an employee Trouver un(e) employé(e)
Feeds Fils de nouvelles
Subscribe Abonnez-vous
Report a problem or mistake on this page
Please select all that apply:

Privacy statement

Thank you for your help!

You will not receive a reply. For enquiries, contact us.

Date modified: