Page de thème et de sujet - Canada.ca

Obligatoire

Les pages de thème et les pages de sujet fournissent un accès aux sujets et aux pages de destination qui appuient l’achèvement des tâches.

Les pages de thème et les pages de sujet :

Sur cette page

Quand l'utiliser

Ce modèle doit être utilisé pour la page de thème et les 2 premiers niveaux de sujets de l'arborescence thématique de Canada.ca.

Il est facultatif pour les sujets de niveau inférieur.

Quoi éviter

Les pages où les personnes peuvent lancer une tâche devraient être considérées comme du contenu de destination et ne devraient pas utiliser le modèle de page de thème et de sujet.

Le modèle de la page de sujet ne doit pas être utilisé pour faire de la promotion; utilisez plutôt consulter les pages d’événements promotionnels ou les pages de campagnes.

Comment mettre en œuvre

Vous pouvez utiliser la version bêta ou la version stable de ce modèle.

Version bêta de la page de thème et de sujet

La version bêta est une amélioration par rapport à la version stable. Le code est toujours en révision. Il se peut que des modifications y soient apportées.

La version bêta remplacera éventuellement la version stable.

Vous devrez utiliser un CSS distinct pour mettre en œuvre la version bêta de ce modèle.

Version bêta de la page de thème et de sujet

Modèle bêta avec directives

Code
HTML
                      
<div class="provisional profile">
  <div class="container">
	  <div class="row">

	  <!-- changez col-md-6 à col-md-12 si vous n'utilisez pas d'image -->
	  <div class="intro col-md-6 col-sm-12 mrgn-bttm-md">
        <h1 property="name" id="wb-cont">[Titre du thème ou du sujet]</h1>
        <p class="pagetag">1-2 phrases qui décrivent les sujets et les principales tâches accessibles sur cette page.</p>
	  </div>

	  <!-- supprimer ce div si vous ne voulez pas d'image -->
      <div class="col-md-6 pstn-rght-md pstn-bttm-md hidden-sm hidden-xs">
        <img alt="#"  src="./images/theme-topic-img-825x200.jpg"/>
      </div> <!-- fin du div de l'image -->
    </div>
  </div>
</div>

<!-- supprimez la classe "mrgn-tp-0" si vous n'utilisez pas d'image -->
<section class="provisional most-requested-bullets well well-sm brdr-0 mrgn-tp-0">
  <div class="container">
    <div class="row">
      <div class="pddng-r-0 col-md-2">
        <h2 class="mrgn-tp-md">En demande</h2>
      </div>
	  <div class="col-md-10">

		<!-- changez à colcount-md-1 si vous n'avez que 2 ou 3 items en demande -->
        <ul class="wb-eqht mrgn-tp-md mrgn-bttm-md colcount-md-2">
          <li><a href="#">[Lien vers une tâche principale]</a></li>
          <li><a href="#">[Lien vers une tâche principale]</a></li>
          <li><a href="#">[Lien vers une tâche principale]</a></li>
          <li><a href="#">[Lien vers une tâche principale]</a></li>
          <li><a href="#">[Lien vers une tâche principale]</a></li>
          <li><a href="#">[Lien vers une tâche principale]</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

<div class="container">
  <div class="row">

	<!-- ce code est pour le modèle de base des liens et description - référez-vous à la documentation du modèle Services et renseignements pour les options -->
    <section class="gc-srvinfo col-md-12">
      <h2 class="wb-inv">Services et renseignements</h2>
      <div class="wb-eqht row">
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Lien à un sujet]</a></h3>
          <p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Lien à un sujet]</a></h3>
          <p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Lien à un sujet]</a></h3>
          <p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Lien à un sujet]</a></h3>
          <p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Lien à un sujet]</a></h3>
          <p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Lien à un sujet]</a></h3>
          <p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Lien à un sujet]</a></h3>
          <p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Lien à un sujet]</a></h3>
          <p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Lien à un sujet]</a></h3>
          <p>Utilisez des verbes d'action, ou inscrivez simplement des mots clés pour résumer les renseignements ou les tâches qui peuvent être accomplies sur la page liée.</p>
        </div>
      </div>
    </section>
  </div>
</div>

