About Waterloo.ca
Waterloo.ca exists to provide simpler, more accessible online services to the community. Our goal is to clearly describe the services we provide and make them easier to use. Contact us at website@waterloo.ca.
On this page
1. Accessibility
Accessibility is our top priority. We aspire to:
- explain our services in clear, inclusive language
- comply with and exceed provincial guidelines for website accessibility
- provide clear instructions for how to access alternate formats and communication supports
- partner with vendors that have recognized accessibility credentials
If you have an accessibility issue with the website, contact website@waterloo.ca and we will work to resolve it. The Accessibility Plan lays out our corporate commitment to accessibility.
2. Rights management
With the exception of photos or otherwise labelled materials, all content on the site is licensed with Creative Commons, Attribution-NoDerivs (CC BY-ND). This license allows for redistribution as long as it is passed along unchanged and in whole, with credit.
3. Website ownership
This site is owned and maintained by the communications division, part of the corporate services department. Visit our city staff page to learn more about our organizational structure.
4. Vendors
GHD Digital provides the design and content management system for Waterloo.ca. We use SiteImprove to improve accessibility and digital certainty. When possible, we work with local photographers to acquire images.
5. Style and design guide
This guide communicates the rules we use to develop content for Waterloo.ca.
Sections
Webpage types
Waterloo.ca uses different types of webpages to help users find information and complete tasks quickly.
Home page
Our home page is organized into different service areas called landing pages. It conveys the authority of a municipal website and prioritizes the most likely user actions above promotional or topical material.
Landing page
Landing pages cover broad service areas or topics. They have unique layouts and navigation items to help users find the most important information or services quickly.
Info pages
Info pages are the standard place for text content related to topics. These form the majority of Waterloo.ca’s webpages and will be where most editors make changes.
Considerations for creating a new info page:
-
how does creating the new page help the user?
-
what is the purpose?
-
can this content fit on an existing page?
Service pages
Service pages are used to apply, register or pay for a service, or intake information. They are created in FormBuilder or other associated applications such as the Building and Bylaw portal.
Tone
The overall tone of Waterloo.ca should be consistent across the website and optimized for what a user is trying to accomplish on a page.
Our goal is to make things as simple as possible for our users — to make it easier to get things done with government.
We write for a grade six reading level and strive for a tone that is:
-
friendly
-
simple
-
authoritative
-
helpful
Technical language
Explain complex ideas contained in projects or laws instead of quoting them directly. Include a hyperlink to the specific law, act or project document if applicable.
Avoid legal and technical language on Waterloo.ca and focus instead on describing the spirit, not the letter, of the law.
Active voice
We use active voice instead of passive voice, speaking directly to the person reading our content.
With active voice the subject of the sentence performs the action:
Margaret [subject] sent [verb] the request. With passive voice the subject of the sentence receives the action: the request [subject] was sent [verb] by Margaret.
Speaking directly to users
Say 'you' and 'your' when talking directly to users.
Webpage organization
These rules cover how content is organized into different components of a page.
Page titles
A page title is a single phrase that describes content on the entire page. Use sentence case (only capitalize the first letter in the first word) for all page titles, unless the heading includes an official name.
Page descriptions
Page descriptions exist on the back end of the website, and help search engines and users determine if the page is a relevant search result. Write these in sentence case without specifics that need to be changed regularly.
Leads
Leads describe the purpose of the page in one or two short, plain language sentences. Use words and terms that people use when searching for a topic.
Leads can also contain important elements that relate to the purpose of the page, such as links to a form or application.
'On this page' navigation
The in-page navigation breaks a page into anchor-linked chapters. The links correspond to the headers found on the page. Use a navigation when a page has two or more significant tasks associated with it.
A user should be able to quickly determine what tasks can be completed on a page by scanning this navigation.
Headings
A heading is a short phrase that describes the content directly following it. It should indicate the task that the content will allow users to complete such as 'sign up for a water account'.
Effective headings:
-
are short and scannable
-
omit non-essential words
-
put verbs and keywords up front
-
are short and scannable
Use sentence case (only capitalize the first letter in the first word) for all headings, unless the heading includes an official name.
Content and design elements
This section covers how to use different content features to assemble easy-to-use webpages.
Images
Waterloo.ca contains decorative header images on its homepage and landing pages. On content pages, image use is restricted to content that is not easily described in text, such as a map or visual-based instructions. A demonstration of how to use a bicycle cross-ride is an example of this.
All images must have descriptive alt-text.
Sentences
Use short sentences with neutral, factual language, avoiding adverbs and adjectives unless necessary.
Paragraphs
Use short paragraphs with one to five sentences.
Accordions
Accordions are devices that hide or display content based on user actions. Use them sparingly to avoid causing confusion with opening/closing animations on a page.
Bullets
Use bulleted lists to list two or more pieces of information. They are most effective when listing necessary information, such as eligibility requirements. When creating a bulleted list:
-
introduce the list with a lead-in sentence and a colon
-
use lower-case at the start of the bullet (unless the first word is an official name)
-
don’t use a comma or semicolon at the end of a bullet
-
don’t put “or” or “and” after a bullet
If the bulleted list follows a heading, or if the bullets consist of multiple sentences, use complete sentences for the bullets, capitalize first letters and include periods.
Avoid nested bullets — or sub-bullets — if possible. Treat nested bullets as a new set of bullets and follow the same rules as regular bulleted lists.
Numbered bullets
Use numbered bullets if you’re listing ordered information, such as instructions.
Buttons
Use a button on your page to feature a single user action, such as downloading a report or launching a form. If they feature an important component of content, place them as high up as possible.
Different colours are used for distinctive actions. Yellow is for a download or application, blue is for engagement opportunities:
Emphasis
Emphasis bars are used for two purposes.
Yellow is used to highlight important text.
Blue is used for contact information.
Guidelines
These small lines divide sections on a page.
Anchor links
An anchor link helps user find the area of content on a webpage they are looking for.
PDFs and other file types
HTML (content in structured webpages) is the primary format on Waterloo.ca.
Content should be published in HTML first, and follow provincial accessibility standards for the web.
More visual formats such as PDFs or jpegs can be published so long as their contents are already present in HTML.
When a PDF is published, link the document title and note the file type. For example:
-
Tax deferral policy (PDF)
PDF links should be set to open in a new window.
FAQs
We don't use FAQs on waterloo.ca because research shows they make it harder for people to find information and can lead to duplication.
External information
Third party information, including from other levels of government, should not be hosted directly on Waterloo.ca. Instead, a link should be provided to the appropriate organization's website.
Grammar
These rules are designed to ensure consistency when writing for the web.
Abbreviations
Use language like “for example” or “such as” instead of “e.g.” or “i.e.”
Acronyms
Avoid acronyms if you don’t intend to use them again in the content. Acronyms are spelled without periods, unless they are part of the official name of an entity or a person’s name. Plural acronyms are marked with a lowercase ‘s’ with no apostrophe.
Addresses
Write out street names fully, such as 119 University Avenue West.
Capitals
Unnecessary capital letters make content more difficult to read. Use capitals only at the beginning of sentences, and in proper nouns and acronyms.
A proper noun is the name of a particular person, place, organization or thing. Common nouns such as city, site plan, uptown and bylaw are not capitalized.
Use sentence case (only capitalize the first letter in the first word) for all headings and webpage titles, unless they include a proper noun.
Commas
Use commas to separate clauses in sentences and to separate items in a list. Don't use:
-
commas to mark the end of a bullet
-
Oxford commas (or serial commas)
Dashes
Hyphens (-) are used to join words together.
En-dashes (–) are used for ranges, conflicts or connections.
Em-dashes (—) are used like brackets or interruptions.
Dates
Use the format of Weekday, Month Day Year, such as Tuesday, January 1 2017. Write out the day and month fully. Only use a comma to separate the day and month.
To indicate a date range, use to word 'to' instead of a dash or hyphen, such as January 1 to 3.
Bold
If you want to emphasize an important phrase or sentence, use a boldface font. Do not use bold for headings.
Links to a telephone number
To hyperlink a phone number in the text of a page, format with 'tel: xxx-xxx-xxxx' and 'open in the same window'
Links to websites
Always use action-based descriptive links, such as learn more about property tax rates, instead of a URL.
Do not hyperlink with terms that would be unavailable to users with accessibility issues such as ‘click here’ or ‘view more.’
Set all website links to open in the same window, even if they point to an external website. PDF or other document links should be set to open in a new window.
If you're setting up a shortcut URL with multiple words, separate each word with a dash, such as waterloo.ca/asset-management
Money
Money is written in digits with a dollar sign in the front ($5). For service fees and costs, be as specific as needed. You can round budgets and other larger financial figures to the nearest dollar.
Naming conventions
When uploading files to the back end of the website, make the file name descriptive for an external audience. Do not use internal terms such as Corporate Services or council report numbers. If a page or project has multiple documents, name them with same prefix such as:
-
Columbia Street West Environmental assessment
-
Columbia Street West Final project plan
-
Columbia Street West Zone change application
Avoid punctuation or extra spaces in the file name. Also ensure that the file name matches the document name in the file’s metadata. This can be changed using Adobe Acrobat by going to File > Properties.
Numbers
Use digits for all numbers. Spell out millions, billions and above. For example, 5 million people watched the video today, compared to 15 million yesterday.
For number ranges, use 'to' in between numbers. For example, swimming lessons are offered for kids aged 3 to 12.
Periods
Use periods at the end of sentences, but not at the end of bullet points or lists.
Semicolons
Avoid using semicolons.
Time
Write time in numerical form, with the “a.m.” and “p.m.” suffixes separated from the numbers by a space and include the periods. To indicate a time range, use the word ’to’ instead of a dash.