WEBSITE STYLE GUIDE Revised March 28, 2007

Table of Contents
3 4 5 6 9 15 17 19 Banners Colours Content Formatting Dimensions Web Design Guidelines Overview: Basic Page Components Page Classes Page Layout & Dimensions Navigation Structure

Overview: Basic Page Components

1 1

Header

Common to all pages, the header takes the user back to selected areas on the main U of C site and provides access to search tools.

Banner

Graphic Banner.

Main Tab Menu ( level 1 of the menu system)

3

The main tab menu represents the categories of content on your site. The tabs work together with the side menu.

3 4

Side or Sub Menu ( level 2 and below )

This menu contains subcategories for the main tab menu. When a main menu item is selected this menu changes to display the subcategories for that item.

4 5

Content Area

5 6

Quick Links
6

This area is used to provide short cuts to important resources or content. The quick links can be to anywhere on your site or the Internet.

Footer

Common to all pages, the footer is used to provide links to specific resources. The footer, like the header, has the same content on all U of C pages.

March 28, 2007 - STYLE GUIDE

Overview: Page Classes

official public site

A Class

There are three main classes of layouts plus two additional classes for sites that are not directly part of the official University website.

Layouts for Main Websites B Class

Class A
Class A is the top website as accessed from ucalgary.ca. The content at this level will be organized around the five main tabs (Home, Prospective Students, Current Students, Alumni, Community).

faculties, centres and admin units

Departments

C Class C Class

Class B
Class B consists of sub-sites that can be accessed through class A or accessed directly. These would generally be faculties, administrative units and centres. Faculties and centres are accessed via a sub domain (something.ucalgary.ca) while administrative units might be accessed via a folder in the root of ucalgary.ca (ucalgary.ca/unitname). Smaller departments can be accommodated in this class B provided that their content will fit in the side menu. A third level can be added to the side menu to support this. Larger departments or where there is a need for a department to have a separate website become class C sites.

ASSOCIATED WEBSITES

Class C
Class C consists of department level organizations where the department has enough content to merit a separate web site. Class C sites, like their parent, can be accessed via a sub domain or folder within the root of their parent site. Affiliated Organizations

D Class

Research and Personal Pages

E Class

At class C, visitors can access the main U of C site via the navigation bar along the top of the web page. Users will also be able to return to a departments parent by clicking on the faculty logo or name located below the THIS IS NOW wordmark.

Layouts for Associated Websites

Class D
Organizations that are semi-independent but still part of the University of Calgary, should be encouraged to conform to Class D.

Class E
Class E sites are intended for those websites where minimal conformity is required. These sites would only use a standardized header and footer.

March 28, 2007 - STYLE GUIDE

Overview: Page Layout & Dimensions

Classes A, B & C
The heights of the banners change depending on page class. Aside from this B, C and D class pages have the same dimensions as class A pages. Please note that on class A, the tabs are placed above the banner. 790 px 18 px 18 px 18 px 24 px

C-2

124 px

A-2 & B-2

134 px

C-1

172 px

A-1 & B-1

286 px

3 px 1 px 1 px 1 px 24 px 24 px

Alignment in Browser Window

