Webpage Style Guide

Here are some tips to ensure your webpages work well and fall within the ecuad.ca brand and style guidelines.

Be sure to refer to the Craft Basic Training manual for answers to common questions, as well as the Making Your Content Accessible guide.

Working with hyperlinks

Embedding links

When adding a link to your text, be sure to embed it rather than putting the entire URL.

eg:
This sentence contains a link to the Emily Carr University website.

instead of
Here is a link to the Emily Carr University website: https://www.ecuad.ca/.

If you do need to paste the URL, remove the "https://www." - but be sure to include it in the embedded link.

eg:
The URL of the Emily Carr University website is ecuad.ca.

Open in new tab?

When you add a link, you are given the option to have it open in a new tab.

Always allow the link to open in the current tab unless you are linking to a website outside of ecuad.ca.

Link to Entry vs Link to URL

When you are linking to other pages within ecuad.ca, be sure to choose "Link to Entry" rather than "Link to URL". This will allow Craft to find your target webpage even if the page is moved to a different place in the menu.

When and how to use images

Header images on pages
As a general rule, pages on ecuad.ca do not have header images except in cases where the image is necessary to illustrate important details of the content on the page.

eg:

  • photos of exhibition and event spaces
  • photos of shops and studios
  • images of artwork
Images on graphic buttons

If a graphic button leads to a page that does have a header image, make sure the thumbnail on the graphic button matches that header image.

If the target page has no image, the graphic button shouldn't either - the graphic button can display the default gradient colour block that appears when there's no image.

If the graphic button is on a high-value page, replace the default gradient colour block with relevant images to enhance its look.

What makes a high-value page?

  • high traffic
  • key to recruitment and retention

Contact info images

    If you are using the Contact block, refer to the guidelines for headshots here. If you leave the Image field blank on the Contact block, Craft will display a generic rainbow-gradient colour block in place of a headshot.

    Style + Branding

    Some key notes to keep in mind when writing copy for your web page:

    SEO Description

    Metadata helps search engines identify how useful a page is to the person searching and helps the person searching quickly see what content is on a page.

    In ecuad.ca, we place metadata in the SEO tab of webpages:

    And then we see this metadata in Google search results:

    So, it's very important to make sure we have good metadata!

    How do we write good metadata?

    • Keep it short: use a maximum of 150 characters
    • Make it active: use voice and include a call to action

    Alt Text

    Alt text ("alternative text") is a short written description of an image. Alt text is read by screen readers, which allows your image to be described to people who have visual impairments. Alt text is also displayed if the image file hasn't loaded, or if the user has chosen not to view images.

    In ECU's Craft CMS, the alt text is placed in the Title field of an Asset.

    Screenshot illustrating how alt text is placed in Title field

    All users uploading images to Craft should be including alt text. Here are some tips for writing alt text:

    • imagine you are briefly describing the image to someone over the phone
    • be specific and succinct
    • aim for a maximum of 125 characters
    • if the image contains text, and that text is not included in a caption below the image, include it in your alt text
    • don't add alt text to images that are purely decorative, like borders or logos

    Find more good tips here.