Accessibility | Common Utilities | CSS | Electronic Forms | File Structure | HTML Forms | Images
Linking | Metadata | Site Operation | Quality Assurance | Search | Department Template
Department Template Guidelines
Template and Element Use
All Internet sites must use a government of Manitoba template to clearly identify the website as part of the provincial site. These templates are maintained by ManWeb and can be obtained by contacting standards@gov.mb.ca.
The templates include all images and navigational tools to preserve the government of Manitoba visual identity. A second, lower page template is available for use when elimination of the left-hand navigational bar is required. This includes pages needing more room for text, applications or maps.
XHTML Standards
To ensure your pages work with the most popular browsers, it is recommended to code your pages to XHTML standards. Most features included in the XHTML 1.0 Transitional specifications should be compatible with the web browsers of 98+% of the users to our site, but some users may still experience problems with frames, video, audio, Java, JavaScript (and other scripts), and any additional style sheets. Authors must test their pages with several different browsers (and preferably on a variety of machines with different screen sizes, resolutions, and processors) to improve the likelihood that users will see the pages as they are intended. Refer to the guideline on Accessibility, Usability and Access Keys.
Helpful articles on XHTML can be found here: http://www.nypl.org/styleguide/xhtml/guidelines.html, http://www.alistapart.com/stories/betterliving/, and http://www.w3.org/TR/xhtml1/.
It is very important to code XHTML correctly. Some browsers are very forgiving and may show features as intended even with incorrect code, but different versions of even the most popular browsers may not be so forgiving, and the degree of forgiveness can vary from version to version. Also, as other ways of accessing the web become more popular (e.g. handheld devices), and in the interest of improving accessibility, the importance of proper coding and incorporating the correct Document Type Declaration at the top of documents becomes even more critical. XHTML syntax checkers are included in some XHTML authoring software (Dreamweaver MX and higher for example will recognize an XHTML page and correctly insert the proper coding for the page. FrontPage, however, does not and has to be manually checked for proper coding and then processed through a validator. If the user is unfamiliar with XHTML, software may need to be purchased to verify the XHTML code). Please make sure you carefully check your pages with a variety of browsers.
Meta Tags
Refer to the Metadata Guidelines.
Cascading Style Sheets (CSS)
Refer to the Cascading Style Sheets Guidelines.
General Web site Design
It is a good idea to have a look at the government of Manitoba template, which is a hybrid design between full HTML styling and full CSS styling. The pages show how to use XHTML to set up the structure of the pages and CSS for most of the styling. Also, all text is controlled within the style sheets and all of the government of Manitoba graphics (spacers, etc.) should remain constant.
The government of Manitoba waterfall banner appears as a visual identifier at the top of every page. The top black navigation bar provides four or five navigation links to provide easy access to the major areas of a department's website (e.g. home, welcome, site map, etc.). It is a clean, readable look with four links and works well in a 600 x 800 standard monitor size. The search and language links are located here as well. The search links to a page which provides both a departmental search (e.g. search this site) function and a government-wide search. This information is standard within the search appliance and changes are done by ManWeb. The English/Françcais link takes users to the French equivalent of the English page and vice versa. Please see French Language Services for more information on French web pages.
The bottom black bar gives users the opportunity to navigate to other sites within the Manitoba website.
Any division/branch navigation should be in the side bar and not at the bottom of the template. Additional elements should not be added after the Manitoba black bar navigation.
The templates can be used and edited with most HTML editors (DreamWeaver, FrontPage, etc.). To maintain the consistent and professional relationship between all elements on each page, the templates should remain as is unless prior approval has been given by ManWeb (standards@gov.mb.ca).
Typical Internet page screenshots
 |
Main Department Pages
|
 |
