CCCSG-179 Style Guide reformat

_includes/style-guide/00-intro.html

@@ -0,0 +1,3 @@
+<section id="intro">
+  <p>These are the rules to create web content that can be easily found, understood and used. They are based on writing principles and techniques that help make web content clear and adapted to the needs of all people. Use it with the <a href="{{ site.url }}/architecture/canada-content-information-architecture-specification.html">Content and Information Architecture Specification</a> when you're designing and organizing web content.</p>
+</section>

_includes/style-guide/00-toc.html

@@ -0,0 +1,26 @@
+<section id="toc">
+  <div class="row mrgn-tp-lg">
+    <div class="col-md-8">
+      <div class="panel panel-default">
+        <div class="panel-body">
+          <h2 class="mrgn-tp-sm">Table of contents</h2>
+          <ul>
+            <li><a href="#toc1">Summary of changes</a></li>
+            <li><a href="#toc2">Purpose</a></li>
+            <li><a href="#toc3">Use of the style guide</a></li>
+            <li><a href="#toc4">Related policies, standards and procedures</a></li>
+            <li><a href="#toc5">1.0 Writing principles for web content</a></li>
+            <li><a href="#toc6">2.0 Plain language</a></li>
+            <li><a href="#toc7">3.0 Tone</a></li>
+            <li><a href="#toc8">4.0 Style</a></li>
+            <li><a href="#toc9">5.0 Content structure</a></li>
+            <li><a href="#toc10">6.0 Images and videos</a></li>
+            <li><a href="#toc11">7.0 Links</a></li>
+            <li><a href="#toc12">Web content makeovers</a></li>
+            <li><a href="#toc13">Resources</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

_includes/style-guide/01-toc1.html

@@ -0,0 +1,8 @@
+<section id="toc1">
+  <h2>Summary of changes</h2>
+  <p>Here are the changes we made to this version of the guide:</p>
+  <ul>
+    <li>we’ve added “Writing for inclusivity” to the <a href="#toc5">Writing principles for web content</a> section</li>
+  </ul>
+  <p>Refer to the listed section for details.</p>
+</section>

_includes/style-guide/02-toc2.html

@@ -0,0 +1,7 @@
+<section id="toc2">
+  <h2>Purpose</h2>
+  <p>This guide establishes the rules you must use to develop and edit English web content that will be published on a Government of Canada website. The rules are different from practices adapted to print to support principles related to accessibility, readability and usability.</p>
+  <p>The purpose of these rules is to make web content easy to find, easy to understand and easy to use for everyone, including people who have physical or cognitive disabilities. </p>
+  <p>The techniques described in this guide complement the rules set out in <cite><a href="https://www.btb.termiumplus.gc.ca/tpv2guides/guides/tcdnstyl/index-eng.html?lang=eng">The Canadian Style</a></cite>. If there are conflicts between this guide and <cite>The Canadian Style</cite> or any other resource, this guide takes priority for content published online.</p>
+  <p>As web and language trends evolve, we'll update this guide to meet the changing needs of our audiences.</p>
+</section>

_includes/style-guide/03-toc3.html

@@ -0,0 +1,6 @@
+<section id="toc3">
+  <h2>Use of the style guide</h2>
+  <p>All departments and other portions of the federal public administration subject to the Directive on the Management of Communications must use the Canada.ca  Style Guide. These organizations must follow this style guide's requirements for all public-facing websites and digital services, regardless of the technology, domain name or publishing platform used. This requirement is referenced in Appendix D: Mandatory Procedures for Social Media and Web Communications in the <a href="https://www.tbs-sct.canada.ca/pol/doc-eng.aspx?id=30682">Directive on the Management of Communications</a>.</p>
+  <h3>Out-of-scope situations</h3>
+  <p>Institutions that fall outside of the Directive on the Management of Communications do not have to follow this style guide. However, all institutions are encouraged to use it for both their internal and external web products. Following this guide's rules and techniques will make it easier for everyone to find, understand and use the government's digital content.</p>
+</section>

_includes/style-guide/04-toc4.html

