Conseils
La bannière Web est la première section que voit l’utilisateur. Elle sert à présenter le produit, le service ou l’information de manière percutante. Ce composant se présente en deux modèles : la bannière Web par défaut sur fond de couleur et la grande bannière Web sur fond d’image. La bannière Web sur fond de couleur est utilisée sur la plupart des pages. La grande bannière Web sur fond d’image devrait être réservée aux pages de premier niveau, comme la page d’accueil. Les deux modèles incluent les éléments suivants :
-
Titre : Le titre correspond au titre
<h1>de la page ou de l’application. - Sous-titre : Le sous-titre est une ligne de texte secondaire qui apparaît sous le titre. Il fournit une brève description ou un résumé des informations les plus importantes de la page. Le sous-titre ne devrait pas dépasser une phrase.
- Fil d'Ariane (optionnel) : Lorsqu’une page comporte une bannière Web, le composant fil d'Ariane y est inséré pour qu’il hérite de sa couleur de fond. Le composant fil d’Ariane devrait être utilisé sur toutes les pages de plus d’un niveau de profondeur, mais demeure facultatif sur les pages de premier niveau et les pages de service où l’utilisateur remplit un formulaire ou effectue une transaction.
- Bouton d'appel à l'action gnb (optionnel) : Le bouton d’appel à l’action du GNB (gnb-call-to-action) est utilisé pour inciter l’utilisateur à mener une action précise. Il doit être clair, concis et communiquer l’action souhaitée. Le bouton d’appel à l’action doit être employé avec modération et ne doit être utilisé que dans la grande bannière Web. Dans les autres types de pages, insérez plutôt le bouton d’appel à l’action du GNB dans le contenu de la page.
- Couleur de fond ou image : L’arrière-plan de la bannière Web peut reprendre l’une des couleurs de la marque du gouvernement provincial ou inclure une image.
À faire
- Incluez toujours un titre
<h1>. - Rédigez des titres et des textes introductifs clairs et concis.
- Choisissez des images de fond qui s’harmonisent avec la marque du gouvernement provincial.
- Optimisez et redimensionnez les images de fond pour s’assurer qu’elles ont la taille appropriée.
- Évitez d’utiliser plus de deux boutons d’appel à l’action du GNB, dont un seul bouton d’action principal.
À ne pas faire
- Ne modifiez pas les mises en page des bannières héroïques et n’utilisez pas d’autres couleurs que celles de la marque.
- N’utilisez pas de grande bannière Web sur d’autres pages que celles de premier niveau.
- N’utilisez pas d’images de fond contenant du texte ou des logos.
- Ne modifiez pas le niveau de titre par défaut. Si vous devez absolument redimensionner
le titre, utilisez un titre
<h1>et appliquez des classes d’en-tête pour en modifier les dimensions visuelles.
Bannière Web verte
La bannière Web verte est la bannière Web par défaut et doit être utilisée sur la plupart des pages.
HTML
<section class="gnb-hero-banner-green">
<div class="container">
<nav aria-label="fil d'Ariane">
<ol class="gnb-breadcrumbs-light">
<li><a href="#">Données</a></li>
<li>Données</li>
</ol>
</nav>
<h1>Titre ici</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</section>
Bannière Web bleue
Si plus d’une couleur est requise, il est possible d’utiliser la bannière Web bleue.
HTML
<section class="gnb-hero-banner-blue">
<div class="container">
<nav aria-label="fil d'Ariane">
<ol class="gnb-breadcrumbs-light">
<li><a href="#">Données</a></li>
<li>Données</li>
</ol>
</nav>
<h1>Titre ici</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</section>
Bannière Web noire
La bannière Web noire est réservée aux sites Web promotionnels et aux sites Web de projets ou d’initiatives qui nécessitent une option de couleur neutre.
HTML
<section class="gnb-hero-banner-black">
<div class="container">
<nav aria-label="fil d'Ariane">
<ol class="gnb-breadcrumbs-light">
<li><a href="#">Données</a></li>
<li>Données</li>
</ol>
</nav>
<h1>Titre ici</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</section>
Grande bannière Web avec image
Le composant de grande bannière Web avec image est réservé aux pages de niveau supérieur, comme les pages d’accueil et les pages de renvoi, ainsi qu’aux thèmes et aux sujets d’importance. Pour les autres types de pages, utilisez la bannière Web par défaut avec couleur de fond.
Ajoutez l’image de fond personnalisée à l’aide de code CSS intraligne. L’image sera redimensionnée en fonction de la largeur de l’écran. La taille d’image idéale a une largeur comprise entre 1440 et 1920 pixels, une hauteur maximale de 1080 pixels et est optimisée pour ne pas dépasser 160 ko. Ce composant ajoutera une couche noire pour s’assurer qu’il y a suffisamment de contraste entre l’image et le texte. Toutefois, les images pâles ou lumineuses ne sont pas recommandées. Votre image personnalisée ne doit pas contenir de texte, de logo ou d’illustration ni apparaître floue, déformée ou pixelisée.
Vous pouvez utiliser un outil en ligne gratuit et accessible en source libre comme Squoosh pour rogner, optimiser et redimensionner vos images.
HTML
<section class="gnb-big-hero-banner-img" style="background-image: url('img/votre-image.jpg')">
<div class="container">
<h1>Lorem ipsum dolor Nouveau-Brunswick</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</section>
Grande bannière Web avec image et fil d’Ariane
L’ajout d’un composant fil d’Ariane à la grande bannière Web est optionnel, mais est recommandé sur toutes les pages de plus d’un niveau de profondeur.
HTML
<section class="gnb-big-hero-banner-img" style="background-image: url(img/votre-image.jpg)">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="gnb-breadcrumbs-light">
<li><a href="#">Données</a></li>
<li>Données</li>
</ol>
</nav>
<h1>Lorem ipsum dolor Nouveau-Brunswick</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</section>
Bannière Web avec image et appel à l’action du GNB
L’ajout d’un bouton d’appel à l’action du GNB (gnb-call-to-action) à la bannière Web est optionnel et son usage doit être limité. Ce bouton doit uniquement être utilisé pour inciter l’utilisateur à mener une action précise. Dans la plupart des cas, il est préférable d’insérer l’appel à l’action du GNB dans le contenu de la page, où l’utilisateur aura accès à davantage de contexte avant d’agir. N’insérez jamais plus de deux boutons d’appel à l’action du GNB au total, et plus d’un seul bouton d’action principal.
HTML
<section class="gnb-big-hero-banner-img" style="background-image: url(img/votre-image.jpg)">
<div class="container">
<h1>Lorem ipsum dolor Nouveau-Brunswick</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
<a href="#" class="gnb-btn">Appel à l'action</a>
</p>
</div>
</section>