CLF4 guidelines

The CLF4 guidelines below are created to help with creating consistency across your website.These should be used with the layout examples. If you have questions please reach out to sfucm@sfu.ca.

Headers

Headers and sub-headers will divide your content into easy to scan sections and help your audience find relevant information on the page quickly and easily.

Header styles should follow page hierarchy, or your page will appear lower in Google search results and users with accessibility needs will have issues following the content on the page.

Below are the appropriate uses for each heading style:

  • H1 - page title; use title component
  •  H2 - subheading of H1
  • H3 - sub section of H2
  • H4 / H5 - for footnotes or related link areas

 Basic guidelines

  • There should only ever be one H1 on a page, and should appear before anything else
    • Unique to the homepage, H1 is assigned to the site name in the header
  • Use short and engaging headlines short for effectiveness
  • Don't link headers, use call to actions

Buttons and the more link

There are two buttons and a more link stye for your communication strategy needs. These call to actions will help define your page's hierarchy and communicate actionable choices.

Make sure to use actionable labels to give the user a clear sense of why they are clicking on the button or link. Examples include, but are not limited to:

  • Watch video
  • Sign up
  • Read all stories
  • Request help

The button that is most appropriate for the call to action will depend on the level of priority and how the content fits into the hierarchy of the content on the page.

However, excessive use of buttons will hinder communication. For example, multiple red buttons on a page will compete against each other, make content un-scannable and hierarchy difficult to understand.

Basic guidelines

Red button

  • Use for the most important (hard pitch) actionable choices
  • Use sparingly, 1-2 times on a page
  • Use on Text and Image Overlay Banners when desired
  • Use clear actionable labels

Outline button

  • Use for moderately important (soft pitch) actionable choices
  • Use as the primary button, in moderation
  • Don’t use on the Text and Image Overlay Banner
  • Use clear actionable labels

More link (with auto generated arrow)

  • Use for passive actionable choices after a block of content
  • Use brief phrases

Overlays

Intended for branding/key messaging, Text and Image overlay banners styes bring dynamic and bold expression to layouts. It is recommended to use these banners rather than Carousel, as carousels are an infective tool and considered an ineffective web practice.

Basic guidelines

  • Use a brand or key message for the title
  • Keep the title brief and concise
  • Avoid awkward line breaks – use short words
  • Avoid using commas. Headers that require commas are too long and should be shortened
  • Use only the red button

 

Homepage overlay full banner considerations

There are two title sizes to choose from. By default, the title will display at the large font style, when required, use the CSS class title to reduce the font size. If using two overlay full banners on the page, considering using the default for the first appearing only.

Overlay banner considerations

These banners are great on the top of pages with side navigation. It is highly recommended that they are not used in column sizes less than 67% of the row width.

  • Use brand/key message
    • Use page title component above
  • Use brief descriptions
  • Use only the red button
  • Consider height of image to accommodate the content