@@ -0,0 +1,19 @@
+<section id="toc4">
+  <h2>Related policies, standards and procedures</h2>
+  <p>Content must comply with: </p>
+  <ul>
+    <li>templates, content components, character limits and other requirements as described in the <cite><a href="{{ site.url }}/architecture/canada-content-information-architecture-specification.html">Canada.ca Content and Information Architecture Specification</a></cite></li>
+    <li>requirements set out in the related legislated and policy instruments, including:
+      <ul>
+        <li><cite><a href="https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=30683">Policy on Communications and Federal Identity</a></cite></li>
+        <li><cite><a href="https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=30682">Directive on the Management of Communications</a></cite></li>
+        <li><cite><a href="https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601">Standard on Web Accessibility</a></cite></li>
+        <li><cite><a href="https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=25875">Standard on Web Interoperability</a></cite></li>
+        <li><cite><a href="https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=27088">Standard on Optimizing Websites and Applications for Mobile Devices</a></cite></li>
+        <li><cite><a href="{{ site.urlcanada.ca }}/en/treasury-board-secretariat/services/government-communications/guidance-publishing-government.html">Guidance on Publishing in the Government of Canada</a></cite></li>
+        <li><cite><a href="https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=27167">Procedures for Publishing</a></cite></li>
+        <li><cite><a href="https://laws-lois.justice.gc.ca/eng/acts/O-3.01/">Official Languages Act</a></cite></li>
+      </ul>
+    </li>
+  </ul>
+</section>

_includes/style-guide/05-toc5-wp1-1.html

@@ -0,0 +1,16 @@
+  <section id="wp1-1">
+    <h3>1.1 Help people complete tasks</h3>
+    <p>Most people come to a government website to complete a task and expect us to provide information that will help them. Tasks can be:</p>
+    <ul>
+      <li>transactional (submit a form or download a report)</li>
+      <li>informational (find out how to collect a benefit or find a phone number)</li>
+    </ul>
+    <p>People trying to complete a task online usually don't read word by word. They scan quickly for words and links related to what they want to do. </p>
+    <p>Government of Canada web content must be:</p>
+    <ul>
+      <li><strong>intuitive</strong>: give people who have no previous knowledge of the topic or process just enough information to complete a task on their own </li>
+      <li><strong>comprehensive</strong>: give the appropriate details to specialists who have more knowledge of a topic or process </li>
+      <li><strong>targeted</strong>: present the most important information first, in a way that is tailored to the needs of the audience, instead of giving all the options and leaving people to figure out which ones apply to them</li>
+      <li><strong>consistent</strong>: use a standardized approach so that people can scan content quickly and easily with a sense of confidence and trust</li>
+    </ul>
+  </section>

_includes/style-guide/05-toc5-wp1-2-1.html

@@ -0,0 +1,5 @@
+    <section id="wp1-2-1">
+      <h4>Writing for accessibility</h4>
+      <p>Making content accessible means a wide range of people can use it, including people with physical and cognitive disabilities (for example, reading disorders, attention deficit disorders, memory disorders).</p>
+      <p>To make your content accessible, consider how assistive technologies work and how some writing practices may impact people's ability to read or understand text. Remember to also refer to the <cite><a href="https://www.w3.org/TR/WCAG/">Web Content Accessibility Guidelines (WCAG) 2.0</a></cite>.</p>
+    </section>

_includes/style-guide/05-toc5-wp1-2-1b.html

@@ -0,0 +1,9 @@
+    <section id="wp1-2-1b">
+      <h4>Writing for inclusivity</h4>
+      <p>Make gender-inclusive writing your standard practice.</p>
+      <p>For more guidance on inclusive writing, see the Language Portal of Canada’s guidelines and resources:</p>
+      <ul>
+        <li><a href="https://www.noslangues-ourlanguages.gc.ca/en/writing-tips-plus/inclusive-writing-guidelines-resources">Inclusive writing for English</a> (only in English)</li>
+        <li><a href="https://www.noslangues-ourlanguages.gc.ca/fr/cles-de-la-redaction/ecriture-inclusive-lignes-directrices-ressources">Écriture inclusive – Lignes directrices et ressources, du Bureau de la traduction</a> (only in French)</li>
+      </ul>
+    </section>

