Bande de coordonnées: Système de conception de Canada.ca
Dernière mise à jour : 2024-04-03
La bande de coordonnées fournit des informations de contact pertinentes. La bande s’étend sur toute la largeur de la page sur laquelle elle apparaît.
Sur cette page
Quand l’utiliser
N’utilisez la bande de coordonnées que sur les pages pour lesquelles les coordonnées se rapportent à une tâche principale (c’est-à-dire sur une page d’accueil institutionnelle). Lorsque les coordonnées se rapportent à une tâche secondaire, envisagez d’utiliser plutôt un pied de page contextuel.
Utilisez la bande de coordonnées sur les pages pour :
- présenter les coordonnées de manière cohérente dans divers contextes;
- donner accès à plusieurs options de contact.
Quoi éviter
N’ajoutez pas de bordures à cette bande.
N’ajoutez pas de liens vers autre chose que des coordonnées dans une bande de coordonnées.
Contenu et conception
Trouvez des spécifications de contenu et de conception et des exemples visuels.
Spécifications de contenu
Utilisez un titre descriptif commençant par « Communiquer avec » ou « Coordonnées ».
Utilisez un texte de lien descriptif afin que les coordonnées auxquelles l’utilisateur est mené soient claires.
Le nombre optimal de liens est de trois.
Si vous utilisez un pied de page contextuel contenant les mêmes liens de coordonnées, veillez à utiliser les mêmes étiquettes de lien.
Spécifications de conception
- Le texte utilise les styles standards de Canada.ca :
- Typographie
- Couleurs
- Codez le titre comme H2, mais avec le style H3.
- Mettez les liens en gras et disposez-les dans une liste horizontale sans puce.
- Arrière-plan :
- Couleur par défaut : #f5f5f5
- Marges intérieures (padding) :
- Bas : 15 px
- Haut : 15 px
- Mise en page :
- Si vous avez plusieurs séries de liens à présenter sur la même page, vous pouvez utiliser plus d’une bande de coordonnées sur la page dans des couleurs de fond alternant entre le blanc et le gris (rayures zébrées).
Exemples visuels
Description de l’image : bande de coordonnées standard - grand écran
Une bande grise horizontale avec le titre Coordonnées suivie de trois liens sur une seule rangée. Le premier lien est Communiquer avec [Institution]; les liens suivants sont des espaces réservés pour les tâches principales liées aux contacts.
Description de l’image : bande de coordonnées standard - petit écran
Une seule colonne avec un ombrage gris clair en arrière-plan. Le titre Coordonnées est suivi de trois liens. Le premier lien est Communiquer avec [Institution]; les liens suivants sont des espaces réservés pour les tâches principales liées aux contacts.
Description de l’image : bande de coordonnées multiples - grand écran
Une bande blanche horizontale avec le titre Coordonnées pour [sujet] suivi de six liens. Les liens sont présentés sur deux rangées avec trois liens par rangée.
La bande blanche est suivie d’une bande grise horizontale avec le titre Coordonnées pour [sujet] suivi de six liens. Les liens sont présentés sur deux rangées avec trois liens par rangée.
Description de l’image : bande de coordonnées multiples - petit écran
Une seule colonne avec un ombrage blanc contient le titre Coordonnées pour [sujet] suivi de six liens.
Cette colonne est suivie d’une seule colonne avec un ombrage contenant le titre Coordonnées pour [sujet] suivi de six liens.
Comment procéder à la mise en œuvre
Trouvez des exemples pratiques et de code pour mettre en œuvre la configuration de conception bande de coordonnées.
Référence pour la mise en œuvre du thème GCWeb (BOEW)
La référence à l’implémentation comprend la façon de configurer chaque élément du système de conception.
Mises en œuvre
Déterminez ce qui convient le mieux au type de page que vous créez.
GC-AEM
Pour Adobe Experience Manager (AEM) du gouvernement du Canada (GC) :
Recherche et justification
Consultez les conclusions de la recherche et la justification de la politique.
Constatations découlant de la recherche
L’Agence du revenu du Canada (ARC) et le Bureau de la transformation numérique ont mis au point des bandes de coordonnées dans le cadre du projet d’optimisation des coordonnées de l’ARC. Nous avons déterminé que les bandes de coordonnées sont utiles pour donner accès à des coordonnées précises pour différents services.
Justification stratégique
La bande de coordonnées est requise dans les modèles obligatoires suivants :
Derniers changements
- Mise à jour de l’orientation pour y inclure les spécifications de contenu et de conception, des exemples visuels et une orientation sur la mise en œuvre.
Détails de la page
- Date de modification :