Changes

Line 5: Line 5:  
<div style="float:left; width:47%; padding:5px;">  
 
<div style="float:left; width:47%; padding:5px;">  
 
<!--PLACE ENGLISH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
 
<!--PLACE ENGLISH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
 +
==Table of contents==
 +
*[[#Proposed_approach_-_contextual_alerts|Proposed approach - contextual alerts]]
 +
*[[#Alerts_and_regular_in-page_content|Alerts and regular in-page content]]
 +
*[[#Alerts:_do’s_and_don’ts|Alerts: do’s and don’ts]]
 +
*[[#Multiple_alerts_about_the_same_issue/situation|Multiple alerts about the same issue/situation]]
 +
*[[#Code_and_samples|Code and samples]]
    
==Proposed approach - contextual alerts==
 
==Proposed approach - contextual alerts==
Line 16: Line 22:  
**be tailored to the page on which it appears
 
**be tailored to the page on which it appears
 
**include a single link to where updates are available
 
**include a single link to where updates are available
 +
<br>
    
==Alerts and regular in-page content==
 
==Alerts and regular in-page content==
Line 35: Line 42:  
*Have too many alerts - limit the number of alerts on each page and the number of alerts used across pages- ideally 1, maximum 2
 
*Have too many alerts - limit the number of alerts on each page and the number of alerts used across pages- ideally 1, maximum 2
 
*Don't use them to ‘highlight’ permanent content
 
*Don't use them to ‘highlight’ permanent content
 +
<br>
 +
<br>
 +
<br>
 +
    
==Multiple alerts about the same issue/situation==
 
==Multiple alerts about the same issue/situation==
Line 52: Line 63:  
   <nowiki>  <h3>Limited service availability</h3></nowiki>
 
   <nowiki>  <h3>Limited service availability</h3></nowiki>
 
   <nowiki>  <p>This service is affected by the outbreak of coronavirus (COVID-19).</p></nowiki>
 
   <nowiki>  <p>This service is affected by the outbreak of coronavirus (COVID-19).</p></nowiki>
   <nowiki>  <p><a href="#">Check service status updates </a></p></nowiki>
+
   <nowiki>  <p><a href="link-to-summary-page">Check service status updates </a></p></nowiki>
 
   <nowiki></section></nowiki>
 
   <nowiki></section></nowiki>
   Line 59: Line 70:  
*[https://design.canada.ca/alerts-alertes/alerts-en-contact.html On a contact page]
 
*[https://design.canada.ca/alerts-alertes/alerts-en-contact.html On a contact page]
 
*[https://design.canada.ca/alerts-alertes/alerts-en-ilp.html On a beta institutional landing page]
 
*[https://design.canada.ca/alerts-alertes/alerts-en-ilp.html On a beta institutional landing page]
*[https://design.canada.ca/alerts-alertes/alerts-en-ip.html On an institutional profile]
+
*[https://design.canada.ca/alerts-alertes/alerts-en-stable-ip.html On an institutional profile]
 
</div>
 
</div>
 
<!--START French column, do not touch this code-->
 
<!--START French column, do not touch this code-->
 
<div lang="fr" id="fra"><div class="alet-nav"></div>
 
<div lang="fr" id="fra"><div class="alet-nav"></div>
 
<div style="float:left; width:47%; padding:5px;"> <!--PLACE FRENCH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
 
<div style="float:left; width:47%; padding:5px;"> <!--PLACE FRENCH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
 +
==Table des matières==
 +
*[[#Approche_proposée_-_Alertes_contextuelles|Approche proposée - Alertes contextuelles]]
 +
*[[#Alertes_et_contenu_r.C3.A9gulier_des_pages|Alertes et contenu régulier des pages]]
 +
*[[#Alertes:_quoi_faire_et_ne_pas_faire|Alertes: quoi faire et ne pas faire]]
 +
*[[#Alertes_multiples_sur_la_m.C3.AAme_question.2Fsituation|Alertes multiples sur la même question/situation]]
 +
*[[#Code_et_exemples|Code et exemples]]
    
==Approche proposée - Alertes contextuelles==
 
==Approche proposée - Alertes contextuelles==
Line 96: Line 113:     
==Alertes multiples sur la même question/situation==
 
==Alertes multiples sur la même question/situation==
*Lorsque vous utilisez plusieurs alertes à différents endroits concernant le même problème ou la même situation, créez une page résumant les interruptions de service actuelles dans l'ensemble de l'organisation et créez un lien vers cette page à partir des alertes concernées.
+
Lorsque vous utilisez plusieurs alertes à différents endroits concernant le même problème ou la même situation, créez une page résumant les interruptions de service actuelles dans l'ensemble de l'organisation et créez un lien vers cette page à partir des alertes concernées.
   −
*Le contenu de la page devrait :
+
Le contenu de la page devrait :
**résumer les services concernés dans un langage simple
+
*résumer les services concernés dans un langage simple
**expliquez les conséquenes sur les utilisateurs des services concernés
+
*expliquez les conséquenes sur les utilisateurs des services concernés
**être mis à jour dès que de nouvelles informations sont disponibles
+
*être mis à jour dès que de nouvelles informations sont disponibles
    
==Code et exemples==
 
==Code et exemples==
Line 110: Line 127:  
   <nowiki>  <h3>Perturbation de service</h3></nowiki>
 
   <nowiki>  <h3>Perturbation de service</h3></nowiki>
 
   <nowiki>  <p>Ce service est touché par l'épidémie de coronavirus (COVID-19).</p></nowiki>
 
   <nowiki>  <p>Ce service est touché par l'épidémie de coronavirus (COVID-19).</p></nowiki>
   <nowiki>  <p><a href="lien à la page d'état du service de l'institution>Consulter les mises à jour de l'état du service</a></p></nowiki>
+
   <nowiki>  <p><a href="lien à la page d'état du service de l'institution">Consulter les mises à jour de l'état du service</a></p></nowiki>
 
   <nowiki></section></nowiki>
 
   <nowiki></section></nowiki>
   Line 117: Line 134:  
*[https://design.canada.ca/alerts-alertes/alertes-fr-contact.html Sur une page de contact]
 
*[https://design.canada.ca/alerts-alertes/alertes-fr-contact.html Sur une page de contact]
 
*[https://design.canada.ca/alerts-alertes/alertes-fr-ilp.html Sur une page d'accueil institutionnelle bêta]
 
*[https://design.canada.ca/alerts-alertes/alertes-fr-ilp.html Sur une page d'accueil institutionnelle bêta]
*[https://design.canada.ca/alerts-alertes/alertes-fr-ip.html Sur une page de profil institutionnel]
+
*[https://design.canada.ca/alerts-alertes/alertes-fr-profil-inst-stable.html Sur une page de profil institutionnel]
 
</div>
 
</div>