Design Overview

The yorku.ca template design incorporates the top Global Navigation header and the overall yorku.ca home page style. It is intended to create a clean and inviting site with user-friendly fonts, bursts of York red and plenty of white space. It also takes into account the most recent accessibility standards.

Layout Sections

The web page template contains common layout sections to maintain consistency, as well as some variations to address different page needs.

Page layout image

(1) Global Navigation

Purpose: To clearly indicate that the website is part of the larger York University site.

This area remains consistent throughout all web pages on all York University websites. It makes a web page easily identifiable as a York-affiliated entity and gives navigation options to visitors.

There are two versions of the Global Navigation:

Internal: To be used for a primarily internal (York-based) audience, such as Finance, HR and the President’s website

External: To be used for a predominantly external (public) audience, such as Future Students, Careers, Alumni and Development (Giving to York) websites

The default is internal, however, if your site audience is predominantly external, please contact your Account Director.

This page element is mandatory and cannot be modified.

(2) Banner

Purpose: Consistent visual identification of website name

Guidelines for Banner Use:

The banner must span the template width
The title in the banner must be the title of the website (i.e. not a section title or page title) and must be consistent throughout the site. Page titles will be placed in the content area
The banner must be a static image (i.e. not a slideshow)

Photoshop source files are provided with the York template to create these banners, and instructions of how to insert them in the template are outlined in the Production Guide.

Banner Options:

There are three banner options to accommodate different types of websites:

Tall banner with site title and image

Tall banner with site title & image example screenshot

Allows for a right-aligned image in the banner
Icons, buttons and design treatments cannot be placed in the banner
For use with Home Page Examples 1, 2 or 3
Ideal for use on a home page where photography, slide show or design treatments are not the main focus of the content area
Dimensions of red area: 675px x 180px
Dimensions of image: 235px x 180px
Total width of the banner image: 910px
Font: 18pt Arial, #ffffff (white)
Image is right-aligned
Gradient: Dark red to medium red

Tall banner with only site title (no image)

For use with Home Page Examples 1, 2 or 3
Ideal for use on a home page where a photograph is better placed in the content area
Dimensions of red area: 910px x 180px
Font: 18pt Arial, #ffffff (white)
Gradient: Dark red to medium red

Short banner with title (no image)

For use with Home page Examples 1, 2 or 3, and all Secondary Pages
Ideal for use on a home page where other content, such as a slideshow, video or design treatment is the focus of the content area
Mandatory for all secondary pages
Dimensions of text area: 910px x 70px
Font: 18pt Arial, #ffffff (white)
Gradient: Dark red to medium red

(3) Left Navigation Sidebar

Purpose: To provide primary navigation to the user in order to access the main sections or pages of a website. To be implemented as HTML text to allow for easy updating.

Must include only the site title and links to main sections or pages within the website itself (internal links)
Generally no more than two levels of the website (sections and subsectionssub-subsections) should be displayed. Only one expanded section with its subsections listed are to be displayed a time. In the case where a website is deep and other means of navigation is not sufficient, three levels may be allowed with consultation with Marketing & Creative Services
The number of sections and subsections within a section should be kept at a minimum
Each page on the website should have the appropriate section/subsection bolded
The left navigation sidebar must be consistent on all pages of the site, except when a section is expanded
The first link should link to the main page of the website and use the name of the website. The last link in the sidebar should link to a contact page
Links should be short, descriptive and as similar as possible (or identical) to the linked page titles
If there are links to other York or external websites, promo buttons or other items, place them in the right column sidebar
Links are dark grey and turn red and underlined on rollover. When a link is the currently selected item, it is red and bold. The first link to the home page is in all caps. This formatting is coded into the template stylesheet
No additional spacing or lines between sections should appear in the left navigation.

The left navigation sidebar is implemented as a static menu on web pages. Flyout menus must not be used.

The left navigation sidebar should not include any other elements (eg. text, images, text images, buttons, etc.)

(4) Slideshow/Photograph/Design Treatment Area* (Optional)

Purpose: To showcase important imagery/design to help enhance the content on a homepage or on a high traffic page only.

If using a slideshow/photograph or design treatment, it can be placed above the main content area within the specific width. It should only be used to highlight main features on a home page or other high-traffic page.

Images should be no wider than 710px or 455px (depending on the home page option you have selected). There is no mandatory height requirement. Text in the slideshow should be kept to a minimum so as to not compete with the header area above.

For advice on photography, video or design treatments, please contact your Account Director.

For guidance on implementing a slideshow, please refer to the Production Guide.

*Design treatment refers to a Faculty/Department’s unique “look” made up of a combination of design elements that may or may not include photos, or graphical elements.

(5) MAIN CONTENT AREA

Purpose: To communicate the page’s main messages.

Examples of typical content include:

Text
Photos
Design elements*
Videos

The width of the content area is fixed at 455px which ensures an optimal text line length. To ensure the template is displayed properly in browsers, please ensure the items do not exceed this width.

The Main Content Area has a white background and a vertical rule on the right side to separate it from the right column sidebar. The background colour and vertical rule should not be modified.