Lower Pages
Lower pages have the same elements as the main page minus the side navigation bar. They are meant for pages which require more body copy space (maps, images, etc.). |
Navigation
Each website, directory and document should include navigation aids to assist users in moving around the website. This includes breaking down long individual pages by including anchors and/or bookmarks. Please refer to the linking guidelines.
Website Layout
The images beneath the Manitoba visual identity are not roll-overs or mouse-overs. Capitalize only the first letter of a word in the images, and do not use text in this area. The top black bar is located underneath the Manitoba banner. All top black bar images are to remain in the government of Manitoba images folder www.gov.mb.ca/images. To obtain a complete list of images available, please send your request to ManWeb at standards@gov.mb.ca.
The services provided by departments and agencies should be easy to find. Make sure the information is clear and concise.
Formatting and placement requirements for the top black bar are as follows:
- The top black bar must line up with the bottom black bar and top dark green area on both sides, expanding and contracting for different size monitors.
- All pages will have the text of the first image in the top black bar line up with the text in the green department header and the body copy, ex: the 'H' in Home will line up with the 'M' in Manitoba and both will line up with the body copy's left margin.
- Lower pages without the left side navigation will have the green department header and body copy line up and the top black bar will not be aligned with them.
All websites will contain the following common elements:
- A bottom black navigation bar containing links to the main government of Manitoba page.
- If the site is a division/branch of the department, then the top black navigation bar from that department must be present (ex: forestry falls under Conservation therefore it uses the Conservation top navigation bar).
- Navigational tools.
- Directory of Contents/Site Map.
- Information about the organization/division/branch.
A typical departmental website will probably contain the following pages and or components:
Home Page - The naming standard for the home page is "index.html". A "Department Home" image linking back to this page should be the first image in the top black navigation bar for all pages in the web site. Four or five navigational image links can be included on the black bar and along with the search and Français links makes up the department's top black navigation bar. Possible topics for the top black bar include Home, Welcome, Directory, Publications, Feedback, and Site Map.
Welcome / Ministers Message - This page should be entitled "Welcome to Manitoba [department name]" or "Minister's Message". It should contain a welcome message from the minister of the department with a link to their biography, basic information about the department/agency, and possibly include the mission statement.
Directory / Publications / Services / Other Page - These pages should contain a description of the services provided by the department or agency, and/or contact information as well as basic information about the department/agency, possibly including the mission statement. Links may be included to pages containing more detailed information and/or the information and services page, if appropriate.
Site Map - A properly implemented site map is required for all websites, to allow users to link directly to any point in the hierarchy at a single glance. The site map must be linked off the main department pages (top navigation bar) to ensure easy access. The site map should contain links to the entire break down of the organization, including division/branches, programs/services, special interests, campaigns/promotional material, publications, news, about the department, annual reports, committees, general information, related links and contact information. Site maps should be a simple and static representation of the information architecture and to ensure they are not overwhelming for the user, it is recommended they not be more than two-a-half screens long.
Search Page - This page consists of two searches for the users. One is search this site which will only search the current department/agency site, and the other is the government of Manitoba search which searches the entire government of Manitoba website. These pages will remain with ManWeb, please contact standards@gov.mb.ca to find out where your search page resides.
Français Pages - A French template, mirroring the English template, has been created for use on the Manitoba web site. These pages must consist of the same information as their English equivalents and the two pages are to be linked to each other. While on the English page, the user should be able to click the Français link and go directly to the French equivalent and vice versa. It is recommended that all departmental navigational links in the top black bar on the French version of departmental sites be in French. Any material that has been printed in both official languages must be presented in both languages on the web site. Please see French Language Services for more information on French web pages.
Element Screen Shots
Top banner - consists of the Manitoba visual identity, the globe and waterfall. This area is part of the template and cannot be altered. All the images are absolute links to www.gov.mb.ca/images/*.
Department/division/branch pages screen shot
- access keys 2 and 3 used for keyboard navigation appear above header images. These can be hidden if you choose.
- upper left side; globe image with Manitoba highlighted (absolute link - http://www.gov.mb.ca/globe.gif), and waterfall image (absolute link - http://www.gov.mb.ca/images/waterfall.gif).
- upper right side; Manitoba visual identity (absolute link - http://www.gov.mb.ca/images/manitoba.gif)
- underneath department navigation bar, menu with relative links to department pages and to the right, search/language links.
- access key 1 used for keyboard navigation appears to the left of the first menu item on the department black bar.
Main navigation (top black bar) - contains the department-wide navigation. These links are consistent throughout the entire departmental web site structure. All the images are absolute links to www.gov.mb.ca/images.
Search/language area - contains programming and links to the main government of Manitoba search engine and the language links. This area is part of the template and cannot be altered other than to ensure the search links and the language pages are correctly linked. If a corresponding French page is not available, the link goes to the main departmental French index page. Remove the link if there is no French at all. The search link on the department pages includes the government-wide search and a site specific search. If additional searches are offered within the department site, they should also be listed here. Contact standards@gov.mb.ca to set up the search page.
Side bar navigation - the entire side bar should be coloured golden yellow (hex # F2DD91 or RGB - 242, 221, 145). This area is used for banners to highlight certain events, text links for divisions/branches and/or graphic or text links which are associated with the page. It can be removed to accommodate larger body copy pages. A template without a side bar can be obtained from standards@gov.mb.ca.
Side bar specifications include:
- Logos can be used in side banners
- text should be 10 pixels from the left hand edge
- links to the main government pages are not necessary here
- width or the colour of the yellow bar cannot be changed.
| Government Side Navigation | Department Side Navigation | |||
 |
|
 |
|
|
Main content/body copy area - this is the main focus of the page. It consists of headers, body copy and graphics. This area is the responsibility of the department.
Main government of Manitoba (bottom black bar) navigation - contains text links to the main government of Manitoba web pages. This black bar cannot be altered in any way and must be present on every government of Manitoba webpage.
The bottom black bar:
- contains access key 4 to the left of the government "Home" link
- is a separate table from the actual template, contains no images, and has absolute text links to government of Manitoba main pages
- lines up with the top black bar and top dark green area on both sides, expanding and contracting for different size monitors.
Please note that the French version of the bottom black bar may wrap for some users, do not try to accommodate by inserting a return as the bar grows and expands with different sized monitors.
Images/Banners - Please refer to the Image Guidelines. A complete list of navigation bar images is available by contacting standards@gov.mb.ca.
Grid
 |
The template consists of four main tables plus two nested tables for the left side navigation and the main body text (see 'dashed' tables). The nested left side navigation table is the only cell with pixels which are defined by the images and are not written into the cell coding. The width for the body copy area and the entire template (all four main tables and two nested tables) must be 100 per cent to grow and shrink with different-sized monitors. |
Fonts
Fonts are part of the government of Manitoba standards and are included in the cascading style sheets. Please refer to the Cascading Style Sheet guidelines.
Colours
Colours for the web site are the main colours that follow throughout the site. These colours are for the template areas:
| Top Banner: | Dark Green Hex # 006666 RGB= 0-102-102 |
 |
Side Bar Navigation: | Yellow Hex # F2DD91 RGB=242-221-145 |
 |
