Skip to main content

Additional Guidelines for Use

This guide provides recommendations and guidelines for webpage development and maintenance.

Minimum System Requirements

The template is designed with the following browsers and operating systems taken into account:

  • Browsers: IE7+, Firefox 5+, Chrome and Safari
  • OS: XP, Windows7, OSX10.6+

York University no longer supports browsers or operating systems other than those listed above.

General Coding Guidelines

  • Whenever possible, use absolute links not relative links
  • Always use opening and closing tags
  • Code should be in lower case, especially file names and hyperlinks
  • These tags are deprecated by the W3. Use the alternative:
    • : use CSS
    • :  use
    • : use
  • Use the file suffix .html (rather than .htm) for the sake of consistency throughout the yorku.ca website
  • Place additional css in the page header or as an additional style sheet rather than in addition to individual tags on the page

Of note:

  • Ensure that the webpage markup is valid
  • Include a unique page title using the title element for every page
  • When linking to files that are not webpages (ie. Word documents, PDFs, etc.) indicate the file type (eg. Template files (.zip)) and have it display in a separate window (as per standard web practices). To do so, add target=”_blank” to the tag.

How to Organize Your Website Files

When setting up a website, create the following folders:

  • images (for .jpg, .gif, and .png files)
  • css (for .css files)
  • includes (for .inc files)
  • downloads (for any documents – in .pdf or .doc format – that visitors will download from your website)

Keep .html files in the main folder or additionally created appropriate sub-files. Using this system will ensure that the website remains well organized and files are easy to find.

Also consider an archiving system –either with one main ‘archive’ folder, or an ‘archive’ folder in each sub-folder. Put outdated files there if they need to be saved. By keeping them in an archive folder, it ensures that they will not be linked to accidentally.

Use of Include Files

Include files are used throughout the York template wherever there is content that repeats across multiple pages (eg. Navigation elements). If there is further content on a website that repeats throughout, use of an include file is recommended. Using an include file means that content needs only to be changed once and is applied throughout the template – content becomes consistent throughout the website and easy to edit.

Page Titles

Each page should have a different title that explains what content is found on the page (but the banner will remain the same on the entire site). This is to help with search engine optimization (SEO). Page titles within thetag begin with the page’s content title followed by the site name followed by York University.

Eg. Page Name | Site Name | York University

A page title should be limited to no more than 64 characters – search engines, browser history and other tools will truncate anything longer. The use of dashes and ampersands is encouraged in order to keep the character count low.

Use of Tables

Use of tables should be limited to only circumstances where data cannot be communicated in any other way. Tables should not be used to format a page – instead, use CSS to format the page’s layout.

Use of Images

The placement of images should be either in the main content area or in the right column area but not in the left-navigation area.

When dealing with images, keep the following tips and guidelines in mind:

  • Use web-optimized graphics (compressed file size) to reduce download time
  • .gif or .png (8) format: Images with little colour gradiation (ie. larger solid blocks of colour or line drawings) that otherwise make limited use of colour.
  • .jpg or .png (24) format: Photographic-quality.

When inserting images onto your page, follow these additional guidelines:

  • Images must have descriptive ALT tags to conform to accessibility guidelines.
  • Images with text must also spell out that information in the text, or use an alternative method of getting the information across to the user
  • Refrain from using images to create layout (ie. spacer gifs). Rely on CSS instead.
  • Images must have width and height attributes

Font Colours

The website’s colours mirror York’s colours: Red, Black, Grey and White. All colours have met accessibility guideline rules for colour contrast when used against a white background.

colour chip: #cc0000
#E31837
- used to highlight links and should not be used for text otherwise
- background colour when used with white (#ffffff) text for highlighting content
colour chip: #252525
#252525
- for text
colour chip: #eeeeee
#eeeeee
- background colour to use when highlighting content when using with very dark text (above, #252525)
colour chip: #333366
#333366
- used for H1 title tags only.

Other colours should not be introduced to the site unless it is a campaign- or faculty-specific element.

Fonts

The font used in this template is Arial. It is available on most computers as a system font and is considered easy to read on-screen. Text styles and fonts for common tags used on the webpage are specified in the main York stylesheet. These tags include: p, a, h1, h2, h3, h4, ul, ol, li.