_includes/style-guide/05-toc5-wp1-2-2.html

@@ -0,0 +1,12 @@
+    <section id="wp1-2-2">
+      <h4>Writing for readability</h4>
+      <p>Readability is the ease with which a person can read and understand a text. Readable content means better task completion and higher client satisfaction. </p>
+      <p>To make your content readable, consider your audience's reading level and literacy needs. Not everyone reads at the same level or understands content in the same way. Even when content is presented clearly and simply, people who have low literacy levels and other difficulties can find it hard to understand text. </p>
+      <p>According to Statistics Canada (2012) and Canadian literacy organizations, almost 50% of Canadians have literacy challenges. Research shows that people with literacy challenges:</p>
+      <ul>
+        <li>spend a lot of time trying to understand words that contain more than two syllables</li>
+        <li>read word by word and slowly move their eyes across each line of text</li>
+        <li>skip over large amounts of information when it contains many multi-syllable words, uncommon terms and long sentences </li>
+      </ul>
+      <p><a>Techniques for improving and measuring readability are in the </a><a href="#toc6">section on plain language</a>.</p>
+    </section>

_includes/style-guide/05-toc5-wp1-2-3.html

@@ -0,0 +1,9 @@
+    <section id="wp1-2-3">
+      <h4>Writing for specialized audiences</h4>
+      <p>Sometimes, your content targets people who have in-depth knowledge of a subject.</p>
+      <p>When writing for a specialized audience, you can use terms they're familiar with, even if those terms aren't familiar to a general audience.&nbsp; Include a summary in plain language for:</p>
+      <ul>
+        <li>people who aren't familiar with the subject </li>
+        <li>specialists who might be scanning the content to decide whether it's relevant to their task</li>
+      </ul>
+    </section>

_includes/style-guide/05-toc5-wp1-2-4.html

@@ -0,0 +1,8 @@
+    <section id="wp1-2-4">
+      <h4>Consider all screen sizes</h4>
+      <p>People will view your content on different sizes of screens. Phone and tablet screens display less content than desktop and laptop screens.&nbsp;Readers who use small screens:</p>
+      <ul>
+        <li>have to go through more steps to access the same amount of information</li>
+        <li>rely on their&nbsp;short-term memory&nbsp;to <a href="https://www.nngroup.com/articles/short-term-memory-and-web-usability/">recall information that isn't visible on the screen</a></li>
+      </ul>
+    </section>

_includes/style-guide/05-toc5-wp1-2.html

@@ -0,0 +1,19 @@
+<section id="wp1-2">
+  <h3>1.2 Consider the needs of the audience</h3>
+  <p>When planning web content, consider people's needs. Make sure that the content is accessible, clear and adapted to the widest audience.</p>
+  <!-- Writing for accessibility START id="wp1-2-1" --> 
+  {% include style-guide/05-toc5-wp1-2-1.html %} 
+  <!-- Writing for accessibility END --> 
+  <!-- Writing for inclusivity START id="wp1-2-1b" --> 
+  {% include style-guide/05-toc5-wp1-2-1b.html %} 
+  <!--Writing for inclusivity END --> 
+  <!-- Writing for readability START id="wp1-2-2" --> 
+  {% include style-guide/05-toc5-wp1-2-2.html %} 
+  <!-- Writing for readability END --> 
+  <!-- Writing for specialized audiences START id="wp1-2-3.html" --> 
+  {% include style-guide/05-toc5-wp1-2-3.html %} 
+  <!-- Writing for specialized audiences END --> 
+  <!-- Consider all screen sizes START id="wp1-2-4" --> 
+  {% include style-guide/05-toc5-wp1-2-4.html %} 
+  <!-- Consider all screen sizes END --> 
+</section>

_includes/style-guide/05-toc5-wp1-3.html

