Rule 4 - Presentation
1. Rule
Every page on IntraComm must use the IntraComm standard template.
2. Justification
Ensuring the graphical look of IntraComm is as uniform as possible will help users identify more easily the environment in which they are navigating. This chapter is intended as a guide on how to design the graphical look of pages on IntraComm. It includes the mandatory template to use when creating new pages for IntraComm.
3. Description
3.1 Planning
While it may be easy, you should not be tempted to improvise the design of HTML pages as you go along. It is much better instead to stick as much as possible to an operational plan, devised in advance, that lays down and identifies the characteristics of the different features of each page (standard structure, titles (size, colour, position, etc.), navigation (position, number, type, etc.)).
3.1.1 Why use templates ?
You should prepare a model (template) specifying a standard page layout as soon as you start the initial planning for your site. The model must be based on the standard IntraComm template. This will help you fix the general layout for all pages (or a particular group of pages), the look of titles and subheadings (size, layout, etc.), and the location of pictures (logos and other images), links and the navigation bar, for example.
3.1.2 Readability and visibility of information on the site
When creating a HTML page, bear in mind the following recommendations:
- keep to the standard screen resolution (800 x 600 pixels) and ensure that all the information visible on a page is not truncated when it is printed;
- avoid overlong texts - users should not have to scroll down more than four screens;
- make sure the whole page is readable, with well spaced text and a font that is easy on the eye (Arial, Verdana and Helvetica are the most common). Note that any fonts you use that are not installed on the user's computer will automatically be replaced by a default font. To ensure that your pages can be easily handled by any web content management tool that may be used, we recommend that you use style sheets (CSS) to determine how the page contents are displayed. Styles can be applied in different ways in the HTML code itself. However, we recommend that you group together all your styles in a central file for the following reasons:
- with a central file you can change the formatting of your text without having to go into each page separately;
- it ensures that all your pages look the same;
- the code is compact and can be memorised by the browser - it does not therefore have to be loaded separately for every page on your site that is viewed;
- information providers will find a style sheet at the following address: http://www.cc.cec/home/style/intracomm.css;
- use bold or italics to highlight parts of the text - underlining should be avoided since underlined text signifies a hyperlink;
- give your text a sufficiently distinctive colour in relation to the screen background (avoiding light text on a dark background which can be hard to read in printed form);
- include an overview of the site structure in the homepage, so visitors can tell at a glance what they can find on the site;
- be consistent with the layout and visual identity of each page on your site;
- avoid overloading your site with too many graphical features or animations with long download times, and err on the side of simplicity in selecting images
4. The standard template
The complete version of the template is mandatory and contains the following features :
Header :
The navigation features within a particular subsite or all pages on a particular subject are linked to the header, which denotes the visual identity of the pages in question. The picture above shows the buttons "What's new?", "Search", "Index", "Contact" and "Help", as well as a toggle switch for the different language versions. The header equally includes a standard reference to the disclaimer, the confidentiality notice and the general privacy statement (see Chapter 9). The second navigation feature is the link(s) to higher levels of information. They are situated just below the header and must be in text form for reasons of readability and user-friendliness. They are an easy way for users to return to pages higher up the hierarchy.
The graphical look of the default template can be adapted to match the page contents (see pictures below), without changing the location of the navigation features.
Footer :
The bottom of each page must contain the in-site navigation features and a link back to the top of the page. It must also contain without fail:
- the name of the person or group responsible for the page contents (here we recommend you insert a link to the unit description in the Guide des Service);
- the date and time the page contents were last updated.
4.1 The template features explained
Title :
Every page must contain a title. Titles have the following functions:
- they clearly identify the page;
- they are displayed in the results pages when you run a search;
- they are used to identify pages saved as Favourites in the Favourites list.
Titles are used both to identify and to search for pages.
N.B. Note that, by title, we mean the title entered between the <title> tags in the HTML code and not the title entered in the metadata (see Chapter 7 on metadata). However, these titles must be identical.
Titles should be short and to the point. Avoid overlong titles as these may well be truncated. Also avoid using special characters such as &, @, $, £, etc. Titles must be in the same language as the page.
Banner heading :
As described in the previous point, banners help establish the graphical identity of a site or part of a site.
- images used for the banner should not exceed 700 pixels in size
- banners must be in the same language as the page
We can help any department that does not have the necessary software to personalise banners on pages they are creating.
Choice of language :
If more language versions are available, they should be linked to through images or icons on the body of the page. Language buttons FR and EN are contained in the standard header. For more details on multilingualism, refer to Chapter 6.
Vertical navigation :
The top of each page must contain a link to higher levels of information, beginning with a link to the IntraComm homepage, and the title of the site or subsite in question (NB the title being the logical title of the site or subsite rather than the name of the folder where the files are stored). These links must consist of at least two levels of navigation. Information providers can include more levels depending on the needs of the site. For reasons of readability and user-friendliness, these navigation features must be in text form:
>>IntraComm > level x > page x
These links must point to higher levels in the same language version as the page itself.
Other tools :
Each page must contain a link identifying the person or group responsible for its contents. A "Contact" button or link enables the user to contact these people using an electronic form or an e-mail.
Pages must also contain a link to the IntraComm search engine. A link to the subject index is, however, optional.
Other navigation features can also be added to the site, such as a link to a news page, if one is available.
For all the navigation buttons on your site, make sure you specify whether they refer to IntraComm as a whole or just to the page or subsite in question. For example, the "Search" button can be linked either to the IntraComm search engine or to an internal search engine for your subsite. You can differentiate between the two by using the tag <alt> (e.g. "Search on this site" or "Search on IntraComm").
Date of last update :
You must indicate on each page the date on which its contents were last updated, unless this has already been entered in the metadata (see Chapter 7 on metadata).
4.2 Application
In the toolbox you can download the standard version of the template in English and French, together with all the associated visual elements.
