Infographics

An infographic is a visual presentation of information in the form of a chart, graphic, or other image, intended to give an easily understood overview, often of a complex subject.

Tips

Here are a few tips for creating an infographic:

  • Keep text to a minimum;
  • Need to be easy to understand;
  • Leave plenty of white space. A busy infographic is hard on the eyes;
  • Create the infographic for your target audience – geared to their needs;
  • Stick to a single topic. Multiple topics can make the infographic cluttered and overlong;
  • Limit your palette of colors.
Content Approver

Infographics Page Specifications:

  • The title of the page (Heading 1) must be the same title as your infographic. Do not write “Infographic” in the main title;
  • The infographic image is centered on the page;
  • The PDF document is linked from the image and at the top right of the page;
  • The long description is in an expand/collapse below the image.

Your Request Must Include:

  • Final and approved Microsoft Word mockup (English and French) of the source page
  • PDF document (English and French)
  • Long description of the infographic in (English and French)
  • Alt Text of the image (English and French)

Visit our Prepare Content page for instructions on how to create a mockup.

Examples:

Content Publisher
  • URL Naming Convention : must end with “infographic”
    • /m2m_infographic.shtml
    • /terminable-offences-infographic.shtml
  • Title of the page (Heading 1) :
    • Must be the same title as your infographic
    • Do not write “infographic” in the main title
  • Alternative Format and Printable version: Yes
    • Position: Top right (Document type + Version, byte unit) i.e. (PDF Version, 236 KB)
    • Font: Normal
  • Image of infographic: 
    • Centered on the page
    • Image responsive
    • Alt text – same as the title on the image
  • Long description:
    • In an expand/collapse underneath the image 
Code <h1 id="wb-cont">Title of the message</h1>
<div class="pull-right"><p>(PDF Version, 000 KB)</p>
</div>
<img class="img-responsive center-block" src="/eng/.../images/client-subject-of-infographic.png" alt="See long description." />
<section>
<details>
<summary>Long desription</section>
<h2>Second level of message</summary>
<p>Content of the infographic</p>
</details>
</section>