The design is intended to be horizontally centered and tight to the top of the browser window. The browser window background colour is a light grey (#f1f0f0).

18 px 24 px 7

315 px double column width

315 px

160 px

630 px single column width

March 28, 2007 - STYLE GUIDE

Overview: Navigation Structure

Tab Structure
Main Site Navigation
The website has a tabbed structure. Each tab represents a general category of content on your site. These can be organized around users or subjects, or a combination of both. As tests have shown that users will stop reading after four to five items in a list, we have intentionally limited the number of items that can be placed in the main tab menu to the width of the window. If your current site has more than eight top level menu items, consider how you can reduce that number by creating more general groupings. For example, instead of individual tabs for student services, create a students tab and list the services in the side menu.

Main Tab Menu

Category 1

Category 2

Category 3

Category 4

Side or Sub Menu

Items in this menu are subcategories of the current selected tab.

Sub Category Sub Category Sub Category Sub Category Sub Category Sub Category

Sub Category Sub Category Sub Category Sub Category Sub Category Sub Category

Sub Category Sub Category Sub Category Sub Category Sub Category Sub Category

Sub Category Sub Category Sub Category Sub Category Sub Category Sub Category

March 28, 2007 - STYLE GUIDE

Overview: Menu Structure Detail

Example
When a visitor arrives at this example home page, the leftmost, or Home tab is selected by default, and the side menu displays items related to the Home tab. When a visitor selects a different tab, the side menu changes to display the content related to the new tab. * NOTE : The selected tab will display a selected state (i.e. change colour) and the tab name will be displayed above the side menu.

The tab stays in a selected state, by modifying the font or the tab colour. The recommended selected state is bold plus the rollover colour.

The selected tab name is displayed above the side menu. 14 px Arial Bold, white (or other colour)

Sub Menu for the Selected Tab

Each tab has its own side or sub menu.

March 28, 2007 - STYLE GUIDE

Overview: Left Hand Column Detail

12 px Arial Bold

Highlight colour

160 px

24 px 12 px

HEX: #dad9da R:218 G: 217 B:218

12 px 2

18 px

18 px

Quick Links and Left Hand Column Use

The left column underneath the side menu is reserved for quick links. These are links that do not fit into the menu structure, but need to be brought to the attention of the user. Quick Links can link to any place on your web site or the Internet. Additional boxes can be put in the column for things such as logins. Do not use this area for content.

March 28, 2007 - STYLE GUIDE

Class A1 Banners
A-1
There are only four pages that can use this class. These represent the four tabs in the main menu. No other pages may use this layout.

18 px 790 px 160 px Side menu position U of C Logo 80 px

110 px 48 px Impact Regular

286 px

24 px Banner headline maximum width 594 px

18 px 12/14 px Arial Regular

Class A-1 Banner

This banner will only appear on the A-1 tabs. Although the left hand side of the banner will be partly covered by the side menu, the banner must extend under the menu in case the menu is shorter than the banner. It is recommended to use images with a single distinct point of focus.

March 28, 2007 - STYLE GUIDE

Class A2 Banners
A-2
All second and third level pages on the A class use this layout. The photo at the top of the page may be replaced by a flat colour.

U of C Logo 18 px 48 px Impact Regular 160 px 790 px 80 px

110 px

134 px

24 px Banner headline maximum width 496 px

24 px

18 px

Class A-2 Banner

This banner appears on all class A-2 pages. The banner can be an image or a solid colour. If a solid colour is chosen it should not compete with the menu. A neutral colour such as grey is recommended.

March 28, 2007 - STYLE GUIDE

10

Class B Banners
B-1
Class B-1 is the landing or home page for faculties, administration units or centres. The main menu bar has dropped below the banner. Faculty logos can be 80 px or 160 px wide.

B-2
Class B-2 is the sub page for class B sites. The page is similar to the landing page but the banner height has been reduced. A flat colour may be substituted for the picture.

B-1&2 790 px Wide Logo Variation

Faculty or U of C Logo

18 px 160 px

18 px

110 px

B-1

286 px

24 px Impact Regular

48 px Impact Regular

B-2

134 px

24 px B2 Banner headline maximum width 576 px for a 160 px wide logo B1 Banner headline maximum width 754 px 18 px 18 px 80 px

Narrow Logo Variation

Class B Banners
Class B-1 and B-2 banners differ only in height. The logo will float over the upper right corner and the faculty or website name will be positioned in the lower left hand corner. When selecting photos for the banner these two corners need to be taken into consideration. B2 Banner headline maximum width 656 px for an 80 px wide logo 18 px
March 28, 2007 - STYLE GUIDE

11

Class C Banners
C-1
Class C sites are a subordinate site of their parent faculty or administrative unit. From this level, the user must be able to move back up the hierarchy. The parent faculty logo or unit name will be linked to the parent site home page to allow users to move from level C to level B. Clicking THIS IS NOW or one of the three items in the header bar will return the user to the U of C home page.

C-2
A picture or flat colour may be used as the banner.

C-1 & 2
790 px 18 px Impact Regular 32 px 18 px 160 px

C-1
Maximum size of logo or name
(the logo should be linked to the parent home page)

172 px

C-2

124 px 24 px

Impact Regular size to fit space

Banner headline maximum width 594 px 18 px

Class C Banners
In Class C, the logo or faculty name must be placed on the left side and fit in the left hand column. The logo or name should be used as a link to the home page of the parent faculty. If the U of C logo is used it must be placed over white. If a name is used, it can be placed over the banner photo as illustrated.
March 28, 2007 - STYLE GUIDE

12

Class D Banners & Pages

790 px 18 px 24 px 18 px 18 px 24 px

134 px

24 px 18 px

Class D
Class D websites are semi-independent organizations that use the University of Calgary logo or indicate that they are part of the University of Calgary community. Class D uses the same page dimensions as class A, B and C. The menu styling can vary somewhat, but must remain in the same location as class A, B and C. All pages will use the standardized header and footer. Colour selection should also conform to the parameters described later in this guide.

28 px 24 px

Content area 594 px

160 px 18 px

630 px single column width 18 px

March 28, 2007 - STYLE GUIDE

13

Class E Banners & Pages

790 px 18 px 18 px 18 px 24 px

Content area

18 px 24 px

Class E
Class E sites require only conformity in width (790 px), placement in the browser window, and the inclusion of the standardized header and footer. Beyond these requirements, the content layout is up to the site owner. Where possible, class E sites should attempt to follow some of the basic content formatting such as fonts types, column widths, etc. Possible applications would be individual research or small or project sites. 160 px 630 px single column width

18 px

March 28, 2007 - STYLE GUIDE

14

Colours: Overview
h2 h2 h1 3 1

Fixed Colours
1
Browser window background HEX: #f1f0f0 R:241 G:240 B:240

Header, footer and text HEX: #000 R:0: G:0 B:0

2 3 2

Rules and link boxes HEX: #dad9da R:218 G 217 B:218

Class B, C, D and E Highlight Colours

3 h1 Sample combinations
HEX: #8f8f8f R:143 G:143 B:143 HEX: #3d61ab R:61 G:97 B:171

h1

h1

HEX: #2c5496 R:44 G:84 B:150

h1

h1 h2

h2

HEX: #ed751c R:237 G:117 B:28

h2

HEX: #85ba51 R:133 G:186 B:81

h2

HEX: #ed1c24 R:237 G:28 B:36

The highlight colours can be changed to any colour* you want. Only two highlight colours can be chosen. Either highlight colour can be used for the menu tabs and header and footer, but the darker one should be assigned to side menu items and hyperlinks in the text body. Both hyperlinks and side menu item names must be the same colour; both header and footer must also be the same colour. Use two bright colours which contrast with each other so the active tab can be clearly highlighted. Avoid using pastel colours. Each department, faculty or unit may have its own colour scheme, so a department can choose a colour scheme that is different from its parent faculty. * NOTE : you do not have to use web safe colours.

Class A Highlight Colours

All class A pages must use this colour palette.
Highlight 1 HEX: #ed1c24 R:237 G:28 B:36

h1

h2

Highlight 2 (Footer and left header) HEX: #f8b620 R:248 G:182 B:32

March 28, 2007 - STYLE GUIDE

15

Colours: Sample Variations

h1
Highlight 1 HEX: #f29632 R:242 G:150 B:50

h1

h1

h2

Highlight 2 HEX: #2c62ab R:44 G:98 B:171

h2 h1 h2 One colour for tabs, header and footer In this variation only one highlight colour (orange) is used in the header and footer as well as the menu tabs. The second colour (blue), which is darker, is used for text highlighting such as hyperlinks and side menu items.

h1 h2

h2

h2 h1

h2

h2

h2 h2

h2 h1 h1
Highlight 1 HEX: #f29632 R:242 G:150 B:50

h1

h2

Highlight 2 HEX: #2c62ab R:44 G:98 B:171

h1 h1 h2 Two colours In this variation, orange is used for the menu tabs, and blue is used for the header and footer. Again, the blue is chosen for text highlighting because it is darker and more legible.

Highlight 1 HEX: #f8b620 R:248 G:182 B:32

h2

Highlight 2 HEX: #3d61ab R:61 G:97 B:171

h2 h2

March 28, 2007 - STYLE GUIDE

16

Content Formatting Dimensions: Single Column Layout

1 px rule 2 Page heading (H1) Arial bold 18 px

1 18 px

Page subheading (H2) Arial bold 14 px 1 2 Main picture: any size 18 px margin on text facing sides Page subheading (H2) Arial bold 14 px Paragraph heading (H3) Arial bold 13 px Arial 12 px line-height 18 px 3

Rules and link boxes HEX: #dad9da R:218 G:217 B:218

Text HEX: #000 R:0: G:0 B:0

Hyperlinks Use the darker of the two highlight colours. This example uses the blue from page 16.

3 List items 18 px Arial 13 px underline link

Content area 594 px 18 px

48 px 18 px

March 28, 2007 - STYLE GUIDE

17

Content Formatting Dimensions: Double Column Layout

2 Column heading (H1) Arial bold 16 px 1 px rule

18 px 64 px 64 px

18 px

Story heading (H3) Arial bold 12 px Arial 12 px line-height 18 px

64 px

Teaser heading (H2) Arial bold 13 px underline link

64 px

18 px

18 px 3

18 px

Combination of formatting on one page The variation below shows a single column section followed by a double column section.
H1

36 px Content area 279 px 18 px Content area 279 px 18 px 24 px

Rules and link boxes HEX: #dad9da R:218 G:217 B:218

48 px

Text HEX: #000 R:0: G:0 B:0

H2

Hyperlinks Use the darker of the two highlight colours. This example uses the blue from page 16.

March 28, 2007 - STYLE GUIDE

18

Web Design Guidelines

Before You Start Creating/Migrating Your Website
What are the goals of your site and who is the website for? Before you start to design or build your site answer these two questions. Every time you have to make a decision about your site, reference your answers. If someone requests to post documents which do not fit what the site is for, do not include the material. Be to the point. Make your text concise and paragraphs short. Think about what is important for your users. Remember, users tend to scan rather than read long pages of text. Put the most relevant content for your users first. If your sites purpose is to recruit new students, insert information such as how to qualify or apply to the program at the top page. Keep your pages short. Split information into multiple pages if it runs too long. Better yet, edit it so it will fit into less space. Too much information on a site may make it harder to find the relevant information.

Site Architecture
Plan out your site on paper before you start to build it. Create a flow chart that logically organizes the content into easy to understand groups. Your navigation should reflect the organization of your content (i.e. your flow chart) otherwise you may confuse your users. Do not link to other sites using your main navigation system. Users may be confused if they click on resources under about us and find themselves on a completely different website. Use links in your content area or create a Quick Links box instead. A page only exists in a single location. Remember the navigation system is like the table of contents at the front of a book. Even if chapter two is important, it should not appear in more than one place in the table of contents. If it is necessary to ensure that a particular page can accessed from multiple locations, use links in your content area or create a Quick Links box. Menus containing long lists of topics are not effective. Users often will stop reading after they see four to five items. Try to keep each level within a menu to less than seven or eight topics. Naming menu items: Think about names from the users perspective. Although it may make sense to you, does it mean anything to the intended users? Testing the names with a group of typical users is helpful in determining the naming conventions. Remove content that is out of date or no longer used.

Keep it Simple. Always think about your website from the users point of view. Do not use your website as a filing cabinet. Keep the content current and relevant.

March 28, 2007 - STYLE GUIDE

19