Toronto Titans Hockey

This page presents information about the design of the site:

• Design Criteria
• Browser Issues
• Page Layout
• Software Tools

Design Criteria

Notable design criteria include:

• The site must satisfy the five primary user needs: it must (1) offer what the target audience wants, (2) be kept up-to-date, (3) load quickly, even for those with low-speed connections, (4) be easy to use, and (5) be accessible. Note that the need to load pages quickly puts serious constraints on the design: graphics must be kept to a minimum, and graphic files must be kept small, so the site is not as visually impressive as it could be if page load times were not important. Note also that the need to load pages quickly may conflict with what the target audience wants: some pages load slowly because the team demanded that the page contain slow loading materials, e.g. large photos.
• The site’s design must make it easy to add team sites and to integrate with other sites related to the Toronto Titans, e.g. the official Toronto Titans Hockey Club website, and team sites made by others.
• The site must be coded in strict compliance with modern coding standards. The code has been validated to both the xHTML 1.0 Strict Recommendation and the CSS 2 Specification.
• The site must use as many standard components as possible, to reduce costs: e.g. key components for managing a team’s calendar are the same as are used to manage other team calendars.
• The site must work with all common browsers, but not with ancient browsers no longer supported by their makers, and need not look as good either for older browsers that support coding standards poorly, or for any browsers with JavaScript disabled.
• The site must use the Titans’s colours — blue, gold, and grey — as its predominant colours.

The site must also enable the designer to explore new design concepts and techniques to better meet the above design criteria, and to develop new features that may be used in future sites.

Browser Issues

Different browsers will inevitably display pages somewhat differently, with newer browsers displaying pages better than older, more primitive browsers will. The most capable browsers, such as the latest versions of Firefox and Opera, will produce the best results.

Browsers must have JavaScript enabled for pages containing information from schedules, which for team sites includes such pages as the calendar and tournament pages. Browsers must likewise have JavaScript enabled for pages with interactive photo galleries. If JavaScript is not enabled, messages will appear advising the user how to enable JavaScript.

This site does not support extinct browsers: they lack critical features and have such serious security defects that people should not be using them. For more about this, read Why Update?

Following is an overview of known issues:

Internet Explorer	v5	Tested with Internet Explorer 5.01 and 5.5. There are various oddities, e.g. with IE 5.01 bar graphs of season records are absent because this browser lacks a critical feature. All older versions have problems, including security defects, so people should upgrade. Caution: Microsoft does not support IE 5 for the Mac, IE 5.0 for Windows, or IE 5.5 for Windows, so these browsers have unfixed security defects, and people should upgrade to a newer browser.
	v6	Tested with Internet Explorer 6.0. This site works well with this browser, with a few oddities.
	v7	Tested with Internet Explorer 7.0. This site works well with this browser, with minor oddities.
		Note: many browsers use the Internet Explorer browser engine, e.g. most AOL browsers, Netscape 8 in IE mode, Avant, and Maxthon. This site works the same with these browsers as with the version of the IE browser engine they use.
Konqueror	v3	Tested with KDE Konqueror 3.5.4: older versions have problems, including security defects, so people should upgrade. The site works very well with up-to-date versions of Konqueror, with only a few minor anomalies.
Mozilla, Firefox	v1	Tested with Mozilla 1.7.13 and Firefox 1.5: older versions have problems, including security defects, so people should upgrade. The site works very well with up-to-date browsers using Mozilla’s browser engine, such as Camino, Firefox, Galeon, Multizilla, and SeaMonkey.
	v2	Tested with Firefox 2. The site works well with this browser.
Netscape	v7	Not tested: this version and all older versions have many problems, including serious security defects, so people should upgrade immediately.
	v8	Tested with Netscape 8.2: all 8.xx versions have security defects which Netscape has not yet fixed — Netscape typically takes a long time to fix security defects — so you should use another browser. The site works with Netscape 8.2.
	v9	Not tested: this browser has not yet been released, though betas are available. It uses the same browser engine as Firefox 2, so no problems are anticipated.
Opera	v8	Tested with Opera 8.54: older 8.xx versions have problems, including security defects, so people should upgrade. The site works well with this browser.
	v9	Tested with Opera 9.10: older 9.xx versions have problems, including security defects, so people should upgrade. This site works well with this browser.

You can find up-to-date versions of browsers in the Browser News.

Since this site is designed strictly in compliance with website coding standards, future browsers that support these standards more completely will work even better with this site.

Page Layout

Displayed Pages

Each page is as wide as the browser window, but won’t exceed 60 ems: this limit, which mainly affects those with high resolution monitors, makes pages easier to read. Exception: Internet Explorer 7 and old browsers don’t support the coding standard which permits a limit to be set, so won’t honour the limit.

The font normally used for header text is the first available font from this list:

• Rockwell
• Georgia
• Times New Roman
• Times

The font normally used for body text is the first available font from this list:

• Tahoma
• Arial
• Helvetica

If you lack a font that a web page wants, your browser picks another font.

The font size is based on the user’s default setting, and therefore is larger for those who prefer larger text, and smaller for those who prefer smaller text. The font size for body text is one size smaller that the default; the size for small text (such as is found in sidebars) is two sizes smaller.

Printed Pages

Each page is fitted to the paper size.

Only the content of a page is printed: the masthead and menus are not.

To minimize printing costs, text is printed in black and white wherever possible.

Parts of pages may be blank unless your browser is set up to print backgrounds; see the FAQ to learn how to do this.

Calendars should be printed in landscape mode. Note: the calendar for each month should appear on a separate page, but browsers vary in their ability to ensure this.

The font used is the first available font from this list:

• Times New Roman
• Times

If none of these fonts is available, the browser’s default serif font is used.

The font size for body text is 11pt; the size for small text (such as is found in sidebars) is 9pt.

Software Tools

I use these software tools to create and maintain the site:

• Adobe (Acrobat) Reader: to process PDF files.
• Adobe ImageStyler: to create graphics.
• Chris Pederick’s Web Developer Firefox Add-On: for troubleshooting pages.
• Corel Gallery 1,000,000: for stock photos.
• Fookes’ NoteTab Pro: to edit text.
• JASC Paint Shop Pro: to create graphics.
• JPEGclub’s JPEGcrop: to edit JPEG graphics.
• HP PrecisionScan: to scan pictures.
• KDE Konqueror: for testing pages.
• Ipswitch WS-FTP Pro: to upload files.
• Microsoft Excel: to process Excel files.
• Microsoft Internet Explorer: for testing pages.
• Microsoft Virtual PC: for testing old IE browsers.
• Microsoft Word: to process Word files.
• Microsoft Windows XP: for more than you can imagine!
• Mozilla Suite: for testing pages.
• Mozilla Firefox: for testing pages and to surf the Internet.
• Netscape Browser: for testing pages.
• OpenOffice: for creating OpenDocument and PDF files.
• Opera Browser: for testing pages.
• PrimoPDF: for creating PDF files.
• Quinn’s aRealValidator: for quality control.
• Sonic’s RecordNow: for saving backups on CDs.
• SUSE Linux with KDE’s Konqueror: for testing pages.
• Talicom HTML Power Tools: for quality control.
• W3C CSS Validator: for quality control.
• Xenu: to check for broken links.