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