Skip to content

Commit

Permalink
Base copy of service reporting page
Browse files Browse the repository at this point in the history
  • Loading branch information
@patlaj
patlaj committed Jan 23, 2020
1 parent 1e6691f commit 5fb68b3
Showing 1 changed file with 324 additions and 0 deletions.
324 changes: 324 additions & 0 deletions specification/institutional-service-performance-reporting-pages.html
View file
@@ -0,0 +1,324 @@
<!DOCTYPE html>
<!--[if lt IE 9]><html class="no-js lt-ie9" lang="en" dir="ltr"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en" dir="ltr"><!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->
<title>Institutional service performance reporting pages - Canada.ca</title>
<meta content="width=device-width,initial-scale=1" name="viewport">
<!-- Meta data -->
<!-- Meta data-->
<!-- Load closure template scripts -->
<script type="text/javascript" src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_30/cdts/compiled/soyutils.js"></script>
<script type="text/javascript" src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_30/cdts/compiled/wet-en.js"></script>

<!-- Write closure template -->
<script type="text/javascript">
document.write(wet.builder.refTop({
}));
</script>
</head>
<body vocab="http://schema.org/" typeof="WebPage">
<div id="def-top">
</div>
<!-- Write closure template -->
<script type="text/javascript">
var defTop = document.getElementById("def-top");
defTop.outerHTML = wet.builder.top({
lngLinks: [{
lang: "fr",
href: "#",
text: "Français"
}],
breadcrumbs: [{
title: "Home",
href: "https://www.canada.ca/en.html"
},{
title: "Canada.ca design system",
href: 'https://www.canada.ca/en/government/about/design-system.html'
},{
title: "Template and pattern library for Canada.ca",
href: 'https://www.canada.ca/en/government/about/design-system/pattern-library.html'
}],
search: true,
siteMenu: true,
showPreContent: true
});
</script>

<main role="main" property="mainContentOfPage" class="container">
<h1 property="name" id="wb-cont" dir="ltr">
Institutional service performance reporting pages - Canada.ca template</h1>




<div><div class="mwsgeneric-base-html parbase section">



<p class="gc-byline"><strong>From: <a href="https://www.canada.ca/en/treasury-board-secretariat.html">Treasury Board of Canada Secretariat</a></strong></p>
<section>


<p>Institutional service performance reporting pages collect all service standards from an institution and provide annual performance reporting information, as per the requirements of the <a href="https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=27916">Policy on Service</a>.</p>
<p>For each of an institution’s service standards, state the level of performance that people can reasonably expect under normal circumstances, and report on past performance against those standards.</p>
<section>
<h2>On this page</h2>
<ul>
<li><a href="#use">When to use this template</a></li>
<li><a href="#specifications">How to use this template</a></li>
<li><a href="#examples">Working examples</a></li>
<li><a href="#navigation">User navigation</a></li>
</ul>
</section>
<section>
<h2 id="use">When to use this template</h2>
<p>Used once by each institution to present fiscal year service standards and performance reporting.</p>
</section>
<section>
<h2 id="specifications">How to use this template</h2>
<div class="btn-group mrgn-bttm-sm">
<button type="button" class="btn btn-default wb-toggle" data-toggle="{&quot;selector&quot;: &quot;details&quot;, &quot;parent&quot;: &quot;#template-elements&quot;, &quot;type&quot;: &quot;on&quot;}">Expand All</button>
<button type="button" class="btn btn-default wb-toggle" data-toggle="{&quot;selector&quot;: &quot;details&quot;, &quot;parent&quot;: &quot;#template-elements&quot;, &quot;type&quot;: &quot;off&quot;}">Collapse All</button>
</div>
<div class="row">
<div class="col-lg-6 pull-right">
<figure class="mrgn-bttm-lg">
<figcaption class="text-center"><b>Institutional service performance reporting pages template</b></figcaption>
<img src="https://design.canada.ca/newimgs/service-standards-page-en.jpg" class="full-width" alt="Template of institutional service performance reporting page showing sections that make up its structure. Read top to bottom and left to right. Specifications detailed below."> </figure>
</div>
<div class="col-lg-6 pull-left">
<section id="template-elements">
<section>
<h3>1: Page title</h3>
<p>Indicates that the page provides annual reporting on performance against service standards for an institution</p>
<ul class="list-unstyled">
<li id="element1">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Content</strong></summary>
<ul>
<li>Title is: [institution name] service performance reporting for fiscal year [year] to [year]</li>
</ul>
</details>
</li>
<li id="element2">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Presentation</strong></summary>
<ul>
<li>must be a unique H1</li>
<li> must be the first element on the page</li>
</ul>
</details>
</li>
</ul>
</section>
<section>
<h3>2: Institutional byline</h3>
<p>Provides a link to the institution, organization or partnering/collaborative arrangement entity responsible for the content of the page</p>
<ul class="list-unstyled">
<li id="element4">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Presentation</strong></summary>
<ul>
<li>use the <a href="../common-design-patterns/institutional-byline.html">Institutional byline</a> pattern</li>
</ul>
</details>
</li>
</ul>
</section>
<section>
<h3>3: Subsection links</h3>
<p>Links to service standards broken into logical groupings</p>
<ul class="list-unstyled">
<li id="element5">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Content</strong></summary>
<ul>
<li>use this componenet when there is a large number of service standards being reported on</li>
<li>group subsections logically</li>
<li>label subsections clearly and concisely</li>
<li>the text of each link must exactly match the text of the associated heading</li>
</ul>
</details>
</li>
<li id="element6">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Presentation</strong></summary>
<ul>
<li>appears below the institutional byline</li>
<li>use the <a href="../common-design-patterns/in-page-toc.html">In-page table of contents</a> pattern</li>
</ul>
</details>
</li>
</ul>
</section>
<section>
<h3>4: Introduction</h3>
<p>Provides an overview of the institution’s service standards and overall performance</p>
<ul class="list-unstyled">
<li id="element7">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Content</strong></summary>
<ul>
<li>limit text to 1 or 2 paragraphs</li>
<li>include a summary of the institution’s service standards performance</li>
<li> written for a grade 6-8 reading level</li>
</ul>
</details>
</li>
<li id="element8">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Presentation</strong></summary>
<ul>
<li> appears below the page title and byline</li>
</ul>
</details>
</li>
</ul>
</section>
<section>
<h3>5: Subsection overview</h3>
<p>Provides an overview of the service standards and overall performance in the current subsection</p>

