Additional Guidelines for Use
This guide provides recommendations and guidelines for webpage development and maintenance.
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.
- 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:
- <font>: use CSS
- <b>: use <strong>
- <i>: use <em>
- 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
- 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 <a href> tag.
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.
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.
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 the <title> tag 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 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.
- Information on how to format information with CSS can be found in the Content Area information section.
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
All websites should follow the York University Web Accessibility Guidelines to make them accessible to people with disabilities.
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.
- used to highlight links and should not be used for text otherwise
- background colour when used with white (#ffffff) text for highlighting content
- for text
- background colour to use when highlighting content when using with very dark text (above, #252525)
- used for H1 title tags only.
Other colours should not be introduced to the site unless it is a campaign- or faculty-specific element.
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.
Table of Contents
- • Layout Examples
- • Referenced Stylesheets
- • Global Navigation
- • Banner
- • Left Navigation Sidebar
- • Slideshow / Photograph / Design Treatment Area (optional)
- • Main Content Area
- • Right Column Sidebar
- • Bottom Link Menu
- • Footer