University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the...

28
University of Toronto Webspace Guide A resource for site owners and designers 1/28

Transcript of University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the...

Page 1: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

University of Toronto Webspace Guide

A resource for site owners and designers

1/28

Page 2: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

Contents: Introduction ..................................................................................................................................... 3

Objectives.................................................................................................................................... 3

Scope: who should use the Webspace Guide?............................................................................. 3

About the Guide .............................................................................................................................. 5

What the Guide covers: ............................................................................................................... 5

Materials available to site owners and designers: ....................................................................... 5

What the guide does not cover: ................................................................................................... 6

1. Compliance with the U of T Visual Identity ............................................................................... 7

2. Headers...................................................................................................................................... 12

3. Footers ....................................................................................................................................... 15

4. U of T web utilities.................................................................................................................... 16

5. Site utilities................................................................................................................................ 19

6. Web accessibility....................................................................................................................... 19

7. Web standards ........................................................................................................................... 21

Appendix A. Site and page layout concepts .................................................................................. 22

Achieving consistency with the U of T homepage.................................................................... 22

About site design ....................................................................................................................... 22

Site and layout concepts ............................................................................................................ 22

Appendix B. Background to the Webspace Guide ........................................................................ 28

2/28

Page 3: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide - Introduction

Introduction Visitors to University of Toronto websites come away with an impression of the University’s values, goals, and place in the larger community. To enforce the strong and positive impression we want to make on our many audiences, the University should have a coherent and cohesive web presence. To encourage visitors to trust and return to the website for important information, university-related sites should strive for a measure of consistency in their architecture, navigation, and design. This U of T Webspace Guide sets out the University's policies and recommendations on these and other areas related to its webspace.

Objectives

The Webspace Guide has two objectives:

1. To help increase the usability of the U of T webspace through improved navigation, information architecture and content.

2. To support the roll-out of the U of T visual identity.

Scope: who should use the Webspace Guide?

This Webspace Guide sets out requirements and recommendations for two groups of sites:

• The U of T Core (also referred to as the homepage collection): http://www.utoronto.ca and the presidential, provostial, and vice-presidential and vice-provostial pages that represent the University administration