<!-- section facultative : En vedette et médias sociaux - la conception est flexible -->
<div class="provisional gc-prtts mrgn-tp-md">
  <div class="container">
    <div class="row">
	  <section class="provisional single-feature col-md-8 mrgn-bttm-md mrgn-tp-lg">
		<h2 class="wb-inv">En vedette</h2>
        <a href="#">
          <figure class="row">
            <figcaption class="pull-right col-md-6 col-xs-12">[Titre de l'élément en vedette]</figcaption>
            <div class="pull-left col-md-6 col-xs-12">
              <img src="./images/feature-img-360x203.jpg" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
            </div>
            <div class="pull-right col-md-6 col-xs-12">
              <p>Brève descripton de l'élément en vedette.</p>
            </div>
          </figure>
        </a>
      </section>

	<!-- supprimer ce div et cette section si vous n'incluez pas de renseignements sur les médias sociaux -->
      <section class="col-md-4 mrgn-bttm-sm">
        <div class="provisional followus followus-vertical">
          <h2>Dans les médias sociaux</h2>
          <ul>
            <li class="facebook"><a href="#" rel="external" class="social-lnk"><b>NomPageFacebook</b></a></li>
            <li class="twitter"><a href="#" rel="external" class="social-lnk"><b>@CompteTwitter</b></a></li>
            <li class="youtube"><a href="#" rel="external" class="social-lnk"><b>NomYouTube</b></a></li>
            <li class="instagram"><a href="#" rel="external" class="social-lnk"><b>NomInstagram</b></a></li>
          </ul>
        </div>
      </section> <!-- fin des médias sociaux -->
    </div>
  </div>
</div>

<!-- section facultative : Collaborateurs -->
<div class="container">
  <div class="row">
    <h2 class="wb-inv">Collaborateurs</h2>
    <div class="row">
      <section class="col-md-12">
        <div class="col-md-1">
          <h3 class="provisional from">De :</h3>
        </div>
        <div class="provisional contributors col-md-11">
          <ul>
            <li><a href="">[Ministère ou agence]</a></li>
          </ul>
        </div>
      </section>
    </div>
  </div>
</div>
                      
                    
CSS
                    
.provisional.profile {
	position: relative;
	overflow-x: hidden;
}

.provisional.profile .pagetag {
	max-width: 65ch;
}

.provisional.single-feature figcaption {
	margin-top: 5px;
	text-decoration: underline;
}

.provisional .thumbnail {
	border-color: #335075;
	border-width: 1px;
	padding: 0px;
}

.provisional.contributors {
	font-size: 16px;
	font-weight: 600;
}

.provisional.from {
	font-size: 17px;
	margin-top: 7px;
}

.provisional.contributors ul {
	margin-block-start: 0em;
	margin-block-end: 0em;
	margin-inline-start: -50px;
	margin-inline-end: 0px;
	padding-inline-start: 0px;
}

.provisional.most-requested-bullets li {
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 26px;
	margin-top: 0
}

.provisional.most-requested-bullets .pddng-r-0 {
	padding-right: 0px;
}

.provisional.most-requested-bullets h2 {
	font-size: 1.2em;
}

.provisional.list-bld {
	font-weight: 600;
}

.provisional.followus h2 {
	font-size: 1.1em;
	margin-top: 10px;
}

.provisional.followus {
	padding: 0;
}

.provisional.followus h2 {
	display: block;
}

.provisional.followus h2,
.provisional.followus ul {
	margin-left: 0;
}

.provisional.followus-vertical {
	line-height: 0em;
}

.provisional.followus-vertical,
.provisional.followus {
	background-color: transparent;
}

.provisional.followus-vertical a {
	text-decoration: none;
}

.provisional.followus-vertical ul {
	display: block;
	list-style-type: none;
	margin-block-start: 1em;
	padding-inline-start: 1em;
	font-size: 16px;
	margin-block-end: 0em;
}

.provisional.followus-vertical ul li {
	margin-bottom: 15px;
}

.provisional.followus-vertical ul li:last-child {
	margin-bottom: 0px;
}

.provisional.followus-vertical ul li a {
	border: none;
	padding: 0px 5px;
}

.provisional.followus ul li a {
	border: none;
}

.provisional .social-lnk {
	position: relative;
	bottom:-18px;
	left:45px;
}

.provisional.followus-vertical li {
	display: block;
	background-position: left;
}

.provisional.followus .facebook,
.provisional.followus .twitter,
.provisional.followus .youtube,
.provisional.followus .instagram {
	display: block;
	height: 38px;
	width: 38px;
}

/* supprimez cette section si vous ne voulez pas les nouvelles icônes */

.provisional.followus .facebook {
	background: url("https://design.canada.ca/images/social-media/facebook.png") 0 0 / cover no-repeat;
}
.provisional.followus .twitter {
	background: url("https://design.canada.ca/images/social-media/twitter.png") 0 0 / cover no-repeat;
}
.provisional.followus .youtube {
	background: url("https://design.canada.ca/images/social-media/youtube.png") 0 0 / cover no-repeat;
}
.provisional.followus .instagram {
	background: url("https://design.canada.ca/images/social-media/instagram.png") 0 0 / cover no-repeat;
}
.provisional.followus .linkedin {
	background: url("https://design.canada.ca/images/social-media/linkedin.png") 0 0 / cover no-repeat;
}
/* fin des nouvelles icônes de réseaux sociaux */

@media screen and (min-width: 991px) {
	.provisional.contributors li {
		display: inline-block;
		margin-right: .7em;
	}
	.provisional.contributors li:first-child:before {
		content: none;
	}
	.provisional.contributors li:before {
		content: "\2022";
		margin-right: .7em;
	}
}

@media screen and (max-width: 1200px) {
	.provisional.contributors ul {
		margin-inline-start: -30px;
	}
}

@media screen and (max-width: 991px) {
	.provisional.most-requested-bullets li {
		font-size: 19px;
	}
	.provisional.contributors ul {
		margin-inline-start: 1.5em;
	}
}

                    
                  

Version stable de la page de thème et de la page de sujet

La version stable sera éventuellement remplacée par la version bêta.

Directives pour la version stable de la page de thème
Modèle de page de thème
Modèle de page de thème indiquant les parties qui composent sa structure. Lire de haut en bas et de gauche à droite. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

1 : Titre du thème

Obligatoire

Décrit le thème et le contenu de la page

  • Présentation
    • Le titre du thème doit être une balise H1 unique.
    • Il doit être la première composante de la page.

2 : Paragraphe d’introduction du thème

Obligatoire

Décrit les tâches principales (services et renseignements) et les sujets accessibles sur cette page

  • Contenu
    • Elle donne un aperçu de l’ensemble des tâches principales pouvant être accomplies sur un thème donné.
    • Le texte doit être court et concis.
    • Le contenu est rédigé pour un niveau de scolarité secondaire (pointage de 100 et moins dans Scolarius).
  • Présentation
    • Cette composante figure sous le titre du thème.
    • Elle se trouve à la gauche du carrousel du thème.

3 : Carrousel du thème

Facultative

Présente les tâches principales et les renseignements pertinents propres au thème en temps opportun

  • Contenu
  • Présentation
    • Le carrousel du thème figure en haut de la page.
    • Il se trouve à droite du paragraphe d’introduction du thème.

4 : Réseaux de médias sociaux du thème

Conditionnelle

Présente les réseaux de médias sociaux propres au thème

5 : Services et renseignements

Obligatoire

Présente les sujets propres au thème

  • Contenu
  • Présentation
    • Cette composante figure sous les réseaux de médias sociaux propres au thème et à gauche de la section « En demande ».
    • L’étiquette de l’en-tête est « Services et renseignements ».

6 : En demande

Obligatoire

Présente les services et renseignements les plus demandés propres au thème

  • Contenu
  • Présentation
    • Cette composante se trouve à droite de « Services et renseignements ».
    • L’étiquette de l’en-tête est « En demande ».

7 : Autres renseignements pour les

Conditionnelle

Liens menant à des renseignements intéressant les publics cibles à l’échelle du gouvernement

  • Contenu
    • Cette composante est obligatoire lorsqu’il y a une ou plusieurs pages de public cible à l’échelle du gouvernement ou de pages de sujets liées au thème qui existent.
    • Utilisez la configuration Autres renseignements pour les.
  • Présentation
    • Cette composante se trouve sous la section « En demande ».
    • L’étiquette de l’en-tête est « Autres renseignements pour les ».

8 : Section « En vedette » du thème

Obligatoire

Fait la promotion des activités en cours propres au thème, menées par les ministères et organismes à l’échelle du GC

  • Contenu
  • Présentation
    • Cette composante se trouve en dessous de « Services et renseignements ».

Exemples concrets

Le site Canada.ca s’articule autour de 15 thèmes fondés sur une analyse des tâches principales (renseignements et services les plus demandés) à l’échelle du gouvernement du Canada.

S’ils mettent l’accent sur les tâches principales liées aux renseignements et à la prestation des services, les thèmes donnent également un aperçu des activités du gouvernement du Canada menées à bien pour contribuer à la prestation des programmes et services (par exemple, recherches, consultations, élaboration de politiques).

Diagramme de la façon de naviguer
Diagramme de la façon de naviguer vers les pages de thème dans le site Canada.ca. La version textuelle se trouve ci-dessous :
Version textuelle

On peut accéder aux pages de thème à partir de la page d’accueil du site Canada.ca.

Directives pour la version stable de la page de sujet
Modèle de page de sujets
Modèle de page de sujets indiquant les parties qui composent sa structure. Lire de haut en bas et de gauche à droite. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

1 : Titre du sujet

Obligatoire

Décrit le sujet et le contenu de la page

  • Présentation
    • Le titre du sujet doit être une balise H1 unique.
    • Il doit être la première composante de la page.

2 : Paragraphe d’introduction sur le sujet

Obligatoire

Décrit la page de sujets actuelle

  • Contenu
    • Fournit un aperçu des tâches principales ou des sous-sujets auxquels on peut accéder à partir du sujet actuel
    • Le texte doit être court et concis.
    • Le contenu est rédigé pour un niveau de scolarité secondaire (pointage de 100 et moins dans Scolarius).
  • Présentation
    • Cette composante figure sous le titre du sujet.
    • Elle se trouve à la gauche de l’image du sujet.

3 : Image du sujet

Facultative

Appuie et renforce les messages clés fournis sur la page de sujet

  • Contenu
    • L’image doit correspondre aux messages clés se rapportant au sujet.
    • L’image peut être affichée ailleurs sur le site.
    • Les carrousels ne sont pas permis sur les pages de sujets.
    • Utilisez la configuration Images.
  • Présentation
    • L’image du sujet figure en haut de la page.
    • Elle se trouve à la droite du paragraphe d’introduction.
    • L’image n’est pas assortie d’un hyperlien.
    • Consultez la page GitHub sur Canada.ca pour obtenir des détails sur la taille des images.

4 : Réseaux de médias sociaux du sujet

Facultative

Présente les réseaux de médias sociaux propres au sujet

5 : Services et renseignements

Obligatoire

Énumère les sous-sujets et le contenu de destination liés au sujet actuel

  • Contenu
  • Présentation
    • Cette composante se trouve sous les réseaux de médias sociaux liées au sujet et à gauche de « En demande ».

6 : En demande

Obligatoire sur les pages de thème et les pages de sujet du premier niveau

Comprend des tâches principales pour le sujet actuel

  • Contenu
  • Présentation
    • Cette composante se trouve à droite de « Services et renseignements ».

7 : Collaborateurs

Obligatoire

Liens menant aux institutions qui soutiennent le sujet

  • Contenu
  • Présentation
    • Cette composante se trouve sous la section « En demande ».

8 : Autres renseignements pour les

Conditionnelle

Fournit des liens aux renseignements destinés au public à l’échelle du gouvernement

  • Contenu
    • Ce composant est obligatoire lorsqu’il y un ou plusieurs [sujets] liés aux pages destinées aux publics à l’échelle du gouvernement.
    • Utilisez la configuration Autres renseignements pour les.
  • Présentation
    • Cette composante figure sous la section « Collaborateurs ».

9 : Ce que nous faisons

Conditionnelle

Fournit des liens vers le contenu relatif à l’élaboration de politiques et programmes qui est le plus pertinent pour le sujet actuel

  • Contenu
    • Cette composante est obligatoire lorsqu’il existe un contenu relatif à l’élaboration de politiques et programmes liés au sujet actuel.
    • Utilisez la configuration Ce que nous faisons.
  • Présentation
    • Cette composante se trouve sous les sections « Services et renseignements » et « En demande ».

10 : Section « En vedette » du sujet

Facultative

Fait la promotion des activités actuelles menées par les ministères et les organismes dans l’ensemble du GC qui sont liées au sujet actuel

  • Contenu
  • Présentation
    • Cette composante se trouve en dessous de « Ce que nous faisons ».

Exemples concrets

Chacun des 15 thèmes consiste en un certain nombre de sujets qui traitent de toute la gamme de renseignements et de services ayant trait à ce thème qui sont offerts à l’échelle du gouvernement.

Une page de sujet comprend :

Le modèle pour les pages de sujet inclut un certain nombre de composantes obligatoires et facultatives afin de pouvoir s’adapter à la multitude de domaines possibles liés aux sujets se rapportant au GC.

Diagramme de la façon de naviguer
Diagramme de la façon de naviguer vers les pages de sujets dans le site Canada.ca. La version textuelle se trouve ci-dessous :
Version textuelle

Navigation vers une page de sujets suit un des deux chemins :

  • De la page d’accueil à une page thématique à une page de sujets
  • De la page d’accueil à la page des ministères et organismes, à un profil institutionnel, à une page de sujets.

Recherche

Nous avons testé avec succès la version bêta de la page de thème et de sujet durant un projet d'optimisation mené de concert avec Services publics et Approvisionnement Canada (résumé de recherche à venir).

Derniers changements

2020-07-10 :

2020-06-30 : une nouvelle version bêta de ce modèle a été ajoutée.

Discussion

Discutez de ce modèle dans GitHub

Date de modification :