Spécifications relatives à la mise en page et à la conception graphique pour les grands écrans (Spécifications techniques relatives à la présence Web et mobile)

Les spécifications pour les grands écrans s'appliquent dans les cas suivants :

  • la largeur de l'écran (media query device-width) est d'au moins 1 024 pixels; et
  • la largeur de la fenêtre d'affichage (media query width) est d'au moins 960 pixels.

Les mesures et les emplacements en fonction de pixels pour les spécifications de mise en page ci-dessous sont établis en fonction des limites internes et externes. La limite est de 960 pixels pour ce qui est de la largeur intérieure, et de 100 % de la largeur de l'écran pour ce qui est de la largeur extérieure.

11. Pages de contenu

Page de contenu affichant tous les éléments décrits à la Section 11. Pages de contenu.

Chaque page Web contient les éléments visuels communs ci-dessous, répartis en trois principales sections : en-tête, corps et pied de page.

11.1. En-tête

L'en-tête contient l'image d'arrière-plan, la barre de navigation du gouvernement du Canada, la signature du gouvernement du Canada, le titre du site ou de l'application, le mot-symbole « Canada », la barre de recherche et la barre de navigation.

Présentation

  • Couleur d'arrière-plan : Blanc (#fff).
  • Image d'arrière-plan : background-withglow-andleaf.jpg, centré, 40 pixels à partir du haut de la page Web, répété horizontalement.

11.1.1. Barre de navigation du gouvernement du Canada

La barre de navigation du gouvernement du Canada est située en haut de l'en-tête et contient les liens de l'en-tête et le lien de sélection de la langue officielle.

Dimensions

  • Hauteur lorsque la signature du gouvernement du Canada est utilisée : 41 pixels.
  • Hauteur lorsque la signature contenant les armoiries du Canada est utilisée : 65 pixels.

