This page breaks down how and when to style your content to keep the reader engaged and ensure a consistent look across the entire Fanshawe site. For writing style guidelines, please see the Fanshawe College Writing Style Guide.

Headings

Use headings to break up your content into digestible sections. This helps make the page more accessible by defining the structure for electronic screen readers. Headings can also affect search results and help readers scan for what they're looking for. Headings should be used sparingly (don't write the entire page in various headings), but as often as you need (don't write one long paragraph either).

You have five heading types to work with: Headings 2-6. For accessibility reasons, it's important to use headings in the correct order. Use higher-level (lower-number) headings first. Lower-level (higher-number) headings are for sections within sections and usually appear only in long-form documents and reports. Note that Heading 1 is exclusively for page titles and should never be used within your content.


Examples:

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Links

When writing content on this site, you have two link styles available to you. Though there are several link styles throughout the site and unique link styles on certain templates, it's pretty important you only use the two styles explained below:

Default link style

The default link style available is where the link is red (brand colour red) and on hover turns 10% darker and underlines. This is the default link style of the entire site and should be used 99% of the time when writing your content.

This is what a default link looks like.

Menu link style

The other link style available is called "Menu Link" in the content editor style dropdown. There are two situations where you could use this style. The first is when you have a list of two or more links in a row, and want to break them out of the surrounding content. This is what this looks like:

Example of how Menu Link looks

The other situation where you could use this style is when you want to call attention to an important link (in place of a graphic “button”).

Bold, Italics, and Underline

Bold is most effective for calling attention to the most important information (such as deadlines) and actions required.

Italics have some specific, widespread uses, which you are encouraged to adopt:

  • Titles of long, full-length works such as books, movies, and magazines (e.g. Star Wars)
  • Foreign or Latin words (e.g. homo sapiens)
  • Emphasizing important or technical words -- though try to reserve it for when you really, really want to emphasize something.

Underlining should not be used on the Fanshawe website. Normally the only valid uses for underlining in print or on the web are headings and hyperlinks, neither of which are underlined in the current design.

Lists, Tables, Blockquotes, and Highlighted Boxes

There are two types of lists: bulleted and numbered. Bulleted lists are known as “unordered” on the web, and numbered lists are known as “ordered.” Most lists should be unordered. Only use an ordered list if the order or number of items matters, as in a list of steps. See the examples below.


Examples:

Unordered List:

  • pine
  • maple
  • cedar

Ordered List:

  1. step one
  2. step two
  3. step three

Only use tables for relational information or data, such as lists of fees. Don't use tables to lay out columns or rows of text. It will look bad on some screens.

Blockquotes are perfect for when you're quoting someone, or if you want to highlight a sentence from your content. Note that blockquotes should only be used for long, multi-line quotes, and you should never have more than two blockquotes in one page of content. Used too much, blockquotes make your content look tacky and annoy the reader. When used sparingly though, they help draw the reader in.

Highlight Boxes are an alternative to blockquotes. This style is more effective for reiterating key messages toward the bottom of a page in a distinctive format (using this style near the top of the page could break up the flow of the content too soon).


Example:

This is what a blockquote looks like. It really calls attention to itself.

This is what a highlighted box looks like.

Images

Accessible Images

Every website needs to be accessible to everyone, including people with visual impairments. One of the ways we do this is by giving every image an alternate description with Alternative Text (Also known as an ALT tag). ALT tags can be read by screen readers. They are also visible to most users by hovering over the image, and are shown by the browser if the image fails to load for whatever reason. You should see a field for entering the ALT tag just after you select the image you want to add to the page. You can also change the ALT tag by selecting the image in the content editor and editing image properties.

A good rule of thumb when writing alternative text for your photos is to imagine how you would describe the photo to somebody wearing a blindfold. It's important to tell them what you're describing -- just saying "a man on a bench" doesn't really explain whether it's a photo, a video, or something else. It's good to be thorough when describing the photo, but you don't need to describe every single pixel. An overall description will get the point across.

Naming is also important when using images in your content (though not a deal breaker). Understandably, when linking to a photo from a different site or somewhere where you can't control the file name, just leave it as is. However when you do have the ability to change the file name of an image, you should name the file so that if someone were to have to guess what they would see if they looked at that file they could give a general answer. Using our previous example, you could call that photo man_on_bench.jpg or something similar. Avoid using special characters in file names. Underscores are acceptable and preferable to hyphens when trying to separate words in a file name.

Image Sizing

Avoid using images larger than 2MB, or taller or wider than 2000 pixels. Large image files take longer to load and frustrate users, who might not wait more than a few seconds.

To resize an image on a Windows computer:

  • Make a copy of the image so you'll still have the full-size version.
  • Open the copy in Paint.
  • Under Image, click Resize.
  • Make sure the “Maintain aspect ratio” box is checked (unless you want everything in the image to look too short or too skinny).
  • Change the horizontal or vertical percentages to something less than 100% (depending on how big the original is) until you get the image down to the size you want it.
  • View the image at 100% zoom to make sure it's not too small.
  • Save As with a new file name to help you remember which one to upload.

Alignment

There isn't a single best way to align images, but there are some rules of thumb:

  • Use center, full-width alignment when you want to make sure readers pause long enough to see the image.
  • Use left or right alignment for smaller images that add colour or character but aren't essential for readers to see.
  • When using right or left alignment, add 10 px horizontal space.

Galleries

Two types of galleries are available: Slider and Lightbox. Only use Slider galleries for groups of images that are all the same size. You can use Lightbox galleries whenever you have a group of images you want to share.

Please note: You are limited to one gallery per page. Note that alternative text is mandatory as for other photos. Images in lightbox galleries can have captions (optional). Slider images don't have captions.


Examples:

Lightbox gallery:

A Lightbox gallery provides thumbnails of all your images on the page, and the reader can click to view a larger image in a pop-up.

Example of what a lightbox gallery looks like

Slider gallery:

A Slider gallery provides full-width images with the ability to scroll through all photos.

Example of a slider gallery