Best Practices
Creating New Pages
Pages are created by becoming the child of a parent page. Using the Full Edit mode, starting at what page you would like to use as the parent or root, click on the Child Pages tab, mouse over the New button, and choose General Content. You will be brought to a blank Full Edit page.
Title
This is the internal ACM system title for the page. If one of the other title fields is left blank, this title is used. This is a REQUIRED field.
Menu Title
This is the term that will show up in the Menu. If the title is exceptionally long, a shorter title can be created to keep the menu item concise. If this is left blank, the Title will be used in the menu.
URL Title
URL’s should follow current best URL best practices: Always ensure that the URL could describe website content at a glance and include keywords if relevant and applicable. Ensure consistent file naming conventions across the entire website.
This is the page file name when the file is exported. It is displayed in the browser's navigation bar when the page goes live. A URL should be lower-case, have no spaces, and use only letters or numbers. Dashes should be used between words so they can be read by search engines. An example URL title for a page named “My Page” would be “my-page.” The resulting URL would look like this: www.tru.ca/department/my-page.html This is a REQUIRED field
HTML Title
The text you enter here will be displayed in the following places:
- the header of many browsers
- search engine results
- visitors bookmarks
Guidelines:
- this field should describe the page
- it should include "Thompson Rivers University" and the name of your own website
- include what users should expect to find when viewing the page
- it should not be longer than 70 characters
- it should be unique amongst the entire TRU website
Examples
Department Home Page: The Writing Centre: Thompson Rivers University
Department Child Page: How to Contact the Writing Centre, Thompson Rivers University
Meta Data is used for search engine visibility and, in some circumstances, providing site accessibility. When you are in Full Edit mode, click on the Meta Data tab to find the following two types of Meta Data:
Keywords
Keywords are used to help improve the quality of search engine results. No more than 20 keywords should be used on a single page.
Site Description
The site description is used to provide a small description of the page often shows up on the search engine results page.
Using Headings Effectively
Headings make a web page easier for both people and search engines to scan for the main subjects.
The h1 heading is the most important on the page. It is created when you fill in the title.
Other headings should be placed in order of importance with h2 coming after h1. Sections grouped under an h2 heading should use h3 or h4. The least important headings use h5 and h6.
Use the six styles of header from h1 to h6, rather than attempting to create a heading with bold-face or colour.
Search Engine Optimization and Keywords
Write with the plain language that people would type into a search engine to find your page. Be aware that some people might be accustomed to using a variety of terms associated with the subject you are writing about. For example, someone thinking about a Bachelor of Education might use the term "teaching certificate" when searching for the program.
The most important words describing the subject of your page should appear in the title and first paragraph.
Links Best Practices
TRU Links: Always use the ACM "internal links" dialog when linking to a page within the TRU website. This allows the links to be updated if the page is moved.
Open in: When creating links—either internal or external—please choose "Open in: Same Window (Replace the active screen with the linked screen)". This is to maintain consistency and usability for users, allowing them to use the back button in all browsers, including mobile.
External links: Please do not select "Insert External Link Icon" when creating external links. This is no longer necessary and is not recommended.
Font weight: Links should never be bolded, underlined or italicized to indicate emphasis.
File Type Icons
These icons will be automatically added to file downloads. The CSS will recognize the following filetypes and append a coloured download icon.
- Word Documents (.doc & .docx)
- Excel Spreadsheets (.xls & .xlsx)
- Powerpoint Files (.ppt & .pptx)
- PDF Documents (.pdf)
Inserting Buttons
Inserting a button in the page requires you to edit the HTML. To do so, click the "Source Code" button and amend the link by adding the following:
Click me <a href="#" class="button tealbg">Click me</a>
Buttons will not have a background colour by default; this is set with a colour-specific helper class. In this case, river teal is specified with "tealbg".
Appropriate Button Colours
Buttons should not conflict with the Call-to-Action buttons (CTAs). All pages have the primary CTAs (yellow) in the sticky navigation (desktop/tablet) or side navigation (mobile). Additionally, some pages will have secondary CTAs (orange) below the left navigation.
When choosing a colour for your buttons, be consistent. Use that colour for all buttons on that page, and if possible, your site. Where appropriate—e.g. on a coloured background—choose a colour that makes sense.
The available colours are:
- tealbg
- bluebg
- tealbg-dark
- powderbg
- greybg-pale—this is used when linking to a file (.pdf, .doc, etc)
<a href="#" class="button radius tealbg">tealbg</a> <a href="#" class="button radius tealbg-dark">tealbg-dark</a> <a href="#" class="button radius bluebg">bluebg</a>
<a href="#" class="button radius powderbg">powderbg</a> <a href="#" class="button radius greybg-pale">greybg-pale</a>
Image best practices
When inserting images, please resize them before they are uploaded.
An easy-to-remember rule of thumb is 1200/120; an image should be 1200px on the long edge and no larger than 120kb in size. To achieve this, please use photo editing software or an online photo editor. We recommend Pixlr Express. Alternatively, on Windows you can use Microsoft Office Picture Editor or Photos on OS X.