Formatting styles for common text elements such as headings, paragraphs, links and lists are specified in the main template stylesheet. Links in the main content area are red and turn underlined on rollover. If there are style needs that are not addressed here, please contact Marketing & Creative Services for clarification.

*Design elements refer to graphic elements that are displayed as separately as part of an entire design treatment.

Headers

<h1> tags should only be used with the first header of the page (the page title). All other headers used should be <h2> or lower.

Headers should not be made into links. Instead, use the text that proceeds it to send people elsewhere on the web.

Tabs

Use of tabs to navigate between layers of information within a section of the main content area is acceptable; however, use of tabs to navigate between pages is strongly discouraged.

(6) Right Column Sidebar

Purpose: To be used for supplemental elements to the content on a given page.

If there are no items relevant for this area, keep it empty. When placing content in this area, consider upkeep. If content repeats itself across many pages, consider using an include file to reduce maintenance work.

Examples of primary elements include:

Social media icons/feeds
Parent organization link (optional)
Link lists (e.g. links to other York sites, external links and/or links to specific page on your website.)

If these elements are being used, they should be included in the above listed order.

Additional elements that may appear in the right column sidebar include (but are not limited to):

Photos
Announcements
Event listings
Promo buttons
Question boxes
Targeted info “bulletins”
Profiles
Forms
Videos
Calendars
Search functions
Targeted quick links
Extra info (contact, etc.)

Items that should not be placed in your right column sidebar include:

Top-level navigation items (these should be placed in your left navigation area)
Core content or large blocks of text (these should be placed in your main content area).

Primary Supplemental Elements

Social Media Icons:

Purpose: To provide quick links to relevant social media channels.

These buttons should appear at the top of the right column sidebar on the page.

Some of the more popular examples include:

E-mail (generic)
Facebook
Flickr
Google+
LinkedIn
Picasa
RSS
Twitter
Vimeo
YouTube

A full list can be found in the Production Guide

Each icon should link to the unit’s account at each social media service/website.

If there are more than five icons to display, display five icons in a row, then begin a new row of icons directly below.

Social Media Feeds:

Purpose: To provide a more detailed snapshot of activity on your social media channel.

If a feed is desired, use a widget that is provided by the social media service/website.

Whenever possible, widgets should be styled using York colours (see the Font Colour section of this guide). Styling for Twitter and Facebook widgets are specified in the Production Guide.

Parent Organization Link:

Purpose: To show relevance and organizational structure.

It refers to the division, Faculty or department (e.g. Faculty of Liberal Arts & Professional Studies, or Research) that your unit (e.g. Department of English, or CITY Institute) is a part of or associated with. The Parent Organization Link links to the parent organization site and is displayed in all-caps.

Link Lists:

Purpose: To link to content relevant to the site (e.g. links to other York sites, external links and/or links to specific page on your website).

Each item listed should use the name of the site being linked to, not a descriptive link.

Secondary Supplemental Elements

Photographs:

Purpose: To provide interesting visuals to accompany text.

Photos placed in the right column sidebar should be a maximum width of 210px – anything larger will distort the page. No padding should be placed around the image as there is already left and right padding coded into the section.

Announcements:

Purpose: to highlight important information that is time sensitive.

Keep text brief (30 words or less) and timely
Default styling is black text on white background. Alternative options are black text on light grey background or white text on red background. See the Production Guide for details.

Events Listings:

Purpose: To highlight time sensitive events that can be either manually maintained by the site’s webmaster or can be generated by an RSS feed from an event tool such as York’s event system.

Promotional Buttons:

Purpose: Meant to be simple, clear images that highlight items on the website. They should be a temporary image that highlights noteworthy content with a limited duration to maximize impact.

Should be placed in the right column area only.
Width should be 210px – anything wider will distort the page. Height is dependent on content included.
Any font style and/or image can be used. The link tag, “title” and “alt” information must be provided to ensure accessibility.
It is strongly recommended that a maximum of three promotional buttons to be used on one page to maximize impact.

(7) Bottom Link Menu (Optional)

Purpose: To highlight or complement the main navigation (found in the left navigation area) of the site. This menu should only appear at the bottom of the home page of a website and is optional.

Details:

Must contain at least three and at most five columns
Each column has a header/title that summarizes the list below
The link names should mirror the title of the page being linked to, not a description of the page
To be used for navigational links only, not content

(8) Footer

Purpose: To provide consistent links on all York pages.

The Footer appears on all pages and is made up of links to the following York web pages:

The York homepage
Site Index
Privacy & Legal
Contact York University (which is different than the Contact Us info you provide for your website)

Landing Pages

Landing pages are to be used only in circumstances where a page is a stand-alone page and does not require a left navigation area. Landing pages must include the top global navigation, banner, right navigation and York footer.

Landing pages are appropriate in the following situations:

when the page is a main hub page (eg. Current Students page) that directs users to other York websites
when the page is a home page of a division, unit, faculty or department website that hs no other pages (but which may link to sub-sites that have their own left navigation)
when the page is a promotional page that is part of a paid campaing that includes materials distributed off-campus

Landing pages are used in limited situations and therefore require approval by Marketing & Creative Services.

Printable Version

Website Style Guide (pdf)
updated May 2012