• Faculties and Schools: Websites for academic divisions; i.e., faculties and schools (listed at http://www.utoronto.ca/programs-courses/faculties-and-schools.htm)

[A note on departmental sites and other U of T sites: Although the guidelines are not required for departmental and other sites, all site owners are encouraged to use the Webspace Guide as a reference and set of best practices to apply to their sites.]

a. U of T Core sites

[Note: Some of the sites listed below are undergoing renovation and may be relaunched under different names or URLs.]

This group includes (but is not limited to):

• U of T homepage (http://www.utoronto.ca) • Students (http://www.students.utoronto.ca) • Prospective Students (http://www.prospective.utoronto.ca) • Faculty (http://www.faculty.utoronto.ca) • Alumni & Friends (http://www.alumni.utoronto.ca) • Public Affairs & Media (http://www.media.utoronto.ca) • Graduate Programs (http://www.gradschool.utoronto.ca) • Libraries (http://www.library.utoronto.ca)

3/28

Page 4: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide - Introduction

• Athletics & Recreation (http://www.athletics.utoronto.ca) • Arts & Culture (http://www.arts.utoronto.ca) • Research (http://www.research.utoronto.ca) • President (http://www.president.utoronto.ca) • VP & Provost (http://www.provost.utoronto.ca) • University Relations (http://www.universityrelations.utoronto.ca) • Human Resources and Equity (http://www.hrandequity.utoronto.ca.) • Business Affairs (http://www.businessaffairs.utoronto.ca) • Financial Services (http://www.finance.utoronto.ca) • Advancement (http://www.advancement.utoronto.ca) • U of T News (http://www.news.utoronto.ca) • U of T Events (http://www.events.utoronto.ca) • U of T Mississauga (http://www.utm.utoronto.ca) • U of T Scarborough (http://www.utsc.utoronto.ca)

b. Faculty and School sites

This group includes (but is not limited to):

• Faculty of Applied Science and Engineering • John H. Daniels Faculty of Architecture, Landscape, and Design • Faculty of Arts and Science • Faculty of Dentistry • Ontario Institute for Studies in Education • Faculty of Forestry • Faculty of Information • Faculty of Law • Joseph L. Rotman School of Management • Faculty of Medicine • Faculty of Music • Lawrence Bloomberg Faculty of Nursing • Leslie Dan Faculty of Pharmacy • Faculty of Physical Education and Health • Factor-Inwentash Faculty of Social Work • School of Graduate Studies • School of Continuing Studies • Dalla Lana School of Public Health

4/28

Page 5: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – About the Guide

About the Guide

What the Guide covers:

The Guide covers seven elements of web composition:

1. Compliance with the university’s visual identity 2. Headers 3. Footers 4. U of T Web utilities 5. Site utilities 6. Web accessibility 7. Web standards

For each element, you will find:

• Whether it is a requirement or recommendation for your site. • Description • Content requirements and/or recommendations • Samples or illustrations (where appropriate)

U of T Core sites Faculty & School sites

1. Compliance with the university’s visual identity Requirement Requirement

2. Headers Requirement Requirement 3. Footers Requirement Requirement 4. U of T Web utilities Requirement Recommendation 5. Site utilities Recommendation Recommendation 6. Web accessibility Requirement Requirement 7. Web standards Recommendation Recommendation

An appendix provides sample designs and layouts, for reference.

Materials available to site owners and designers:

Site owners and designers can email [email protected] to obtain the following materials:

• HTML/CSS templates • Visual identity artwork in .gif format (university signature/wordmark; faculty signature)

5/28

Page 6: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – About the Guide

What the guide does not cover:

The guide does not include requirements for content or design. Every site has unique information to communicate to a range of audiences, and site owners are best suited to make decisions about information to include on their sites and how to structure it.

The figure below illustrates the limits of the webspace guidelines: areas in red are covered by requirements or recommendations in the Webspace Guide. All other areas are for site owners to organize and manage.

For examples of design concepts based on this framework, see Appendix A: Site and page layout concepts.

6/28

Page 7: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 1. Compliance with the U of T Visual Identity

1. Compliance with the U of T Visual Identity Requirement: U of T Core, Faculties & Schools

Description: A "visual identity" is the set of rules by which an organization identifies and expresses itself visually – in publications, advertisements, signage and online.

Content:

• Compliant signatures (crest and wordmark) • Compliant wordmarks • Colour palettes • Guidelines on fonts and typography

Visual identity artwork is available for U of T Core sites and Faculties & Schools. To obtain a .gif file for your site, please email [email protected] (In some cases, site owners or designers may already have Illustrator files of their visual identity artwork.)

Visual element Treatment within the U of T Visual Identity2

U of T signature (crest & wordmark):

For use by:

• U of T core sites (see page 2)

• For the web page header, the signature is 80 pixels high and appears in the official blue on white with 20 pixels of whitespace above and below and 32 pixels of whitespace on either side of the signature.

• The signature is composed of both the university crest and the wordmark (“University of Toronto”).

• The crest cannot be used independently.

• The signature must link to the U of T homepage (http://www.utoronto.ca) and cannot be linked to any other web page.

1 Some site owners or designers may already have Illustrator files for their visual identity artwork. Please feel free to use those files, but please be sure to follow the approved treatments, as described in this section. 2 Any inquiries pertaining to the University of Toronto’s Visual Identity should be directed to [email protected].

7/28

Page 8: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 1. Compliance with the U of T Visual Identity

2Visual element Treatment within the U of T Visual Identity

U of T wordmark:

For use by:

• U of T core sites (see page 2)

• For the web page header, the wordmark is 50 pixels high and appears in the official blue on white with 20 pixels of whitespace above and below and 32 pixels of white space on either side.

• The wordmark may be used independently (i.e., without the crest) for design space considerations.

• The wordmark must link to the U of T homepage (http://www.utoronto.ca) and cannot be linked to any other web page.

Campus signatures (crest & wordmark):

For use by:

• UTM and UTSC

• For the web page header, the signature is 80 pixels high and appears in the official blue on white with 20 pixels of whitespace above and below and 32 pixels of white space on either side.

• The signature is composed of the university crest, the wordmark (“University of Toronto”) and campus name (“Mississauga” or “Scarborough”).

• The crest cannot be used independently.

• The signature must link to the U of T campus homepage (http://www.utm.utoronto.ca or http://www.utsc.utoronto.ca) and cannot be linked to any other web page.

8/28

Page 9: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 1. Compliance with the U of T Visual Identity

2Visual element Treatment within the U of T Visual Identity

U of T faculty or school signature (crest & wordmark):

For use by:

• Faculty & School sites (see page 3)

• For the web page header, the signature is 80 pixels high and appears in the official blue on white with 20 pixels of whitespace above and below and 32 pixels of white space on either side.

• The signature is composed of both the university crest and the wordmark (“University of Toronto”, “Faculty of” or “School of”).

• The crest and wordmark cannot be used independently.

• The signature must link to the faculty or school homepage and cannot be linked to any other web page.

Font typeface: The U of T Visual Identity includes Trade Gothic (sans serif) and Bembo (serif) for its fonts. These fonts, along with Centaur (the font used in the U of T signature and wordmarks) are only recommended for print applications. For the web, the following substitutions are recommended:

• Sans serif fonts: Arial or Helvetica; • Serif fonts: Times New Roman or Times.

The font-face should be specified within the Cascading Style Sheets (CSS) such as { Arial, Helvetica, Sans-Serif } or { “Times New Roman”, Times, Serif }.

Font sizing: For web, font sizing should be specified within the Cascading Style Sheets (CSS) using percentage (%) or em sizing.

_______________________________ 2 Any inquiries pertaining to the University of Toronto’s Visual Identity should be directed to [email protected].

9/28

Page 10: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 1. Compliance with the U of T Visual Identity

2Visual element Treatment within the U of T Visual Identity

Font styling: Heading 1 Heading 2 Heading 3 Paragraph

• Headings and paragraphs should be styled with a logical visual order that conveys document content.

• Styling should be specified within Cascading Style Sheets (CSS).

• Headings should use a serif font and non-headings should use a sans serif font.

Colours: The U of T Visual Identity includes colours to be used for print materials. The colours noted here for use on the web are derived from the same palette used in print materials.

Sample Identifier information Usage Hex: #FFFFFF Page background Hex: #333333

RGB: 51, 51, 51 Hex: #000000

General text

Hex: #003366 RGB: 0, 51, 102

Heading text

Hex: #4D75A8 RGB: 77, 117, 168

Link text

Hex: #003366 RGB: 0, 51, 102

Visited link text

Hex: #7B786A RGB: 123, 120, 106

Footer text

Hex: #042E6A RGB: 4, 46, 106

The U of T blue appropriate for the web. Example usage: background for styled content blocks; borders; etc.

Hex: #FF9900 RGB: 255, 153, 0

Hex: #F5DEBA RGB: 245, 222, 186

The U of T secondary orange shades appropriate for the web. Example usage: styled content blocks; design elements, etc.

Hex: #D0D4BB RGB: 208, 212, 187

Hex: #7B786A RGB: 123, 120, 106

The U of T secondary beige shades appropriate for the web. Example usage: styled content blocks; design elements, etc.

10/28

Page 11: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 1. Compliance with the U of T Visual Identity

Visual identity artwork is available for U of T Core sites and Faculties & Schools. To obtain a .gif file for your site, please email [email protected].

______ 2 Any inquiries pertaining to the University of Toronto’s Visual Identity should be directed to [email protected].

11/28

Page 12: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 2. Headers

2. Headers Requirement for: U of T Core, Faculties & Schools

Description: The web header is the block or banner at the top of a web page. It can include text, graphics, or a combination of both. It is one of the first places a visitor looks on a page.

Content and placement:

a. U of T Core (e.g., presidential, provostial, vice-presidential and vice-provostial sites)

Content

• The University signature (crest and wordmark) or the University wordmark o this signature or wordmark links to the U of T homepage (www.utoronto.ca)

• Colour palette from the University visual identity (see section 1. Compliance with the U of T Visual Identity)

• The Web utilities (see section 4. U of T web utilities)

Figure 1. University of Toronto header, with signature, for central U of T pages

Figure 2a. University of Toronto, with signature, for Mississauga pages

Figure 2b. University of Toronto, with signature, for Scarborough pages

12/28

Page 13: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 2. Headers

Figure 3a. University of Toronto header, with signature, for central U of T named sites

Figure 3b. University of Toronto header, with signature, for central U of T named sites

Figure 4a. University of Toronto header, with wordmark, for central U of T named sites

Figure 4b. University of Toronto header, with wordmark, for central U of T named sites

Figure 5. University of Toronto header, with signature, for central U of T sites with stylized names

13/28

Page 14: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 2. Headers

Figure 6. University of Toronto header, with signature, for central U of T sites with stylized names

Placement

• Visual Identity artwork incorporates a specified amount of whitespace. Artwork must not be adjusted to reduce or interfere with the whitespace above and below the artwork.

• Site names, when used, should not interfere or overlap with the signature or wordmark. • Web utilities appear as a horizontal list within the top right of a webpage. The U of T

search box is a web utility and should be grouped together with this list (see section 4. U of T web utilities).

• The header content should be within a 980 pixel block, centered at the top of a page.

b. Faculties and Schools

Content

• the faculty or school signature (crest and wordmark) o the signature should be linked back to the homepage of the faculty or school

Optional content

• colour palette from the University visual identity (see section 1. Compliance with the U of T Visual Identity)

• Web utilities (see section 4. U of T web utilities) • Unique logo or other design requirement. For faculties and schools that have specific

marketing strategies, there may be individual design requirements that need to be incorporated into the site header.

Figure 7. Example University of Toronto header for Faculty or School, not using web utilities

14/28

Page 15: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 2. Headers

Figure 8. Compliant University of Toronto header for Faculty or School with naming or design requirements

Placement

• Visual Identity artwork incorporates a desired amount of whitespace. Artwork must not be adjusted to reduce or interfere with the whitespace above and below the artwork.

• Site names, when used, should not interfere or overlap with the signature or wordmark. • Web utilities should appear as a right-justified horizontal list on the right side of the

header, with the exception of the search box, which should appear just below the web utilities (see section 4. U of T web utilities).

• Site utilities, should be distinguished as context-specific links, which are distinctly relevant within a given site or domain. If web utilities aren’t used, faculty and school sites are asked to incorporate a “U of T Home” link (www.utoronto.ca) and a search utility within their group of site utilities.

• The header content should be within a 980 pixel block, centered at the top of a page.

3. Footers Requirement: U of T Core, Faculties & Schools

Description: The web footer comprises the text and graphics that appear at the bottom of a web page. It should include certain standard information to help users navigate the University's webspace and quickly find important information.

Content and Placement:

a. U of T Core (e.g., presidential, provostial, vice-presidential and vice-provostial sites) b. Faculties & Schools

Optional content (ordered)

All footer content is context-specific, so site owners should decide on the appropriate content for their footer. The list below includes suggested content for footers and an appropriate order of content.

1. The University of Toronto’s tagline: “CANADA’S ANSWERS TO THE WORLD’S QUESTIONS.”. Including this information within the footer will improve visibility in search results and lend consistency to our external marketing and communications materials.

a. For marketing or communications types of sites or pages, a stylized tagline can be incorporated into the footer, consistent with external marketing materials.

b. For informational or administrative types of sites or pages, the tagline can simply appear as text within the footer. (examples are included below)

15/28

Page 16: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 3. Footers

2. Site links (i.e. links to key areas within the given site or page). 3. Sentence or phrase that describes the site or the site’s key message. 4. Copyright and legal information. E.g., “Copyright University of Toronto, All Rights

Reserved.” 5. Contact information, which may include site URL, e-mail address, phone number or link

to contact page. 6. Mailing address information.

Footer content within 980 pixel width, centered within page

Footer divider: University of Toronto tagline, centered within blue content block

Copyright and contact info

Figure 9. University of Toronto footer, including stylized tagline

Figure 10. Compliant University of Toronto footer, including descriptor information

Figure 11. Compliant University of Toronto footer, including links

Placement:

• If the stylized tagline is being used, it should be centered on the page, within a blue content block (see figure 9). The tagline can be used to separate the footer from the page content above; where the tagline is not used, a thin horizontal line can be used instead.

• Site links should appear in the same style as web utilities, but left-justified. • Copyright, contact and address information should be left-justified and styled in the

U of T blue using a serif font (see section 1. Compliance with the U of T Visual Identity). • The footer content should be within a 980 pixel block, centered at the bottom of a page.

4. U of T web utilities Requirement for: U of T Core Recommended for: Faculties & Schools

Description: Web utilities are links and tools that help people use a site; for example, Search or A to Z. Web utilities, which appear on every institutional site, are relevant for all of U of T sites and can be useful in any area of the university webspace. Site utilities, by contrast, apply to a specific site or domain (see section 5. Site utilities for more information).

16/28

Page 17: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 4. U of T web utilities

Examples of web utilities:

• Retail sites: account information, shopping cart and login/logout (these appear no matter where you are on a site)

• University sites: campus maps, telephone and e-mail directories and search

Content and placement: The utilities listed below have been chosen based on usage statistics and usability tests with key user groups. The Web Working Group in consultation with senior administration will review this list regularly to ensure its continued relevance.

Content

• “U of T Home” (Except on the U of T homepage) linking to http://www.utoronto.ca • “Portal” linking to http://portal.utoronto.ca • “ROSI” linking to http://rosi.utoronto.ca • “Contacts” linking to http://www.utoronto.ca/contacts • “Maps” linking to http://www.utoronto.ca/campuses/maps.htm • “A-Z” linking to http://www.utoronto.ca/A-Z_Index • U of T search box (powered by U of T’s internal Google search)

o If there are technical reasons that restrict the inclusion of the search box, a “Search” linking to http://find.utoronto.ca can be employed instead

Figure 12a. University of Toronto web utility links

Figure 12b. University of Toronto web utility links

Figure 13. Compliant University of Toronto header with only selected web utility links in use

17/28

Page 18: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 4. U of T web utilities

Placement:

• Web utilities should appear on all U of T core sites. Campus-specific sites and Faculty & School sites may use their own site utility links if desired. See section 2. Headers for placement details.

18/28

Page 19: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 6. Web accessibility

5. Site utilities Recommended for: Campus sites, Faculties & Schools

Description: Site utilities are links and tools that help people use a site (e.g., a site map or an FAQ). They are constant elements that appear in a predictable/consistent location on all pages pertaining to a site. Site utilities differ from web utilities in that they are relevant for a select site or domain of U of T and are only useful within the context of that area and not in any other areas of the university webspace (see section 4 for more information about web utilities).

Site utilities are optional. Many sites already include site utilities and will continue to use them. Individual site owners will be responsible for providing and maintaining their site utilities.

Content and placement: Site utilities should go in one of three locations:

• integrated consistently at the bottom of each site page • within the site footer • absorbed into the site’s primary navigational structure.

It is recommended that these not be implemented within a site header.

6. Web accessibility Requirement for: U of T Core, Faculties & Schools

Description: Accessibility requirements refer to the navigation, design, and coding considerations that help visitors using different types of web-enabled devices and visitors with disabilities use the site. Disabilities may take the form of a physical disability, mental impairment, developmental disability, learning disability or mental disorder.

All U of T web sites should adhere to provisions set out by the University of Toronto's annual Ontarian's with Disabilities Act (ODA) plan (http://www.hrandequity.utoronto.ca/news/oda.htm).

Site owners must consider barriers of the online environment for all types of disabilities and ensure any vital content or online experience is accessible for all users.

Options for implementation:

Note: The Guide will be reviewed and updated to comply with any changes to the University of Toronto’s ODA plan.

• Provide aids to navigation for screen reader users such as: o an invisible link tag at the top of your code (beside the <body> tag) allows the

users to skip navigation links in order to get to the main content of the page o proper markup for identifying the page title (i.e. an <h1> element)

19/28

Page 20: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 6. Web accessibility

• Provide text equivalents for images and image map hot spots within the HTML code. • Provide null text equivalents on decorative images (using alt=“” tags) within the code. • Identify row and column headers for data tables • Program online forms to associate labels with form fields • Support browser settings for enlarging text and user style sheets (i.e., using percentage

widths and percentage/em sizing for fonts. • Use consistent navigation mechanisms and style of presentation throughout the site.

o E.g., do not alter the menu location within different pages of a site. This will make it increasingly difficult for a visually or audibly impaired person to follow the site navigation.

• Provide the ability to navigate your website using the keyboard. • Identify the primary natural language of each page with meta tags. • Do not provide essential page functions that require JavaScript. If using JavaScript for

essential functions, these MUST be tested for compatibility with assistive technologies. E.g., Jaws Screen Reader http://www.freedomscientific.com/fs_products/software_jaws.asp

• Provide accessible HTML alternative versions of Flash content or if you are using Flash 8, use the accessibility features built into the application.

20/28

Page 21: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – 7. Web standards

7. Web standards Recommended practice for: U of T Core, Faculties & Departments

Description: Web standards design and development is the practice of implementing a site in a way that adheres to regulations outlined by the World Wide Web Consortium (W3C), which consider the wide range of web browsers and web-enabled devices available to site visitors. Essential pieces of information on a site should be implemented in a way that enables all user groups to access content, regardless of the browser or device they are using. University sites cannot be designed for specific browser and device combinations. In many ways, designing with standards and for accessibility are complementary goals (see section

6. Web accessibility). Web standards can include issues like browser compatibility, platform independence and file formats. Many web design and development experts support web standards as a way of improving the overall quality of a site.

Options for implementation: Recommendations for implementing web standards are directed by current World Wide Web Consortium (W3C) standards as well as browser and device standards.

• Separate your content from style and presentation through the use of style sheets (i.e., Cascading Style Sheets [CSS]).

• Validate your site code. Using the most widely supported industry standards is a method of safeguarding your designs for future technologies.

o Validation helps resolve cross-browser, cross-platform and future compatibility issues. Files that are syntactically correct have the best chance of working properly in the greatest number of available and emerging devices, software and operating systems.

o Creating well-formed documents means that search engines, like Google, will be better able to understand and index them for search results.

o Validation will help teach you standards-based methods for coding XHTML/HTML and CSS files. Validation results will outline incorrect syntax that should be avoided in site implementation.

o If validation is not built into your code editor, online tools are available for use. W3C Markup Validation Service (for XHTML or HTML):

http://validator.w3.org W3C CSS Validation Service (for Cascading Style Sheets):

http://jigsaw.w3.org/css-validator/ W3C Feed Validation Service (for RSS or Atom):

http://validator.w3.org/feed/ • There are many methods for implementing a visual design into a standards-based site,

and different expert resources available to help you learn about them. o Jeffrey Zeldman’s “Designing with Web Standards”:

http://www.zeldman.com/dwws/ o A List Apart: http://www.alistapart.com o CSS Resources from Eric Meyer, CSS Expert: http://meyerweb.com/eric/css/ o CSS Zen Garden: The Beauty in CSS Design: http://csszengarden.com o Peachpit: Web Design Reference Guide:

http://www.peachpit.com/guides/guide.aspx?g=webdesign o SitePoint: New Articles, Fresh Thinking for Web Developers and Designers:

http://www.sitepoint.com

21/28

Page 22: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – Appendix B. Site and page layout concepts

Appendix A. Site and page layout concepts

Achieving consistency with the U of T homepage

There are many cases where the U of T homepage design has been used by various sites as a point of reference for a design template. Because the U of T homepage is the institutional page and serves many different functions and audiences, sites should avoid using the homepage for their template. Sites are instead invited to reference the site designs in the Webspace Guide to help them devise their own design within the framework outlined by university guidelines.

The U of T homepage design, while distinct from other university pages, will itself adhere to the guidelines set out within the Visual Identity and the Webspace Guide. By following the same guidelines, other university sites will achieve coherency not only with the U of T homepage, but also with each other.

About site design

The sample concepts provided in this document are intended to illustrate that site owners can comply with the Webspace Guide and Visual Identity while maintaining their current content and structure, as initial steps towards a more unified institutional webspace.

A site design refers to the collection of both functional and visual parameters outlined for a site and employed consistently throughout. The Webspace Guide and Visual Identity provide some of these parameters, but each site may devise its own unique set of additional rules in order to produce a high-quality site, keeping in mind the university web infrastructure in terms of how well it may or may not be able to support certain features.

Implementing a layout design within a website is the responsibility of a site owner. Any image files that are required for compliance with the Visual Identity will be provided (please email [email protected]) and design will be informed by the Webspace Guide.

Site and layout concepts

The site and layout examples illustrated here are for demonstration purposes only, and intended to help site owners see how the guidelines can translate into practice. As University sites adopt the web guidelines, this section will be updated to use compliant sites as examples in this section.

22/28

Page 23: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – Appendix B. Site and page layout concepts

Example layout 1. Institutional

Example layout 2. Campus domain

23/28

Page 24: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – Appendix B. Site and page layout concepts

Example layout 3. Campus domain

Example layout 4. Central administrative division

24/28

Page 25: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – Appendix B. Site and page layout concepts

Example layout 5. Central administrative division

Example layout 6. Central topic-based site

25/28

Page 26: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – Appendix B. Site and page layout concepts

Example layout 7. Central audience-based site

Example layout 8. Central audience-based site

26/28

Page 27: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – Appendix B. Site and page layout concepts

Example layout 9. Faculty site

Example layout 10. Named faculty site

27/28

Page 28: University of Toronto Webspace GuideThe Webspace Guide has two objectives: 1. To help increase the usability of the U of T webspace through improved navigation, information architecture

U of T Webspace Guide – Appendix B. Site and page layout concepts

Appendix B. Background to the Webspace Guide

This document is a collaborative effort of the Webspace Working Group, a committee convened in 2007 at the request of the Provost to make recommendations on priority projects related to the University's webspace and to marshal the resources needed to implement the projects approved by the University's senior administration. The Web Working Group comprises representatives nominated by the members of the Principals & Deans group and by the Provost's Office. Members have a mix of communications and technical expertise.

The group used a wiki – a web-based collaborative tool – to input content, introduce questions and discuss relevant issues related to the document. The tool creates a virtual collaboration space that enables members from different areas of the university to participate in a continual dialogue centered on the university’s webspace. The result is a Webspace Guide for the university that addresses some of the real concerns and needs of the community.

This document builds on the work of the Committee to Review the University's Web Space3. It also coincides with the roll-out of the University's new visual identity, which affects the design and layout of the University's webspace.

3 The final report of the committee is available at http://www.provost.utoronto.ca/Assets/publication/Reports/web.pdf.

28/28