McMaster Brand Standard for Websites

McMaster University’s policy calls for all university websites to follow its brand standard. McMaster websites share common elements, presentation and behavior and a consistent design, enabling visitors to navigate seamlessly from site to site within the McMaster domain. The McMaster University website provides a model for all mcmaster.ca sites. Templates for developing sites can be downloaded from: http://fhs.mcmaster.ca/webdesign/templates.html

Which areas are required to use the brand standard?

1. ALL OF THE FOLLOWING AREAS ARE REQUIRED TO USE THE BRAND STANDARD FOR WEB SITES:

• All university administrative areas • All Faculty, School, Institute and program sites • All department and division sites and all centres within the departments and divisions • All sites using the mcmaster domain

Page 1 of 12 7/14/2008

McMaster Brand Standard for Websites

2. THE FOLLOWING AREAS ARE ENCOURAGED BUT NOT REQUIRED USE THE BRAND STANDARD FOR WEB SITES:

• Individual faculty member sites

3. THE FOLLOWING AREAS ARE NOT ALLOWED TO USE THE BRAND STANDARD

FOR WEB SITES:

• Student and other sites not affiliated with or approved by the University or the McMaster Students Union

• Any site that is not affiliated with the University. What elements must remain common across all websites? A McMaster website may be divided into the following five areas: header (including the McMaster logo), top navigation bar, left navigation bar, content area and footer.

Page 2 of 12 7/14/2008

McMaster Brand Standard for Websites

Page Specifications

1. Page Dimensions

• Width: 945 pixels fixed • Height: variable

2. Layout

• The new design uses <div> containers instead of tables to layout pages

• Tables are used only to contain tabular information

3. Text • Font-family: Specify Verdana as the primary font. If Verdana is not available on

the user’s computer, then specify Ariel as the second choice, Helvetica as the third, and sans-serif as the default CSS font-family: Verdana, Arial, Helvetica, sans-serif

• Do not change the order of the attribute for font-family in the stylesheet. For example, Arial is not allowed to be the primary font

• Do not use other fonts

• Font-sizes: Allow user’s browser to set initial font size and specify font sizes relative to the initial size

• Colours: Use approved colour palette below. Do not use other colours

4. Graphics • Colours: Use approved colour palette below • Use CSS to create borders and graphical elements whenever possible instead of

using image files. • Use borders and horizontal rules to separate content sections. Light gray

