Basic page style guide

Great intro text contains facts about the page and encourages the reader to find out more. A great page contains 3 - 4 page components bellow. Explore this page for guidelines on each element.

Gradient light blue to darker blue image with the words Hero banner image 2400x750 pixels in white font

Text component

This is the main content of your page and the most commonly used component on your website.

Writing for the web guidelines

Here are a few writing guidelines to make your web page more readable

Write to a reading grade level of 8 or lower whenever possible

This makes your website accessible to a wider range of users and allows the content to be understood by almost all.


Tips for writing at lower reading grades: 
  • break apart sentences when possible, and keep them short 
  • avoid jargon, complex words and phrases. Consider adding a glossary for terms your readers may not know
  • use headings and bullet points to break up your content into smaller chunks
  • Expand acronyms on first use. For example, Web Content Accessibility Guidelines (WCAG)
  • use images, illustrations, video and audio to help clarify meaning

Document display component

Document sub section title

Use this block to highlight a document link and break up large sections of text

Plain text media name Example: Running effective meeting guide

Use sentence case

Studies have found that it's easier for users to scan content when it is in sentence case as it allows the eye to flow better. By writing in sentence case you are actually helping your users find what they are looking for more quickly. 

Use headings to convey meaning and structure

Use short headings to group related paragraphs and to describe the sections. This provides an easier flow of reading and understanding the content for the user. Heading1 (H1) is only used for page titles and should not be used within the content. Use Heading2 (H2) to break content into smaller, more specific sections. Heading3 (h3) is used as a subheading of H2 (do not skip heading levels e.g. Heading4 (H4) should not be nestled directly under H2). It also breaks it down into smaller sections which is less overwhelming than a wall of text. It provides organization as it helps users find specific content that they might be looking for in a page.

Use lists (bullets, numbers) for groups of related items

Use numbered lists to list steps in a process. Use bulleted lists for lists of links or other information.

Accordion component

The accordion is used to group information for a more readable and condensed page format

Node heading #1

Node text block #1 - incorporate all the information under this heading that is required. Ensure to use good writing for the web styles that are articled above

A link can also be added

Accordion Node heading #2

Continue with more information about your second item in the text block.

Text and media component

Woman working in a library
Photo credit is a great use of the image caption
 

The text and media section allows the author to add images to large text components. A meaningful, high-quality image can be a powerful tool to draw users to a page, keep them engaged, or encourage them to take action.

Image alternative text guidelines

  • Provide a short description with only the essential information of what the image represents
  • Exception: When an image is used for a button or call to action, provide alternative text that describes the function of the button (e.g. Submit the form), rather than describing the image
  • If an image including text must be used, include that text within the alternative text description of the image
  • Graphs and diagrams should be clearly summarized in the alternative text

Small call to action component

Use the small call to action to break up the content on the page. Ensure you only place this link once on the page.

Plain text page name

Profile section component

A placeholder drawing of a woman with no features
Author's name

Author's position

This component is a great way to highlight staff, local heroes, or volunteers.

Contact information component

Make it easy to find the contact for a staff member or organization by using this component.

Yellow page banner

Related content component

A great way to draw users to further but related resources.

Workshop section component

Workshop Name

A great description can sell your readers on signing up. Insure to include the most important information like location, date, time and cost.

Gradient light blue to darker blue image with the words Hero banner image 2400x750 pixels in white font
Media Only component