<ul class="list-unstyled">
<li id="element9">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Content</strong></summary>
<ul>
<li>limit text to 1 or 2 paragraphs</li>
<li>written for a grade 6-8 reading level</li>
</ul>
</details>
</li>
<li id="element10">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Presentation</strong></summary>
<ul>
<li>appears at the start of each subsection of the page</li>
</ul>
</details>
</li>
</ul>
</section>
<section>
<h3>6: Service standards and performance information</h3>
<p>Describes each of the institution’s service standards and reports most recent performance results</p>
<ul class="list-unstyled">
<li id="element11">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Content</strong></summary>
<ul>
<li> includes service standards and performance information as per the <a href="https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=27916">Policy on Service</a></li>
<li>written for a grade 6-8 reading level</li>
<li>for each service standard being reported on, provide standards, targets and performance, as follows:
<ul>
<li>[Service]: name of the service to which the standard applies
<ul>
<li>Our standard: succinct statement of the standard</li>
<li>Our target: indicate the quantifiable target</li>
<li>Our performance in [current fiscal year]: indicated the quantified performance, maximum 80 characters</li>
</ul>
</li>
</ul>
</li>
</ul>
</details>
</li>
<li id="element12">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Presentation</strong></summary>
<ul>
<li>do not hyphenate words at the end of lines; retain ragged right edge for paragraphs and other text blocks</li>
<li>bullets must be used to present content </li>
</ul>
</details>
</li>
</ul>
</section>
<section>
<h3>7: Past service standards and performance</h3>
<p>Provides links to service standards and performance from previous years</p>
<ul class="list-unstyled">
<li id="element13">
<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Content</strong></summary>
<ul>
<li>presents people with links to previous years’ performance results</li>
<li> heading is labeled: “Service performance reports from previous years”</li>
<li>the link to each previous year’s page of service standards is labeled: “[institution name] service performance reporting for fiscal year [year] to [year]”</li>
</ul>
</details>
</li>
<li id="element14">

<details class="mrgn-bttm-sm">
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}"><strong>Presentation</strong></summary>
<ul>
<li>appears below the main page content</li>
<li>linked pages will apply the institutional service performance reporting page template, also ensuring a link to the current year’s institutional service performance reporting page</li>
</ul>
</details>
</li>
</ul>
</section>
</section>
</div>
</div>
</section>
<section>
<h2 id="examples">Working examples</h2>
<ul>
<li><a href="http://wet-boew.github.io/themes-dist/GCWeb/institutional-service-performance-en.html">English working example</a> (on GitHub)</li>
<li><a href="http://wet-boew.github.io/themes-dist/GCWeb/institutional-service-performance-fr.html">French working example</a> (on GitHub)</li>
</ul>
</section>
<section>
<h2 id="navigation">User navigation</h2>
<figure class="mrgn-bttm-lg">
<figcaption class="text-center"><b>Figure 2. User navigation diagram</b></figcaption>
<img src="https://www.canada.ca/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/institutional-service-performance-ia-eng.png" class="img-responsive center-block" alt="Diagram of how to navigate to institutional service performance reporting pages on Canada.ca. Text version below:">
<details>
<summary class="wb-toggle" data-toggle="{&quot;print&quot;:&quot;on&quot;}">Figure 2 – Text version</summary>
<p>Institutional service performance reporting pages can be accessed from institutional profiles pages.</p>
</details>
</figure>
</section>
</section>


</div>

</div>

<div id="def-preFooter">
</div>
<!-- Write closure template -->
<script type="text/javascript">
var defPreFooter = document.getElementById("def-preFooter");
defPreFooter.outerHTML = wet.builder.preFooter({
dateModified: "April 1, 2019",
showPostContent: true,
showFeedback: true,
showShare: true
});
</script>
</main>
<div id="def-footer">

</div>
<!-- Write closure template -->
<script type="text/javascript">
var defFooter = document.getElementById("def-footer");
defFooter.outerHTML = wet.builder.footer({
showFooter: true,
showFeatures: true
});
</script>
<!-- Write closure template -->
<script type="text/javascript">
document.write(wet.builder.refFooter({
}));
</script>
</body>
</html>

0 comments on commit 5fb68b3

Please sign in to comment.