À propos de Québec.ca
Créer une page d'atterrissage de campagne
Dans cette page :
Cet aide-mémoire vous accompagnera dans la conception de votre page d’atterrissage qui rappelle, sur Québec.ca, le visuel d’une campagne en cours sur d’autres canaux. Il est possible d’avoir un rappel visuel de campagne sur certains types de page : navigation, terminales et de campagne.
Rédaction
Québec.ca est un site Web informationnel. Une page d'atterrissage de campagne contient du contenu standard, mais permet l'ajout d'éléments visuels. Comme les contenus doivent rester pertinents même lorsque la campagne est terminée, il est important de respecter les orientations du guide de rédaction et porter une attention particulière :
- aux titres ;
- au ton (les phrases promotionnelles sont à éviter);
- à la simplicité et à la concision.
Page de navigation
Quand l’utiliser
Vous pouvez utiliser le visuel promotionnel sur une page de navigation lorsque votre campagne touche un regroupement de pages existantes.
Comment l’utiliser
Les éléments promotionnels s'ajoutent dans l'ordre suivant.
Ordre | Élément | État |
---|---|---|
1 | Entête PIV | Par défaut |
2 | Bandeau de visuel promotionnel | Facultatif Personnalisable |
3 | Fil d'Ariane | Par défaut |
4 | Titre | Par défaut |
5 | Bloc En demande | Facultatif |
6 | Zone Contenu | Peut contenir uniquement des blocs de navigation |
7 | Bas de page | Par défaut |
Page terminale
Quand l’utiliser
Vous pouvez ajouter le visuel promotionnel lorsque votre campagne touche le contenu d’une page existante.
Comment l’utiliser
Vous pouvez ajouter les éléments promotionnels dans la page terminale en suivant l'ordre suivant. Cette page peut utiliser le gabarit « Page de contenu avec menu de gauche » ou « Page de contenu sans menu de gauche ».
Ordre | Élément | État |
---|---|---|
1 | Entête PIV | Par défaut |
2 | Bandeau de visuel promotionnel | Facultatif Personnalisable |
3 | Fil d'Ariane | Par défaut |
4 | Menu liste (à gauche) | Facultatif |
5 | Titre | Par défaut |
6 | Bloc En demande | Facultatif |
7 | Avis ou Bloc Coordonnées | Facultatif |
8 | Menu-ancres | Facultatif |
9 | Zone Contenu | Peut contenir tout type de contenu : texte, listes à puces, vidéos, vidéo intégrée, etc. Les citations peuvent être ajoutées n’importe où dans les zones de contenu. |
10 | À consulter aussi | Facultatif |
11 | Bas de page | Par défaut |
Page d’atterrissage de campagne
Quand l’utiliser
Vous pouvez utiliser ce type de page lorsque votre campagne a besoin d’un contenu temporaire, créé spécialement pour le temps de la campagne.
Vous pouvez aussi l’utiliser cette solution sur une page de contenu pérenne, mais les ajouts promotionnels doivent être retirés une fois la période terminée.
Comment l’utiliser
Le gabarit d’atterrissage de campagne offre plusieurs possibilités, mais l’ordre d’apparition des éléments doit être respecté.
Ordre | Élément | État |
---|---|---|
1 | Entête PIV | Par défaut |
2 | Bandeau de visuel promotionnel | Facultatif Personnalisable |
3 | Fil d'Ariane | Par défaut L'arrière-plan du bloc titre est personnalisable (même couleur que l'élément #4) |
4 | Titre (bloc titre personnalisable) | L'arrière-plan est personnalisable (le même que #3) |
5 | Tuiles cliquables directement sous le bloc titre personnalisable | Facultatif Personnalisable |
6 | Bloc En demande | Facultatif |
7 | Avis ou Bloc Coordonnées | Facultatif |
8 | Menu-ancres | Facultatif |
9 | Zone Contenu | Peut contenir tout type de contenu : texte, listes à puces, vidéos, vidéo intégrée, etc. Les citations peuvent être ajoutées n’importe où dans les zones de contenu. |
10 | Module vidéo | Facultatif |
11 | Zone contenu | Peut contenir tout type de contenu : texte, listes à puces, vidéos, vidéo intégrée, etc. Les citations peuvent être ajoutées n’importe où dans les zones de contenu. |
12 | Tuiles cliquables au sein des contenus | Facultatif Personnalisable Peuvent être utilisées plus d'une fois dans la page |
13 | À consulter aussi | Facultatif |
14 | Bas de page | Par défaut |
Assurance-qualité
La liste des éléments personnalisables doit être envoyée à contenu@quebec.ca au moins 48 heures avant le début de la campagne. Dans le message, veuillez préciser le numéro de la page (UID). Assurez-vous d'avoir tous ces éléments.
- Deux formats pour les bandeaux promotionnels (bureau et mobile) qui respectent les zones de sécurité.
- Code hexadécimal de la couleur en dessous du bandeau de visuel promotionnel (pour les écrans larges).
- Code hexadécimal de la couleur d'arrière-plan du bloc titre personnalisable (Ariane et H1).
- Code hexadécimal de la couleur des polices dans le bloc titre (#FFFFFF ou #223654).
- Code hexadécimal de la couleur d'arrière-plan des tuiles directement sous le bloc titre personnalisable.
- Code hexadécimal de la couleur sous les modules vidéos.
- Code hexadécimal de la couleur d'arrière-plan des tuiles au sein des contenus.
- Icônes pour chaque tuile cliquable, si applicable :
- Fichiers d’icônes en SVG ou PNG transparents;
- Le style d’icône doit correspondre aux icônes du Système de design gouvernemental (icônes linéaires);
- Couleur des icônes : bleu foncé #223654.
Liste des éléments visuels
Voici la liste des éléments visuels pouvant être inclus dans une page d'atterrissage de campagne :
Bandeaux promotionnels
Le bandeau de visuel promotionnel est utilisé pour faire un rappel avec le visuel d’une campagne en cours sur d’autres canaux. Il s’ajoute sur 1 page seulement (1 page habillée par visuel campagne). Le bandeau de visuel promotionnel n’est jamais décliné sur l’ensemble d’une section.
Élément | Gabarit d’atterrissage de campagne | Pages de navigation | Pages terminales |
---|---|---|---|
Présence d’un bandeau de visuel promotionnel | OUI | OUI | OUI |
Positionnement du bandeau de visuel promotionnel | Sous le bandeau PIV | Sous le bandeau PIV | Sous le bandeau PIV |
Personnalisation de la couleur de l’arrière-plan du bandeau (pour les écrans larges) | NON | NON | NON |
Dimensions
Deux formats sont à produire pour que le bandeau soit ajouté à votre page sur Québec.ca : le format bureau et tablette et le format mobile.
Spécifications | Dimensions de l’image | Dimensions de la zone de sécurité (centrale) |
---|---|---|
Format bureau et tablette | 2 000 px (largeur) | 745 px (largeur) |
Format mobile | 700 px (largeur) | 315 px (largeur) |
Bloc titre personnalisable
Élément | Gabarit d’atterrissage de campagne | Pages de navigation | Pages terminales |
---|---|---|---|
Présence du bloc titre personnalisable | OUI | NON | NON |
Positionnement du bloc titre personnalisable | Sous le bandeau de visuel promotionnel | N/A | N/A |
Personnalisation de la couleur de l’arrière-plan du bloc titre personnalisable | OUI | N/A | N/A |
Personnalisation de la couleur du texte du fil d’Ariane et du titre H1 (#FFFFFF ou #223654) | OUI | N/A | N/A |
À prévoir
- Code hexadécimal de la couleur d’arrière-plan du fil d’Ariane et du titre de niveau 1.
- Couleur du texte du fil d’Ariane et du titre de niveau 1 : blanc #FFFFFF ou bleu foncé #223654. Si votre fond d’arrière-plan est foncé, priorisez le blanc. S’il est plutôt pâle, privilégiez le bleu foncé.
Le fil d’Ariane et le titre doivent utiliser la même couleur.
Le contraste de couleurs entre l’arrière-plan et le texte doit être de 4.5:1 au minimum. Pour vérifier, vous pouvez utiliser cet outil d’analyse des contrastes de couleurs .
Il faut s’assurer de respecter le Standard sur l’accessibilité des sites Web du gouvernement du Québec , notamment en ce qui concerne les contrastes de couleur.
Avis
Un avis est présenté sous forme d’encadré lorsqu’une information doit absolument attirer l’attention du public.
Elle peut être ajoutée n’importe où dans la zone de contenu, mais idéalement en haut de la page. Les avis doivent être utilisés avec modération. On limite leur utilisation à 1 par page, idéalement.
Élément | Gabarit d’atterrissage de campagne | Pages de navigation | Pages terminales |
---|---|---|---|
Ajout d’avis | OUI | NON | OUI |
Positionnement des avis | N’importe où dans le contenu, généralement en haut de page. Voir la fiche Avis du système de design pour plus de détails. | N/A | N’importe où dans le contenu, généralement en haut de page. Voir la fiche Avis du système de design pour plus de détails. |
Positionnement par rapport au menu-ancres | Idéalement, sous le menu-ancres (qui se trouve le plus haut possible dans la page). Peut exceptionnellement être au-dessus du menu-ancres. | N/A | Idéalement, sous le menu-ancres (qui se trouve le plus haut possible dans la page). Peut exceptionnellement être au-dessus du menu-ancres. |
Tuiles cliquables
Les tuiles cliquables sont disponibles en 2 variations :
Les tuiles peuvent inclure ou non une icône.
Directement sous le bloc titre
Les tuiles cliquables directement sous le bloc titre personnalisable doivent uniquement être des liens vers des ancres dans la page ou encore des contenus connexes (on évite les liens externes). Le gabarit permet d’ajouter deux ou trois tuiles.
Les tuiles cliquables directement sous le bloc titre personnalisable ne doivent pas avoir de titre et de description au-dessus des tuiles ni de description à l’intérieur de la tuile cliquable. Voir un exemple
Élément | Gabarit d’atterrissage de campagne | Pages de navigation | Pages terminales |
---|---|---|---|
Ajout de tuiles cliquables (directement sous le bloc titre personnalisable) | OUI | NON | NON |
Positionnement du bandeau de tuiles cliquables | Directement sous le bloc titre personnalisable. | N/A | N/A |
Positionnement par rapport au menu-ancres | Le plus proches possible (le menu-ancres devrait être le plus haut possible dans la page). | N/A | N/A |
Nombre de tuiles pouvant être ajoutées | 2 ou 3 | N/A | N/A |
Type de liens pouvant être ajoutés | Ancres dans la page, liens internes ou liens externes | N/A | N/A |
Disposition des tuiles dans le bloc (dans le format bureau) | En 3 colonnes | N/A | N/A |
Personnalisation de la couleur de l’arrière-plan des tuiles cliquables | OUI | N/A | N/A |
Personnalisation de la couleur de la surface des tuiles cliquables | NON (n’existe plus) | N/A | N/A |
Personnalisation de la couleur de la bordure des tuiles cliquables | NON (n’existe plus) | N/A | N/A |
Personnalisation de la couleur des polices de caractère sur les tuiles cliquables | NON (n’existe plus) | N/A | N/A |
Utilisation d'une icône | OUI | N/A | N/A |
Titre et description au-dessus des tuiles cliquables | NON | N/A | N/A |
Avoir une description en plus d’un titre à l’intérieur de la tuile cliquable | NON | N/A | N/A |
Dans le contenu
Les tuiles cliquables au sein de contenus peuvent être des liens vers des ancres dans la page, vers des contenus connexes ou des liens externes. Le gabarit permet d’ajouter plusieurs tuiles, disposées en 3 ou 4 colonnes (dans le format bureau).
Les tuiles cliquables au sein des contenus doivent avoir un titre et une description au-dessus des tuiles ainsi qu’une description à l’intérieur de la tuile cliquable. Voir un exemple .
Élément | Gabarit d’atterrissage de campagne | Pages de navigation | Pages terminales |
---|---|---|---|
Ajout de tuiles cliquables (au sein du contenu) | OUI | NON | NON |
Positionnement de la zone de tuiles cliquables | N’importe où dans le contenu | N/A | N/A |
Positionnement par rapport au menu-ancres | Sous le menu-ancres (le menu-ancres devrait être le plus haut possible dans la page). Si couleur d’arrière-plan personnalisée: ne pas le placer directement sous le menu-ancres. | N/A | N/A |
Nombre de tuiles pouvant être ajoutées | 2 à 8 | N/A | N/A |
Type de liens pouvant être ajoutés | Ancres dans la page, liens internes ou liens externes | N/A | N/A |
Disposition des tuiles dans le bloc (dans le format bureau) | En 3 ou 4 colonnes | N/A | N/A |
Personnalisation de la couleur de l’arrière-plan des tuiles cliquables | OUI | N/A | N/A |
Personnalisation de la couleur de la surface des tuiles cliquables | NON (n’existe plus) | N/A | N/A |
Personnalisation de la couleur de la bordure des tuiles cliquables | NON (n’existe plus) | N/A | N/A |
Personnalisation de la couleur des polices de caractère sur les tuiles cliquables | NON (n’existe plus) | N/A | N/A |
Utilisation d'une icône | OUI | N/A | N/A |
Titre et description au-dessus des tuiles cliquables | OUI | N/A | N/A |
Avoir une description en plus d’un titre à l’intérieur de la tuile cliquable | OUI | N/A | N/A |
Icônes
Si votre campagne requiert des tuiles, vous pouvez y ajouter des icônes. Si tel est le cas, vous devrez fournir les fichiers. Pour obtenir les accès à la banque d’icônes, veuillez écrire à design@quebec.ca.
Consulter cette procédure pour la préparation d'icônes en vue d'une utilisation dans les tuiles .
À prévoir
- Code hexadécimal de la couleur d’arrière-plan des tuiles cliquables.
- Icônes pour chaque tuile, si applicable :
- Fichiers d’icônes en SVG ou PNG transparents.
- Le style d’icône doit correspondre aux icônes du Système de design gouvernemental
(icônes linéaires).
- Couleur des icônes : bleu foncé #223654.
Module vidéo
Il est possible d’insérer une ou plusieurs vidéos dans le contenu.
Le module vidéo peut être ajouté plusieurs fois dans la page. Il occupe la largeur entière du gabarit. Ainsi, le contenu peut se trouver au-dessus ou en dessous de lui.
Seules les vidéos de type informationnelles et complémentaires à votre contenu peuvent être ajoutées. Ajouter les publicités qui circulent dans les autres médias est proscrit.
Élément | Gabarit d’atterrissage de campagne | Pages de navigation | Pages terminales |
---|---|---|---|
Ajout de modules vidéo | OUI | NON | NON |
Positionnement du module vidéo | N’importe où dans le contenu | N/A | N/A |
Personnalisation de la couleur de l’arrière-plan de la zone vidéo | OUI | N/A | N/A |
Personnalisation de la couleur des titres des vidéos (#FFFFFF ou #223654) | OUI | N/A | N/A |
Il faut prévoir le code hexadécimal de la couleur d’arrière-plan du module vidéo.
Citations
La citation est un style typographique utilisé pour mettre en évidence le discours d’une personne ou citer la source d’un texte.
Elle peut être ajoutée n’importe où dans la zone de contenu.
Élément | Gabarit d’atterrissage de campagne | Pages de navigation | Pages terminales |
---|---|---|---|
Ajout de citations | OUI | NON | OUI |
Positionnement des citations | N’importe où dans le contenu | N/A | N’importe où dans le contenu |
Personnalisation de la couleur du guillemet des citations | NON (n’est plus personnalisable) | N/A | NON |
À prévoir
- Texte de la citation
- La taille de caractères peut être de grande taille si la citation contient moins de 140 caractères ;
- La taille de caractères doit être de taille normale si la citation contient plus de 140 caractères.
- Nom de la personne ou l’entité citée (obligatoire).
- Titre de la personne citée (facultatif).
Bloc Coordonnées
Le bloc de coordonnées sert à présenter le numéro de téléphone, l’adresse, le courriel et les heures d’ouverture d’un lieu ou d’un service.
Elle peut être ajoutée n’importe où dans la zone de contenu et autant de fois que nécessaire.
Élément | Gabarit d’atterrissage de campagne | Pages de navigation | Pages terminales |
---|---|---|---|
Ajout de blocs Coordonnées | OUI | NON | OUI |
Positionnement du bloc Coordonnées | N’importe où dans le contenu | N/A | N’importe où dans le contenu |
Positionnement par rapport au menu-ancres | Idéalement, sous le menu-ancres (le menu-ancres devrait être le plus haut possible dans la page). Peut exceptionnellement être au-dessus du menu-ancres. | N/A | Idéalement, sous le menu-ancres (le menu-ancres devrait être le plus haut possible dans la page). Peut exceptionnellement être au-dessus du menu-ancres. |
Bloc En demande
Le bloc En demande permet d’ajouter des liens vers des pages afin d’attirer l’attention et rendre la navigation plus rapide.
Il peut être ajouté une fois dans la page, idéalement en haut de la page.
Élément | Gabarit d’atterrissage de campagne | Pages de navigation | Pages terminales |
---|---|---|---|
Ajout de blocs En demande | OUI | OUI | OUI |
Positionnement du bloc En demande | N’importe où dans le contenu, généralement en haut de page. | N’importe où dans le contenu, généralement en haut de page. | N’importe où dans le contenu, généralement en haut de page. |
Blocs de navigation
Les blocs de navigation sont composés du titre et d’une courte description d’une page. Ils servent à présenter les pages présentes dans le sujet actuellement consulté et à poursuivre sa navigation vers le bon contenu.
Outre le bloc En demande, il est le seul contenu pouvant être ajouté dans les pages de navigation.
Élément | Gabarit d’atterrissage de campagne | Pages de navigation | Pages terminales |
---|---|---|---|
Ajout de blocs de navigation | NON (utiliser des tuiles cliquables) | OUI | NON |
Positionnement des blocs de navigation | N/A | À part le bloc En demande, les blocs de navigation sont les seuls contenus de la page de navigation | N/A |
Personnalisation des blocs de navigation (ajout de couleurs, d’icônes, de boutons, etc.) | N/A | NON |
N/A |
Exergues
Il n’est plus possible d’utiliser ce type de bloc.
Bloc Médias sociaux
Il n’est plus possible d’utiliser ce type de bloc.
Dernière mise à jour : 1er juin 2022