@@ -0,0 +1,16 @@
+<section id="wp1-3">
+  <h3>1.3 Provide equivalent content in both official languages</h3>
+  <section class="alert alert-warning">
+    <h4 class="h3">Official languages requirements</h4>
+    <p>According to the <cite><a href="https://laws-lois.justice.gc.ca/eng/acts/o-3.01/page-1.html">Official Languages Act</a></cite>, you must publish communications and provide services to the public in both official languages.</p>
+  </section>
+  <p>Government content must:</p>
+  <ul>
+    <li>be professionally translated</li>
+    <li>reflect Canadian writing conventions in English and French </li>
+    <li>include fully bilingual images, multimedia files and transcripts, or contain equivalent information in both official languages</li>
+  </ul>
+  <h4>Persons responsible for official languages</h4>
+  <p>The <a href="https://www.tbs-sct.gc.ca/psm-fpfm/ve/ol-lo/lst-eng.asp">person responsible for official languages in your institution</a> can help answer questions about your obligations and about exceptions.</p>
+  <p>Your communications team can help determine whether it's appropriate to communicate with audiences in other languages, in addition to Canada's official language.</p>
+</section>

_includes/style-guide/05-toc5.html

@@ -0,0 +1,36 @@
+<section id="toc5"> {% unless page.title == "1.0 Writing principles" %}
+  <h2>1.0 Writing principles for web content</h2>
+  {% endunless %}
+  <div class="row mrgn-tp-lg">
+    <div class="col-md-8">
+      <div class="panel panel-default">
+        <div class="panel-body">
+          <h3 class="mrgn-tp-sm">In this section</h3>
+          <ul>
+            <li><a href="#wp1-1">1.1 Help people complete tasks</a></li>
+            <li><a href="#wp1-2">1.2 Consider the needs of the audience</a>
+              <ul>
+                <li><a href="#wp1-2-1">Writing for accessibility</a></li>
+                <li><a href="#wp1-2-1b">Writing for inclusivity</a></li>
+                <li><a href="#wp1-2-2">Writing for readability</a></li>
+                <li><a href="#wp1-2-3">Writing for specialized audiences</a></li>
+                <li><a href="#wp1-2-4">Consider all screen sizes</a></li>
+              </ul>
+            </li>
+            <li><a href="#wp1-3">1.3 Provide equivalent content in both official languages</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <p>The rules in this guide reflect how people read and use web content.</p>
+  <!-- 1.1 Help people complete tasks START id="wp1-1" --> 
+  {% include style-guide/05-toc5-wp1-1.html %} 
+  <!-- 1.1 Help people complete tasks END --> 
+  <!-- 1.2 Consider the needs of the audience START id="wp1-2" --> 
+  {% include style-guide/05-toc5-wp1-2.html %} 
+  <!-- 1.2 Consider the needs of the audience END --> 
+  <!-- 1.3 Provide equivalent content in both official languages START id="wp1-2" --> 
+  {% include style-guide/05-toc5-wp1-3.html %} 
+  <!-- 1.3 Provide equivalent content in both official languages END -->
+</section>

_includes/style-guide/06-toc6-wp2-1-1.html

@@ -0,0 +1,13 @@
+<section id="wp2-1-1">
+  <h4>Get to the point</h4>
+  <p>Omit background information and messages that welcome people to your program or site. These kinds of messages get in people's way when they're trying to accomplish a task.</p>
+  <p>Write direct statements.</p>
+  <h5>Example <span class="wb-inv">of direct statements</span></h5>
+  <p><strong>Write</strong>: Present your passport to the border officer.<br>
+    <strong>Instead of</strong>: According to Canadian legislation, you're required to present your passport to the agent who will welcome you into the country. </p>
+  <div class="well panel"> 
+    <!--UPDATE LATER-->
+    <p><a href="{{ site.urlconception }}/guide-redaction/#wp2-1" aria-label="See how the rule for the inverted pyramid structure applies to content in French">See how this rule applies to content in French</a></p>
+    <p><a href="mailto:?subject=Canada.ca%20Content%20Style%20Guide&amp;body=See%20the%20rule%20for%20using%20the%20inverted%20pyramid%20structure%20to%20organize%20content%20on%20Canada.ca:%20https://design.canada.ca/style-guide/#wp2-1" aria-label="Share the rule for the inverted pyramid structure by email">Share this rule by email</a></p>
+  </div>
+</section>