Présentation

  • 13 pixels sous la limite supérieure de la barre de navigation du gouvernement du Canada.
  • Arrière-plan (largeur extérieure) : Couleur noir (#000).
  • Canada.ca, Services, Ministères et le lien de sélection de la langue officielle s'affichent de gauche à droite, 10 pixels à partir de la gauche de la limite intérieure droite de la barre de navigation du gouvernement du Canada.
  • Chaque lien est séparé par une barre verticale blanche (#fff), ainsi qu'un espace de 13 pixels de chaque côté de cette barre verticale.
  • Police : Verdana, 9 points
  • Couleur d'avant-plan : Blanc (#fff).
  • Le texte est centré verticalement dans la barre de navigation du gouvernement du Canada.
  • L'utilisateur doit confirmer qu'il veut modifier la langue, si cette modification entraîne une perte de données ou l'interruption d'un processus transactionnel.

Comportement

  • Liens Canada.ca : http://canada.ca/en/index.html ou http://canada.ca/fr/index.html.
  • Liens Services : http://www.servicecanada.gc.ca/eng/home.shtml ou http://www.servicecanada.gc.ca/fra/accueil.shtml.
  • Liens Ministères : http://canada.ca/en/gov/dept/index.html ou http://canada.ca/fr/gouv/min/index.html.
  • Le lien de sélection de la langue amène l'utilisateur au contenu équivalent dans la langue sélectionnée.
  • Le lien de sélection de la langue officielle amène l'utilisateur à la même page Web, dans l'autre langue officielle.

Exceptions

  • Dans le cas des sites Web et des applications Web présentés dans des langues autres que les langues officielles, les liens Canada.ca, Services et Ministères sont remplacés par les langues supplémentaires. Les langues officielles s'affichent à la limite de la section, et les langues supplémentaires s'affichent dans la barre de navigation. Dans le cas des langues qui se lisent de droite à gauche, les langues officielles sont alignées à gauche.
  • Pour les sites Web et les applications Web qui exigent une ouverture de session et offrent comme option de sélectionner la langue, d'établir des paramètres ou de modifier les préférences linguistiques, les liens de sélection de la langue peuvent être supprimés de la barre de navigation.
11.1.1.1. Signature du gouvernement du Canada

La signature du gouvernement du Canada (sig-eng-bg ou sig-fra-bg) doit figurer dans toutes les pages Web des ministères où se trouve le symbole de drapeau. Les ministères qui portent les armoiries du Canada utilisent leur signature approuvée contenant les armoiries du Canada ou la signature du gouvernement du Canada. Les ministères qui ont reçu l'approbation du Conseil du Trésor pour être désignés par un symbole autre que le drapeau ou les armoiries du Canada utilisent la signature du gouvernement du Canada ou leur symbole approuvé.

Emplacement

  • 10 pixels à droite de la limite intérieure gauche de la barre de navigation du gouvernement du Canada.
  • Centré verticalement, dans la barre de navigation du gouvernement du Canada.

Dimensions

  • Largeur : 234 pixels dans le cas de la signature du gouvernement du Canada.
  • Hauteur :
    • 22 pixels dans le cas de la signature du gouvernement du Canada.
    • 61 pixels dans le cas de la signature contenant les armoiries du Canada ou des symboles approuvés.

11.1.2. Titre du site ou de l'application

Présente le titre du site ou de l'application.

Emplacement

  • 10 pixels à droite de la limite intérieure gauche de la bannière.
  • Centré verticalement, dans la bannière.

Dimensions

  • Largeur disponible : 360 pixels.
  • Hauteur disponible : 123 pixels.

Présentation

  • Police : 22,5 points, Arial, ou moins selon la longueur du titre.
  • Ombre du texte :
    • Couleur : Gris foncé (#333).
    • Position (droite, bas) : 1 pixel, 1 pixel.
    • Niveau de flou : 1 pixel.
  • Couleur d'avant-plan : Blanc (#fff).
  • Arrière-plan : Transparent.

Comportement

  • Souligné lorsque sélectionné au moyen de la souris ou du clavier (sinon, n'est pas souligné).
  • Des liens mènent vers la page d'accueil du site ou de l'application.

11.1.3. Mot-symbole « Canada »

Le mot-symbole « Canada » (wmms-bg) doit être appliqué à toutes les pages Web du gouvernement du Canada.

Emplacement

  • 10 pixels à gauche de la limite intérieure droite de la bannière.
  • 39 pixels sous la limite supérieure de la bannière.

Dimensions

  • Largeur : 139 pixels.
  • Hauteur : 33 pixels.

11.1.4. Recherche

Page de contenu où la barre de recherche est absente comme décrit dans les exceptions à la Section 11.1.4. Recherche.

Emplacement

  • Le bouton Recherche est placé à 10 pixels à gauche de la limite intérieure droite de la bannière.
  • Le champ de recherche est placé à 5 pixels à gauche du bouton Recherche.
  • Le bouton Recherche et le champ de recherche sont placés à 5 pixels au-dessus du bas de la bannière.

Présentation

  • Avant-plan du bouton : Gris foncé (#333).
  • Arrière-plan du bouton (normal) : Image search-button et couleur gris (#ccc).
  • Arrière-plan du bouton (sélectionné avec la souris ou le clavier) : image search-button-focus et couleur gris (#ddd).
  • Le bouton et le champ de recherche se trouvent dans une section respectant les spécifications ci-dessous :
    • Arrière-plan : #146094.
    • Bordure (gauche) : 1 pixel uni #15527D.
    • Bordure (droite) : 1 pixel uni #15527D.
    • Bordure (haut) : 1 pixel uni #87AEC9.
    • Remplissage (haut, droite, bas, gauche) : 11 pixels, 10 pixels, 6 pixels, 12 pixels.
    • Police : Verdana, 10 points.
  • L'arrière-plan du champ de recherche est blanc (#FFFFFF).
  • La largeur du champ de recherche est de 27 caractères.

Comportement

  • Quand l'utilisateur lance une recherche, il se retrouve sur une page de résultats du moteur de recherche.

Exceptions

Les éléments de recherche peuvent être supprimés dans les cas suivants :

  • Les résultats du moteur de recherche sont affichés.
  • La recherche est la principale tâche de la page.
  • L'activation de la recherche entraînerait la perte de données ou l'interruption d'un processus transactionnel.

11.1.5. Barre de navigation du site ou de l'application

Page de contenu où la barre de navigation du site ou de l'application est absente comme décrit dans les exceptions à la Section 11.1.5. Barre de navigation du site ou de l'application.

Comporte des liens permettant de passer d'une section à une autre, dans l'ensemble du site Web ou de l'application.

Emplacement

  • La barre de navigation du site ou de l'application est placée directement sous la bannière.

Dimensions

  • Largeur extérieure : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré)

Présentation

  • Niveau supérieur :
    • Couleur d'avant-plan : Blanc (#fff).
    • Avant-plan (lien, sélectionné avec la souris ou le clavier) : Noir (#000).
    • Arrière-plan (largeur intérieure) : Image menu-bg et couleur #23447E.
    • Arrière-plan (largeur extérieure) : Transparent.
    • Arrière-plan (lien, normal) : Transparent.
    • Arrière-plan (lien, sélectionné avec la souris ou le clavier) : Couleur gris (#CCC).
    • Flèche vers le bas (pour les sous-menus) : menu-arrow.
    • Bordure (bas): 4 pixels, unis, gris (#CCC).
    • Police : 13 pixels, Verdana, gras.
  • Sous-menu :
    • Couleur d'avant-plan : Noir (#000).
    • Avant-plan (lien, sélectionné avec la souris ou le clavier) : Noir (#000), souligné.
    • Arrière-plan : Couleur gris (#CCC).
    • Arrière-plan (lien, normal) : Transparent.
    • Police : 13 pixels, Verdana et 16 pixels, Verdana, gras, pour les grands titres des colonnes du menu.
    • Bordure (bas): 4 pixels, couleur unie, bleue (#0F315B).
    • Propriétés des liens :
      • Bordure (gauche) : 1 pixel uni #124B79.
      • Bordure (droite) : 1 pixel uni #15598F.
      • Remplissage (haut, droite, bas, gauche) : 6 pixels, 14 pixels, 6 pixels, 10 pixels.

Comportement

  • Les liens sont présentés sous forme de texte et sont identiques dans l'ensemble du site ou de l'application.
  • L'apparence du lien lorsque celui-ci est sélectionné à l'aide de la souris ou du clavier doit être différente de l'apparence du lien par défaut.
  • L'apparence du lien correspondant à l'élément sélectionné dans la barre de navigation principale doit être différente de son apparence quand il n'est pas sélectionné.
  • Le contenu reste à l'intérieur des limites intérieures de la barre de navigation. Seules les couleurs et les images d'arrière-plan prescrites peuvent être utilisées à l'extérieur de ces limites.

Exception

  • La barre de navigation du site ou de l'application peut être supprimée lorsque les liens vers les menus qui ne sont pas liés aux tâches principales sont susceptibles de causer une erreur de la part de l'utilisateur ou la perte de données, par exemple dans un processus transactionnel.

11.2. Fil d'Ariane

Comporte des liens vers les pages qui précèdent la page actuelle, dans la hiérarchie du site ou de l'application.

Emplacement

  • Immédiatement sous la barre de navigation du site ou de l'application.

Dimensions

  • Largeur extérieure : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré).

Présentation

  • Liste horizontale d'éléments du fil d'Ariane (liens présentés sous forme de texte) représentant les pages qui précèdent la page actuelle, dans la hiérarchie du site ou de l'application.
  • La page actuelle s'affiche, mais ne comporte pas d'hyperlien.
  • Les éléments du fil d'Ariane sont séparés par un signe « plus grand que » ( > ).
  • Le premier élément du fil d'Ariane est Accueil.

Comportement

  • Le lien Accueil renvoie à la page d'accueil du site ou de l'application. Les éléments subséquents du fil d'Ariane mènent aux pages Web correspondantes.

Exceptions

  • Les éléments du fil d'Ariane sont absents dans les cas suivants :
    • L'utilisateur se trouve sur la page d'accueil.
    • Lorsque des liens du fil d'Ariane qui ne sont pas liés aux tâches principales sont susceptibles de causer une erreur de la part de l'utilisateur ou la perte de données, par exemple dans un processus transactionnel.

11.3. Corps

Le corps est situé immédiatement sous l'en-tête et contient une zone de contenu, et peut également contenir une navigation secondaire. La zone de contenu affiche la date de modification, et, dans certains cas, les priorités du gouvernement. Les polices suggérées pour le corps sont Arial, Helvetica et Verdana.

Emplacement

  • Immédiatement sous l'en-tête.

Dimensions

  • Largeur extérieure : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré).
  • La zone de contenu utilise la largeur et la hauteur totale de la zone intérieure du corps, sauf lorsqu'il y a une navigation secondaire.

Présentation

  • La zone de contenu et la navigation secondaire doivent respecter les limites intérieures du corps. Seules les couleurs et les images d'arrière-plan prescrites peuvent être utilisées à l'extérieur de ces limites.

11.4. Arrière-plan

Présentation

  • Largeur intérieure : Image content-deco et couleur blanc (#fff).
  • Largeur extérieure : Transparent.
  • L'image d'arrière-plan se répète verticalement.

11.5. Priorités du gouvernement

Fournit des liens vers les priorités du gouvernement. L'utilisation est déterminée par le responsable des communications, en consultation avec le Bureau du Conseil privé.

Emplacement

  • Aligné avec la limite droite de la zone de contenu.
  • L'emplacement exact est déterminé par le responsable des communications, en consultation avec le Bureau du Conseil privé.

Dimensions

  • Les dimensions sont déterminées par le responsable des communications, en consultation avec le Bureau du Conseil privé.

Présentation

  • Le titre de la section est Priorités.
  • Les autres aspects visuels sont déterminés par le responsable des communications du ministère, en consultation avec le Bureau du Conseil privé.

11.6. Date de modification

Présente la date la plus récente à laquelle le contenu de la page a été mis en ligne, modifié de façon importante ou révisé.

Emplacement

  • Aligné avec la limite droite de la zone de contenu.
  • Aligné avec le bas de la zone de contenu.
  • La date de modification est supprimée lorsqu'un indicateur de version est utilisé.

Présentation

  • Date de modification : Format standard ISO (AAAA MM JJ).

11.7. Pied de page

Le pied de page se trouve immédiatement sous le corps, et contient le pied de page du site ou de l'application et le pied de page du gouvernement du Canada.

Emplacement

  • Immédiatement sous le corps.

Dimensions

  • Largeur extérieure : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré).

Présentation

  • L'arrière-plan est transparent.
  • Le contenu figure seulement dans les deux zones du pied de page. Seules les couleurs et les images d'arrière-plan prescrites peuvent être utilisées à l'extérieur de ces zones.

11.7.1. Pied de page du site ou de l'application

Contient des liens vers les Avis et la page sur la Transparence du site ou de l'application, ainsi que les liens À propos de nous, Nouvelles, Contactez-nous et Restez branchés.

Emplacement

  • Le pied de page du site ou de l'application est situé immédiatement sous le corps.
  • Le lien Nouvelles est supprimé lorsque le site ou l'application n'affiche pas de produits médiatiques, comme des communiqués de presse.
  • Le lien Restez branchés est supprimé lorsqu'il n'existe aucun lien vers des médias sociaux, des abonnements à des courriels ou des fils de nouvelles.

Dimensions

  • Largeur extérieure : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré).

Présentation

  • Avant-plan : gris foncé (#222).
  • Arrière-plan (largeur extérieure) : image foot-bottom-deco et couleur gris pâle (#efefef).
  • Image d'arrière-plan (largeur extérieure), répétée horizontalement.
  • Arrière-plan (largeur intérieure) : image footer-deco et couleur gris pâle (#efefef).
  • La colonne la plus à gauche est placée à 10 pixels à la droite de la limite intérieure gauche du pied de page du site ou de l'application.
  • Police : Arial, 10,5 points pour le titre des colonnes et Arial, 9,5 points pour le texte régulier des colonnes.
  • Les titres des colonnes ne sont pas soulignés par défaut.
  • Contient les quatre liens, de gauche à droite, dans le même ordre : À propos de nous, Contactez-nous, Nouvelles et Restez branchés.
  • Des liens supplémentaires peuvent être ajoutés dans les colonnes, sous les premiers liens. Chaque colonne de liens est alignée à gauche avec le premier lien de la liste.
  • Les premiers liens des listes sont en gras, mais pas les liens supplémentaires.
  • Le texte des liens est souligné lorsque le lien est sélectionné à l'aide de la souris ou du clavier.
  • Les liens sont présentés sous forme de texte, et sont identiques dans l'ensemble du site Web ou de l'application.
  • La zone de contenu respecte les limites intérieures du pied de page du site ou de l'application. Seules les couleurs et les images d'arrière-plan prescrites peuvent être utilisées à l'extérieur de ces limites.

Comportement

  • Le lien À propos de nous mène à une page présentant des renseignements au sujet du site ou de l'application.
  • Le lien Contactez-nous mène à une page affichant les coordonnées pour le site ou l'application.
  • Le lien Nouvelles mène à une page affichant des produits médiatiques, comme des communiqués de presse.
  • Le lien Restez branchés mène à une page où l'on retrouve des liens vers des médias sociaux, des abonnements à des courriels ou des fils de nouvelles.
11.7.1.1. Liens « Avis » et « Transparence »

Emplacement

  • Aligné avec la limite intérieure gauche du pied de page du site ou de l'application.
  • Le lien Transparence est situé à la droite du lien Avis.

Présentation

  • Les liens sont présentés sous forme de texte.

Comportement

  • Le lien Avis mène à une page présentant les avis de l'annexe C de la Norme sur la facilité d'emploi des sites Web ou des liens vers ces mêmes avis.
  • Le lien Transparence mène à la page principale du ministère sur la transparence ou, si le site ou l'application ne relève pas du ministère, à la page pangouvernementale sur l'établissement de rapports, dans le site Web du Secrétariat du Conseil du Trésor du Canada.

11.7.2. Pied de page du gouvernement du Canada

Liens vers les ressources courantes du gouvernement du Canada.

Emplacement

Le pied de page du gouvernement du Canada est situé immédiatement sous le pied de page du site ou de l'application.

Dimensions

  • Hauteur : 57 pixels.
  • Largeur : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré).

Présentation

  • Arrière-plan : Couleur #040707.
  • Seules les couleurs et les images d'arrière-plan prescrites peuvent être utilisées à l'extérieur de ces limites.
  • Les liens SANTÉ (HEALTH), VOYAGE (TRAVEL), SERVICE CANADA, EMPLOIS (JOBS) et ÉCONOMIE (ECONOMY) sont affichés de gauche à droite, 10 pixels à droite de la limite intérieure gauche du pied de page du gouvernement du Canada. Le nom de domaine figure sur la deuxième ligne.
  • Le lien Canada.ca est placé à 15 pixels à gauche de la limite intérieure droite du pied de page du gouvernement du Canada.
  • Le lien Canada.ca est séparé des autres liens par une barre verticale grise (#666), il y a 45 pixels d'espace entre le lien Canada.ca et la barre verticale.
  • Les autres liens sont séparés par un espace de 45 pixels.
    • Police : Arial.
    • Taille de la police (Canada.ca) : 16 points.
    • Taille de la police (autres liens) : 9 points.
    • Couleur de la police : Blanc (#fff).
    • Arrière-plan : Transparent.
    • Tous les liens sont alignés verticalement avec le milieu du pied de page du gouvernement du Canada.
    • Le lien HEALTH mène à http://healthycanadians.gc.ca/index-eng.php, et le lien SANTÉ canadiensensante.gc.ca mène à http://canadiensensante.gc.ca/index-fra.php.
    • Le lien TRAVEL mène à http://www.travel.gc.ca/index-eng.asp et le lien VOYAGE voyage.gc.ca mène à http://www.voyage.gc.ca/index-fra.asp.
    • Le lien SERVICE CANADA mène à http://www.servicecanada.gc.ca/eng/home.shtml ou à http://www.servicecanada.gc.ca/fra/accueil.shtml.
    • Le lien JOBS mène à http://www.jobbank.gc.ca/intro-eng.aspx, et le lien EMPLOIS guichetemplois.gc.ca mène à http://www.guichetemplois.gc.ca/Intro-fra.aspx.
    • Le lien ECONOMY mène à http://actionplan.gc.ca/en et le lien ÉCONOMIE mène à http://plandaction.gc.ca/fr.
    • Le lien Canada.ca mène à http://canada.ca/en/index.html ou à http://canada.ca/fr/index.html.

Exceptions

  • Aucun lien ne s'affiche lorsque le site ou l'application est présenté dans une langue qui n'est pas l'une des langues officielles.

12. Pages de message du serveur

Page de message du serveur unilingue à une colonne comme décrit à la Section 12. Pages de message du serveur.

Les spécifications ci-dessous s'appliquent à toutes les pages de messages du serveur. Chaque page de messages du serveur est divisée en trois zones : en-tête, corps et pied de tête. L'en-tête contient la signature du gouvernement du Canada, le mot-symbole « Canada » et le titre du site ou de l'application dans chaque langue. Le corps contient la zone de contenu. Le pied de page contient le lien Avis.

S'il est possible de déterminer la langue de l'utilisateur, le message du serveur n'est présenté que dans cette langue. Dans le cas contraire, le message du serveur est présenté dans chacune des langues affichées dans le site ou l'application.

12.1. En-tête

Contient la signature du gouvernement du Canada, le mot-symbole « Canada » et le bloc du titre du site ou de l'application.

Emplacement

  • Haut de la page de messages du serveur.

Dimensions

  • Largeur extérieure : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré).

Présentation

  • L'arrière-plan de l'en-tête est blanc (#FFFFFF).
  • Le contenu se limite aux trois éléments de l'en-tête.

12.1.1. Signature du gouvernement du Canada

La signature du gouvernement du Canada (sig-eng ou sig-fra) doit être présente dans toutes les pages de messages du serveur du gouvernement.

Emplacement

  • 10 pixels à droite de la limite intérieure gauche de l'en-tête.
  • 20 pixels sous la limite supérieure de l'en-tête.

Dimensions

  • Largeur : 214 pixels.
  • Hauteur : 20 pixels.

12.1.2. Mot-symbole « Canada »

Le mot-symbole « Canada » (wmms) doit être présent dans toutes les pages de messages du serveur du gouvernement du Canada.

Emplacement

  • 10 pixels à gauche de la limite intérieure droite de l'en-tête.
  • 10 pixels sous la limite supérieure de l'en-tête.

Dimensions

  • Largeur : 126 pixels.
  • Hauteur : 30 pixels.

12.1.3. Bloc de titre du site ou de l'application

Page de message du serveur bilingue à deux colonne comme décrit à la Section 12. Pages de message du serveur.

Le bloc de titre du site ou de l'application contient le titre du site ou de l'application dans chacune des langues utilisées pour présenter le message du serveur.

Emplacement

  • 17 pixels sous la signature du gouvernement du Canada et le mot-symbole « Canada ».

Présentation

  • Colonnes :
    • Lorsqu'une seule langue est utilisée : 1 colonne.
    • Lorsque plus d'une langue est utilisée : 2 colonnes.
  • Couleur d'avant-plan : #295376.
  • Marge de gauche : 10 pixels.
  • Marge de droite : 10 pixels.
  • Bordure : bas seulement, 1 pixel, couleur unie #666.
12.1.3.1. Titre du site ou de l'application dans la première langue officielle

Emplacement

  • Première colonne.
  • Lorsque le titre du site ou de l'application dans la seconde langue officielle est présent : Sur la même ligne de base que le titre du site ou de l'application dans la seconde langue officielle.

Présentation

  • Taille de la police : 14,5 points, ou moins selon la longueur du titre.
  • Texte : Titre du site ou de l'application dans la première langue officielle.
  • Alignement : Aligné à gauche.
  • Texte sélectionné à l'aide de la souris ou du clavier : texte souligné.

Comportement

  • Renvoie à la page d'accueil du site ou de l'application dans la langue correspondante.
12.1.3.2. Titre du site ou de l'application dans la seconde langue officielle

Emplacement

  • Deuxième colonne.
  • Sur la même ligne de base que le titre du site ou de l'application dans la première langue officielle.

Présentation

  • Taille de la police : 14,5 points, ou moins selon la longueur du titre.
  • Texte : Titre du site ou de l'application dans la seconde langue officielle.
  • Alignement : Aligné à droite.
  • Texte sélectionné à l'aide de la souris ou du clavier : texte souligné.

Comportement

  • Renvoie à la page d'accueil du site ou de l'application dans la langue correspondante.
12.1.3.3. Titre du site ou de l'application dans les langues supplémentaires

Emplacement

  • Première et troisième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre impair :
    • Première colonne.
    • 10 pixels sous le titre du site ou de l'application qui précède, dans la colonne.
    • Sur la même ligne de base que la langue supplémentaire suivante désignée par un chiffre pair.
  • Deuxième et quatrième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre pair :
    • Deuxième colonne.
    • 10 pixels sous le titre du site ou de l'application qui précède, dans la colonne.
    • Sur la même ligne de base que la langue supplémentaire précédente désignée par un chiffre impair.

Présentation

  • Taille de la police : 11,5 points, ou moins selon la longueur du titre.
  • Texte : Titre du site ou de l'application dans la langue supplémentaire et dans l'alphabet de cette langue.
  • Alignement :
    • Première et troisième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre impair : Aligné à gauche.
    • Deuxième et quatrième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre pair : Aligné à droite.
  • Texte sélectionné à l'aide de la souris ou du clavier : texte souligné.

Comportement

  • Renvoie à la page d'accueil du site ou de l'application dans la langue correspondante.

12.2. Corps

Le corps contient le bloc de messages du serveur dans chacune des langues possibles pour ce message.

Emplacement

  • Immédiatement sous l'en-tête.

Dimensions

  • Largeur extérieure : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré).

Présentation

  • Colonnes :
    • Lorsqu'une seule langue est utilisée : 1 colonne.
    • Lorsque plus d'une langue est utilisée : 2 colonnes.
  • Arrière-plan : Transparent.
  • Marge de gauche : 10 pixels.
  • Marge de droite : 10 pixels.
  • Marge du bas : 12 pixels.
  • Bordure : bas seulement; 10 pixels, couleur unie #28507A.

12.2.1. Bloc de messages du serveur dans la première langue officielle

Chaque bloc de messages du serveur contient le titre du message, le corps du message et les liens vers la page d'accueil et les coordonnées.

Emplacement

  • Première colonne.
  • Lorsque le bloc de messages du serveur dans la seconde langue officielle est présent : sur la même ligne de base que le bloc de messages du serveur dans la seconde langue officielle.

Présentation

  • Alignement : Aligné à gauche.
12.2.1.1. Titre du message du serveur

Emplacement

  • Au haut du bloc de messages du serveur.

Présentation

  • Texte : Titre du message du serveur dans la première langue officielle.
12.2.1.2. Corps du message du serveur

Emplacement

  • Sous le titre du message du serveur.

Présentation

  • Texte : Corps du message du serveur dans la première langue officielle.
12.2.1.3. Lien vers la page « Accueil »

Emplacement

  • Sous le corps du message du serveur.

Présentation

  • Texte : Accueil, dans la première langue officielle.

Comportement

  • Renvoie à la page d'accueil du site ou de l'application dans la langue correspondante.
12.2.1.4. Lien « Coordonnées »

Emplacement

  • Sous le lien Accueil.

Présentation

  • Texte : Contactez-nous, dans la première langue officielle.

Comportement

  • Renvoie à la page de coordonnées du site ou de l'application dans la langue correspondante.

12.2.2. Bloc de messages du serveur dans la seconde langue officielle

Chaque bloc de messages du serveur contient le titre du message, le corps du message et les liens vers la page d'accueil et les coordonnées.

Emplacement

  • Deuxième colonne.
  • Sur la même ligne de base que le bloc de messages du serveur dans la première langue officielle.

Présentation

  • Alignement : Aligné à gauche.
12.2.2.1. Titre du message du serveur

Emplacement

  • Au haut du bloc de messages du serveur.

Présentation

  • Texte : Titre du message du serveur, dans la seconde langue officielle.
12.2.2.2. Corps du message du serveur

Emplacement

  • Sous le titre du message du serveur.

Présentation

  • Texte : Corps du message du serveur, dans la seconde langue officielle.
12.2.2.3. Lien vers la page « Accueil »

Emplacement

  • Sous le corps du message du serveur.

Présentation

  • Texte : Accueil, dans la seconde langue officielle.

Comportement

  • Renvoie à la page d'accueil du site ou de l'application dans la langue correspondante.
12.2.2.4. Lien « Coordonnées »

Emplacement

  • Sous le lien Accueil.

Présentation

  • Texte : Contactez-nous, dans la seconde langue officielle.

Comportement

  • Renvoie à la page de coordonnées du site ou de l'application, dans la langue correspondante.

12.2.3. Bloc de messages du serveur dans les langues supplémentaires

Chaque bloc de messages du serveur contient le titre du message, le corps du message et les liens vers la page d'accueil et les coordonnées.

Emplacement

  • Première et troisième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre impair :
    • Première colonne.
    • 20 pixels sous le bloc précédent de messages du serveur dans la colonne.
    • Sur la même ligne de base que la langue supplémentaire suivante désignée par un chiffre pair.
  • Deuxième et quatrième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre pair :
    • Deuxième colonne.
    • 20 pixels sous le bloc précédent de messages du serveur dans la colonne.
    • Sur la même ligne de base que la langue supplémentaire précédente désignée par un chiffre impair.

Présentation

  • Alignement : Aligné à gauche.
12.2.3.1. Titre du message du serveur

Emplacement

  • Au haut du bloc de messages du serveur.

Présentation

  • Texte : Titre du message du serveur, dans la langue supplémentaire et dans l'alphabet de cette langue.
12.2.3.2. Corps du message du serveur

Emplacement

  • Sous le titre du message du serveur.

Présentation

  • Texte : Corps du message du serveur, dans la langue supplémentaire et dans l'alphabet de cette langue.
12.2.3.3. Lien vers la page « Accueil »

Emplacement

  • Sous le corps du message du serveur.

Présentation

  • Texte : Accueil, dans la langue supplémentaire, et selon l'alphabet de cette langue.

Comportement

  • Renvoie à la page d'accueil du site ou de l'application dans la langue correspondante.
12.2.3.4. Lien « Coordonnées »

Emplacement

  • Sous le lien Accueil.

Présentation

  • Texte : Contactez-nous, dans la langue supplémentaire et dans l'alphabet de cette langue.

Comportement

  • Renvoie à la page de coordonnées du site ou de l'application dans la langue correspondante.

12.3. Pied de page

Le pied de page contient le lien Avis dans chacune des langues possibles du message du serveur.

Emplacement

  • Immédiatement sous le corps.

Dimensions

  • Largeur extérieure : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré).

Présentation

  • Colonnes :
    • Lorsqu'une seule langue est utilisée : 1 colonne.
    • Lorsque plus d'une langue est utilisée : 2 colonnes.
  • Arrière-plan : Transparent.
  • Marge du haut : 17 pixels.
  • Marge de gauche : 10 pixels.
  • Marge de droite : 10 pixels.

12.3.1. Liens « Avis » dans la première langue officielle

Emplacement

  • Première colonne.
  • Lorsque le lien Avis dans la seconde langue officielle est présent : sur la même ligne de base que le lien Avis dans la seconde langue officielle.

Présentation

  • Remplissage du bas : 11 pixels.
  • Police : Verdana, 9 point.
  • Texte : Avis dans la première langue officielle.
  • Alignement : Aligné à gauche.
  • Non souligné.

Comportement

12.3.2. Lien « Avis » dans la seconde langue officielle

Emplacement

  • Deuxième colonne.
  • Sur la même ligne de base que le lien Avis dans la première langue officielle.

Présentation

  • Remplissage du bas : 11 pixels.
  • Police : Verdana, 9 point.
  • Texte : Avis dans la seconde langue officielle.
  • Alignement : Aligné à droite.
  • Non souligné.

Comportement

12.3.3. Lien « Avis » dans les langues supplémentaires

Emplacement

  • Première et troisième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre impair :
    • Première colonne.
    • Sous le lien Avis précédent dans la colonne.
    • Sur la même ligne de base que la langue supplémentaire suivante désignée par un chiffre pair.
  • Deuxième et quatrième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre pair :
    • Deuxième colonne.
    • Sous le lien Avis précédent dans la colonne.
    • Sur la même ligne de base que la langue supplémentaire précédente désignée par un chiffre impair.

Présentation

  • Remplissage du bas : 11 pixels.
  • Police : Verdana, 9 point.
  • Texte : Avis, dans la langue supplémentaire et dans l'alphabet de cette langue.
  • Alignement :
    • Première et troisième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre impair : Aligné à gauche.
    • Deuxième et quatrième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre pair : Aligné à droite.
  • Non souligné.

Comportement

13. Pages d'entrée

Page d'entrée bilingue comme décrit à la Section 13. Pages d'entrée.

Chaque page d'entrée est divisée en trois principales zones : en-tête, corps et pied de page. L'en-tête contient la signature du gouvernement du Canada. Le corps contient trois éléments : le titre du site ou de l'application dans chacune des langues, les liens de sélection de la langue et le mot-symbole « Canada ». Le pied de page contient les liens Avis dans chacune des langues.

Exceptions

  • Les sites Web et les applications Web ayant une adresse unilingue n'utilisent pas de page d'entrée.

13.1. En-tête

L'en-tête contient la signature du gouvernement du Canada. L'arrière-plan est blanc (#fff).

Dimensions

  • Largeur extérieure : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré).

Présentation

  • Le contenu se limite à la signature du gouvernement du Canada. Seules les couleurs et les images d'arrière-plan prescrites peuvent être utilisées.

13.1.1. Signature du gouvernement du Canada

La signature du gouvernement du Canada (sig-eng ou sig-fra) doit être présente dans toutes les pages d'entrée du gouvernement du Canada.

Emplacement

  • 10 pixels à droite de la limite intérieure gauche de l'en-tête.
  • 20 pixels sous la limite supérieure de l'en-tête.
  • 10 pixels au-dessus de la limite inférieure de l'en-tête.

Dimensions

  • Largeur : 214 pixels.
  • Hauteur : 20 pixels.

13.2. Corps

Le corps est situé immédiatement sous l'en-tête et contient l'arrière-plan, le titre du site ou de l'application dans chacune des langues, les liens de sélection de la langue et le mot-symbole « Canada ».

Dimensions

  • Largeur extérieure : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré).

Présentation

  • Welcome/Bienvenue ou Bienvenue/Welcome au haut du corps.
  • Couleur : Gris foncé (#222).
  • Alignement horizontal : Aligné au centre.
  • Remplissage ‒ haut/bas : 40 pixels.
  • Police : Verdana, 19,5 points, ou moins selon la longueur du titre.
  • Arrière-plan extérieur : Transparent.
  • Arrière-plan intérieur : (splashpage-background.jpg) comme image et couleur blanc (#fff).
  • L'image d'arrière-plan est placée à 20 pixels à gauche de la limite intérieure gauche du corps et à 42 pixels au-dessus de la limite supérieure du corps.
  • L'image d'arrière-plan se répète horizontalement.
  • Le contenu reste à l'intérieur des limites du corps. Seules les couleurs et les images d'arrière-plan prescrites peuvent être utilisées.

13.2.1. Titre du site ou de l'application

Contient le titre du site ou de l'application.

Emplacement

  • 62 pixels sous Welcome/Bienvenue ou Bienvenue/Welcome.
  • Les titres de site ou d'application alignés à gauche sont placés à 10 pixels à droite de la limite intérieure gauche du corps.
  • Les titres de site ou d'application alignés à droite sont placés à 10 pixels à gauche de la limite intérieure droite du corps.
  • Le titre du site ou de l'application dans la première langue officielle est aligné avec la limite intérieure gauche du corps.
  • Le titre du site ou de l'application dans la seconde langue officielle est aligné avec la limite intérieure droite du corps.
  • Les titres de site ou d'application dans la première et la seconde langue officielle sont alignés verticalement.
  • Les titres de site ou d'application dans les langues supplémentaires sont placés sous les titres de site ou d'application dans la première et la seconde langue officielle.

Présentation

  • Couleur d'avant-plan : noir (#000).
  • Hauteur minimum (total) : 90 pixels.
  • Police : Verdana, 14 points, ou moins selon la longueur du titre.
  • Taille de la police (titre du site ou de l'application dans une autre langue) : 11,5 points, ou moins selon la longueur du titre.

13.2.2. Liens de sélection de la langue

Renvoient aux pages d'accueil dans les langues offertes.

Emplacement

  • 10 pixels à droite de la limite intérieure gauche du corps.
  • 61 pixels sous le titre du site ou de l'application.
  • Les liens de sélection de la langue pour la première et la seconde langue officielle sont alignés verticalement sous le titre du site ou de l'application.
  • Les liens de sélection de la langue supplémentaires sont placés sous les liens de sélection de la première et de la seconde langue officielle.

Présentation

  • Le texte de chaque lien est le nom officiel de la langue correspondante, dans cette langue et selon son alphabet.
  • Avant-plan : Gris foncé (#333).
  • Arrière-plan (normal) : image sp-pe-button et couleur gris (#ccc).
  • Arrière-plan (texte sélectionné à l'aide de la souris ou du clavier) : image sp-pe-button-focus et couleur gris (#ddd).
  • 21 pixels d'espace horizontal entre les liens de sélection de la langue.
  • 14 pixels d'espace vertical entre les rangées de liens de sélection de la langue.
  • Police : Verdana.
  • Largeur : 139 pixels.
  • Alignement horizontal : aligné au centre.
  • Remplissage ‒ haut/bas : 10 pixels.
  • Remplissage ‒ gauche/droite : 30 pixels.
  • Bordure (bas) : 1 pixel, couleur unie #999.
  • Bordure (droite) : 1 pixel, couleur unie #999.
  • Bordure (haut) : 1 pixel, couleur unie #fff.
  • Bordure (gauche) : 1 pixel, couleur unie #fff.

Comportement

  • Chaque lien mène à la page d'accueil, dans la langue correspondante.

13.2.3. Mot-symbole « Canada »

Le mot-symbole « Canada » (wmms) doit figurer dans toutes les pages d'entrée du gouvernement du Canada.

Emplacement

  • 10 pixels à gauche de la limite intérieure droite du corps.
  • 65 pixels sous le titre du site ou de l'application.

Dimensions

  • Largeur : 126 pixels.
  • Hauteur : 30 pixels.

13.3. Pied de page

Le pied de page est placé immédiatement sous le corps, et contient le lien Avis.

Dimensions

  • Largeur extérieure : 100 % (toute la largeur de la page).
  • Largeur intérieure : 960 pixels (centré).

13.3.1. Lien « Avis »

Emplacement

  • 10 pixels à droite de la limite intérieure gauche du pied de page.
  • Les liens sont placés à 10 pixels sous le lien de sélection de la langue correspondante.

Présentation

  • Les liens ne sont pas soulignés.
  • 21 pixels d'espace horizontal entre les liens.
  • Police : Verdana, 9 point.
  • Largeur : 139 pixels.
  • Alignement horizontal : Aligné à gauche.
  • Le contenu se limite au lien Avis faisant partie du pied de page. Seules les couleurs et les images d'arrière-plan prescrites peuvent être utilisées.

Comportement

Date de modification :