Créer une page d'atterrissage de campagne

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.

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.

Quand l’utiliser

Vous pouvez utiliser le visuel promotionnel sur une page de navigation lorsque votre campagne touche un regroupement de pages existantes.

Les éléments promotionnels s'ajoutent dans l'ordre suivant. 

Quand l’utiliser

Vous pouvez ajouter le visuel promotionnel lorsque votre campagne touche le contenu d’une page existante.

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 ». 

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.

Le gabarit d’atterrissage de campagne offre plusieurs possibilités, mais l’ordre d’apparition des éléments doit être respecté. 

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.

Voici la liste des éléments visuels pouvant être inclus dans une page d'atterrissage de campagne :

• Bandeaux promotionnels
• Bloc titre personnalisable
• Avis
• Tuiles cliquables (2 variations, avec ou sans icône)
• Module vidéo
• Citations
• Bloc Coordonnées
• Bloc En demande
• Blocs de navigation
• Exergues
• Bloc Médias sociaux

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.

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.

À 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 .

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.

Consulter la fiche Avis du système de design . 

Les tuiles cliquables sont disponibles en 2 variations :

• directement sous le bloc titre ;
• dans le contenu.

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 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).

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.

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. 

Il faut prévoir le code hexadécimal de la couleur d’arrière-plan du module vidéo.

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.

À 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).

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.

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.

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.