_includes/style-guide/06-toc6-wp2-1.html

@@ -0,0 +1,44 @@
+<section id="wp2-1">
+  <h3>2.1 Start with the most important information</h3>
+  <p>Start your content with the most important information, and be direct. When people scan web pages, they tend to start in the top left hand corner and scan to the right and down. As they move down the page, they scan less and less to the right.</p>
+  <p>Organize your content using an inverted pyramid structure to:</p>
+  <ul>
+    <li>guide your audience to the information they need to complete their task </li>
+    <li>place supporting and relevant details toward the end of the text </li>
+  </ul>
+  <figure class="mrgn-bttm-lg">
+    <figcaption class="text-center"><strong>Figure 1</strong></figcaption>
+    <img alt="Pyramid upside down showing how to start a web page with key information first. Text version below:" class="img-responsive center-block" id="fig1" src="/style-guide/images/fig-01-eng.jpg">
+    <details class="brdr-tp brdr-rght brdr-bttm brdr-lft">
+      <summary class="wb-toggle" data-toggle="'{&quot;print&quot;:&quot;on&quot;}'"> Figure 1 - Text version </summary>
+      <p>Inverted pyramid divided into four sections, from top to bottom. The image shows the order of information on a web page.</p>
+      <ul>
+        <li>First:
+          <ul>
+            <li>start with the most important idea, step or information</li>
+          </ul>
+        </li>
+        <li>Second:
+          <ul>
+            <li>add details and tasks in order of importance</li>
+            <li>keep all task related content in the centre of the page</li>
+            <li>use links to direct people to key information and tasks</li>
+          </ul>
+        </li>
+        <li>Third:
+          <ul>
+            <li>include information for audiences who want to learn more or have more knowledge of the topic or service, but only if it makes sense</li>
+          </ul>
+        </li>
+        <li>Fourth:
+          <ul>
+            <li>add links only if they relate to content that supports completion of the task on the web page (for example, laws or publications)</li>
+          </ul>
+        </li>
+      </ul>
+    </details>
+  </figure>
+  <!-- Get to the point START id="wp2-1-1" --> 
+  {% include style-guide/06-toc6-wp2-1-1.html %} 
+  <!-- Get to the point END --> 
+</section>

_includes/style-guide/06-toc6-wp2-2.html

@@ -0,0 +1,20 @@
+<section id="wp2-2">
+  <h3>2.2 Use simple and common words</h3>
+  <p>Replace long words with short, simple and everyday words that most people understand and use. Simple words have 2 syllables or less. They're easier to scan than long, complex words. </p>
+  <h4>Example <span class="wb-inv">of simple and common words</span></h4>
+  <p><strong>Write</strong>: ask<br>
+    <strong>Instead of</strong>: make a request</p>
+  <p><strong>Write</strong>: you must<br>
+    <strong>Instead of</strong>: you shall</p>
+  <p><strong>Write</strong>: to<br>
+    <strong>Instead of</strong>: in order to</p>
+  <p><strong>Write</strong>: before<br>
+    <strong>Instead of</strong>: prior to</p>
+  <p><strong>Write</strong>: get<br>
+    <strong>Instead of</strong>: obtain</p>
+  <div class="well panel"> 
+    <!--UPDATE LATER-->
+    <p><a href="{{ site.urlconception }}/guide-redaction/#wp2-1" aria-label="See how the rule for using simple and common words applies to content in French">See how this rule applies to content in French</a></p>
+    <p><a href="mailto:?subject=Canada.ca%20Content%20Style%20Guide&amp;body=See%20the%20rule%20for%20using%20simple%20and%20common%20words%20on%20Canada.ca:%20https://design.canada.ca/style-guide/#wp2-2" aria-label="Share the rule for using simple and common words by email">Share this rule by email</a></p>
+  </div>
+</section>