(#CCCCCC) and maroon red (#990033) are preferred for borders and horizontal rules

5. Page backgrounds and borders • Do not use background colours or background images for the page body • Do not use borders around the page body

6. Images

Page 3 of 12 7/14/2008

McMaster Brand Standard for Websites

• Colour photography is to be used • Photography should look natural and candid, not posed • Photographs taken on campus and university subjects are preferred over stock

photography • Panoramic photographs or images are encouraged for home pages and may also

be used on other pages. The dimensions are 776 pixels wide and from 200 to 287 pixels high

• The subjects of photographs are intensely engaged in what they are doing and, when possible, working together towards a goal

• With static subject matter, focus on foreground elements or subjects, creating depth and visual interest.

• Subjects should be actively involved in an activity or discussion • When possible, subjects should be focusing on an object or tool • Photographs of campus buildings should include people and activity to show

community • Departments are encouraged to create photos reflecting consistent University

themes • Limited use of photo animation—refreshing photos in a clean and simple way is

permitted. Broken images and complex animation are not appropriate Photo Gallery It is important to demonstrate real innovation and collaboration within the McMaster community. You may select images from the McMaster Photo Gallery: http://www.mcmaster.ca/ua/opr/photos

Page 4 of 12 7/14/2008

McMaster Brand Standard for Websites

Colour Palette Specifications

The selected palette is comprised of a range of tones that are drawn from the primary school colours to form a primary and secondary palette. The tertiary colour palette allows the addition of colours to enrich the University as a whole. These colours should be used only as an accent to the primary and secondary palette.

Primary Colours

Dark Gray Web Code: #666666

Maroon Red Web Code: #990033

Black Web Code: #000000

Secondary Colours

Medium Gray Web Code: #999999

Light Gray Web Code: #CCCCCC

Tertiary Colours

Yellow Web Code: #FFCC33

Blue Web Code: #003399

Page 5 of 12 7/14/2008

McMaster Brand Standard for Websites

Header Specifications

1. Header to be the same as on the main McMaster website.

2. McMaster logo, text and links are the same on all websites.

3. Only the optional radio button under search may be customized in the header for each website.

4. Dimensions • Width: 945 pixels • Height: 160 pixels

5. McMaster logo

• Located in the top left corner Where is the image file for the McMaster logo? Download the McMaster logo from the main McMaster website: http://www.mcmaster.ca/opr/images/template/main/logo_mcmaster.gif

6. Maroon bar

• Located in top right corner • Colour: maroon red (code #990033) • Width: 500 pixels • Height: 8 pixels

7. Links to MUGSI and the Faculty and Staff Directory are in the left section under the

maroon bar. Text for links: • Colour: black (code #000000) • Font-family: Arial, Helvetica, sans-serif • Font-size: 0.63em • Font-weight: bold

8. Quick Links

• Contain the same links as on the main McMaster website. • Located below the right maroon red bar in the right section • Font-family: Verdana, Arial, Helvetica, sans-serif

Page 6 of 12 7/14/2008

McMaster Brand Standard for Websites

• Colour: black (code #000000) Label • Font-size: 0.69em • Font-weight: bold Text Box • Font-size: 10 pixels • Font- weight: normal

9. Search

• Located below the Quick Links in the right section • The search box has the ability to search the entire McMaster domain (i.e.,

http://www.mcmaster.ca) • The main McMaster website uses a Google Customizable Search Engine that is

available for all websites to use Search label: • Colour: black (code #000000) • Font-family: Verdana, Arial, Helvetica, sans-serif • Font-size: 0.69em • Font-weight: bold Search text box: • Font-size: 10 pixels • Font- weight: normal Search radio buttons (optional) • Located below search label and text box • Allow users to more specifically target the search. • The first radio button searches the entire mcmaster.ca domain, the second

searches the website within the domain, and optionally, a third may be used to search a specified section of the website or another website within the domain.

• Colour: black (code #000000) • Font-family: Verdana, Arial, Helvetica, sans-serif • Font-size: 0.90em • Font-weight: bold

Page 7 of 12 7/14/2008

McMaster Brand Standard for Websites

Top Navigation Bar Specifications

1. The header has the following dimensions:

• Width: 941 pixels • Height: 33 pixels

2. All university administrative sites and faculty sites must use the McMaster global

navigation in the top navigation bar.

3. All other areas may choose to use the top navigation bar as their primary site navigation or use the McMaster global navigation.

4. The text for the links have the following characteristics: • Font family: Verdana, Arial, Helvetica, sans-serif. • Font size: 12 pixels • Font weight: bold • Colour: white (code #FFFFFF) • Background: maroon red (code: #990033) • Background on hover: dark gray (code #666666)

5. When the cursor hovers over a parent link in the

top of the top navigation bar, a submenu may optionally drop down.

6. When the cursor hovers over a link in a submenu, a second sub-menu may optionally drop down.

7. Do not use more than three levels in the top navigation bar.

8. All drop downs use the same text characteristics defined for the parent link in the top navigation bar except that a dark gray (code #666666) border separates each drop down menu item.

9. All drop downs are left-justified under its parent link, except if the drop down would go over the right edge of the page, in which case the drop down is right-justified under its parent link

Page 8 of 12 7/14/2008

McMaster Brand Standard for Websites

Left Navigation Bar Specifications

1. Dimensions:

• Width: 169 pixels • Height: variable • Top margin: 10 pixels • Bottom margin: 10 pixels • Padding right: 25 pixels

2. Text (first level of menu)

• Font-family: Arial, Helvetica, sans-serif • Font-size: 0.75em • Font-weight: normal • Colour (on mouse out): black • Colour (on hover): maroon red • Padding right: 3 pixels

3. All university administrative sites and faculty sites

use the left navigation bar as the primary navigation for the si

te.

4. If other areas choose to use the top navigation bar as their primary navigation, then the left navigation bar may be used for secondary navigation.

5. Drop downs, where needed, appear after parent link is clicked.

6. Do not use more than three levels in the left navigation bar.

7. Text (second level of menu) • Font-family: Verdana, Arial, Helvetica, sans-serif • Font-size: 0.91em • Font-weight: normal • Colour (on mouse out): maroon red • Colour (on hover): black • Padding right: 6 pixels

8. Text (third level of menu)

• Font-family: Verdana, Arial, Helvetica, sans-serif • Font-size: 1em • Font-weight: normal • Colour (on mouse out): black • Colour (on hover): maroon red • Padding right: 6 pixels

Page 9 of 12 7/14/2008

McMaster Brand Standard for Websites

Content Area Specifications

1. Dimensions

• Width: 776 pixels • Height: variable

2. Text

• Font family: Verdana, Arial, Helvetica, sans-serif.

Page 10 of 12 7/14/2008

McMaster Brand Standard for Websites

Footer Specifications

1. Footer to be the same as on the main McMaster website. All text and links are the

same on all websites.

2. Do not put other information in the footer. For example, do not put another

copyright or contact information for your department in the footer. Locate this information elsewhere within the content of the site.

3. Dimensions • Width: 945 pixels • Height: 43 pixels • Top Margin: 20 pixels • Top border: 3 pixels • Top border colour: light grey • Top Padding: 10 pixels

4. Text

• McMaster copyright, address and phone number separated by vertical bars • Font family: Arial, Helvetica, sans-serif. • Font-size: .69em; • Font-weight: bold • Colour: dark gray

5. Links • Contact Us page

URL: http://www.mcmaster.ca/opr/html/opr/contact_us/main/contact_us.html

• Terms of Use & Privacy Policy page URL: http://www.mcmaster.ca/opr/html/footer/main/terms_of_use.html

• Font family: Arial, Helvetica, sans-serif. • Font-size: .69em; • Font-weight: bold • Colour: dark gray • Colour (on mouse out): dark gray • Colour (on hover): maroon red

Page 11 of 12 7/14/2008

McMaster Brand Standard for Websites

Page 12 of 12 7/14/2008

Other Specifications

1. No advertising is permitted on any web pages. No names or links of external contractors work on websites are permitted. Software names are also not permitted.

2. All websites should render in the following browsers:

• Internet Explorer versions 6.0 and 7.0 • Firefox 2.0 • Safari 2, 3, 4