SPECIAL REPORT : Colophon

Introduction

This site began as a simple team site in 2000, but has grown over the years, expanding and evolving into its present form. The site now comprises a large collection of team sites, is expected to continue to grow year by year with the addition of more team sites, and will no doubt undergo further changes in order to meet the evolving needs of the teams.

This page presents information about the design of the site:

Software documentation for one team site is also available.

About the Team Sites 

This discusses the team site contents and design styles.

Team Site Contents 

The contents of the team sites have varied over the years, with newer sites containing more information, and with some teams wanting somewhat different information than others. The basic team sites in 2009 typically offer the following pages for each team:

  • Information About the Team:
    • News : briefly lists recent news items and upcoming events; when the season is over, instead offers a team photo and/or a summary of the season; for some team sites this page also has an overview of the team and the season; for other team sites the overview of the team appears instead on the Team page, and the overview of the season appears instead on the Games page.

    • Team : gives an overview of the team, if this isn’t already on the News page; lists the coaches and players; offers a team photo (if one is available and it isn’t already on the News page) and the head coach’s welcoming letter, if there is one.

    • Sponsors : lists the team’s sponsors, including logos (when provided) and links to their websites (when they exist); during the season also has information for sponsors, including a letter from the coach and links to sponsorship forms.

    • Photos : a photo album containing a small number of selected photos taken during the year, edited for optimal viewing, plus links to many unedited photos taken at tournaments; the unedited photos are deleted at the end of the year.

    • Contacts : basic contact information for the Mississauga Majors, the team’s coaches, and the webmaster.

    • Help : information about using the site, including a team site map; for some older team sites, such information appears instead at the end of the News page.

    • Confidential : detailed contact information for the coaches and players, small photos of coaches and players, plus additional information of a confidential nature, password protected so that only the coaches, parents, and players can view the information; may also have links to a few other pages, also password protected.

  • Information About the Team’s Schedule:
    • Calendar : a calendar of events affecting the team, which can be viewed or printed either in the traditional calendar format, or in the form of a list.

    • Games : lists all the team’s games, including regular, exhibition, and tournament games, with their schedules, locations, and results; gives an overview of the season; lists the team’s opponents and home diamonds for regular season games;.

    • Tournaments : lists the tournaments and championships, with links to additional pages, one page for each tournament or championship, with details about each.

Note that locations of games and other events typically link to maps showing where they take place, most with satellite photos; you can view many of these maps here.

Team Site Design Styles 

There are now three Majors team site designs, Style 2004, Style 2007, and Style 2008, exemplified by these team sites:

  • Style 2004 (example, Major Peewee AAA 2008 Team Site) : This is a design created in 2004, slightly modified in later years. Its primary colours are ruby, sapphire, and silver. Its masthead traditionally looks like this:

    Major Peewee AAA 2008 Team Site Masthead

    In 2009 it was changed to look like this:

    Major Bantam AAA 2009 Team Site Masthead

  • Style 2007 (example, Major Midget AAA 2007 Team Site) : This is a design created for 2007 by heavily modifying the original 2004 style. Its primary colours are ruby and silver. Its masthead traditionally looks like this:

    Major Midget AAA 2007 Team Site Masthead

    In 2009 it was changed to look like this:

    Major Bantam AAA 2009 Team Site Masthead

  • Style 2008 (example, Major Midget AAA 2008 Team Site) : This is a design created for 2008 by modifying the 2007 style. Its primary colours are ruby and sapphire. Its masthead traditionally looks like this:

    Major Midget AAA 2008 Team Site Masthead

    In 2009 it was changed to look like this:

    Major Bantam AAA 2009 Team Site Masthead

    Note that the Style 2007 and 2008 mastheads are the same in 2009: the differences between the two styles appears below the masthead; for example, the vertical menu bar for Style 2007 is silver, whereas for Style 2008 the vertical menu bar is sapphire.

Beginning in 2009, users may select the style they prefer, overriding what the team’s coach selected as the default. For more about this, see the FAQ.

Note that the older styles, especially Style 2004, have evolved somewhat over the years. Newer sites will therefore look a little different than older sites of the same style.

Design Criteria 

Notable design criteria include:

  • Each team 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.

    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 a site cannot be as visually impressive as it could be if load times weren’t important. Newer team sites, however, can be somewhat more impressive than older sites, because improving technology and growing broadbands enable sites to be more complex without sacrificing good load times.

  • The site’s design must make it easy to add team sites and to integrate with other sites related to the Mississauga Majors, e.g. the official Mississauga Majors Baseball Association 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.1 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 red (or ruby), white, blue (or sapphire), and grey (or silver) as its predominant colours.

  • Major entry pages such as the site’s home page and the team sites’ home pages must warn people who have browsers with critical security problems, and help these people to update their browsers.

The site must also enable the designer to explore new design concepts and techniques to better meet the above design criteria. To ensure the stability of the site, new techniques are first tried out on any pro bono team site: proven techniques may then be applied elsewhere.

Browser Issues 

Different browsers will inevitably display pages somewhat differently, with newer browsers displaying pages better than older, more primitive browsers will.

JavaScript Issues

Some things require that the browser’s JavaScript programming language be enabled. If JavaScript isn’t enabled, messages will appear advising the user to enable it.

Internet Explorer 5 and 6 must have JavaScript enabled so that the horizontal menus at the top of each page will work: this is necessary because these browsers lack a critical feature they are supposed to support, and a bit of JavaScript is needed to get around this.

Beginning in 2007, all browsers must have JavaScript enabled for pages which have information extracted from schedules, which includes such pages as the home, games, calendar, and tournament pages. All browsers must likewise have JavaScript enabled for pages with interactive photo galleries like the one in the 2007 Major Peewee AAA website.

Beginning in 2009, all browsers must have JavaScript enabled so that page styles set by users will be honoured when users change pages.

JavaScript may also enhance some pages: for example, the home page will display a randomly selected image from a photo gallery if JavaScript is enabled.

Cookie Issues

Beginning in 2009, browsers must have cookies enabled so that page styles set by users will be honoured when users change pages. For more about this, see the FAQ Why does this site use “cookies”?.

Browser Compatibility

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

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.

Old team sites which are no longer active aren’t usually tested with new browsers, so anomalies may appear in inactive sites when new browsers appear.

Following is an overview of known browser compatibility issues:

Chrome

1-12 Tested with Chrome 1-12: the site works very well with Chrome.

Firefox, Camino, Seamonkey, Etc.

1-5 Tested with Firefox 1-5. The site works well with these browsers.
  Note: the site also works very well with up-to-date browsers using Mozilla’s browser engine, such as Camino, Galeon, and SeaMonkey.

Internet Explorer

4 Not tested: this ancient browser has many problems, including serious security defects: people should upgrade immediately.
5 Tested with Internet Explorer 5.01 and 5.5, prior to 2010: testing and support ends at the end of the 2009 season. There are various oddities in how certain elements of pages appear, especially with IE 5.01. Caution: Microsoft doesn’t support IE 5, so it has unfixed security defects, and people should upgrade.
6 Tested with Internet Explorer 6.0. This site works well with this browser. There are some oddities: e.g. the body of each page occupies the full width of the browser rather than the designed maximum of 55 ems. People are encouraged to upgrade to a more modern browser.
7 Tested with Internet Explorer 7.0. This site works well with this browser, except for one oddity: due to a bug in IE7, menus may be displaced horizontally when resizing the browser window; the menus snap to their proper position when the page is refreshed.
8-9 Tested with Internet Explorer 8-9. This site works well with these browsers.
  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

4 Tested with KDE Konqueror 4.1: older versions have problems, including security defects, so people should upgrade. The site works well with up-to-date versions of Konqueror, with only a few anomalies. Team sites made before 2009 have more serious anomalies.

Netscape

   Support of this browser ended on Mar 1, 2008. All versions have unfixed security defects, and people should switch to other browsers. Because recent versions of Netscape use the same browser engine as Internet Explorer (Netscape 8) or Firefox (Netscape 6-9), Netscape should display pages the same as Internet Explorer or Firefox.

Opera

7 Tested with Opera 7: this version has security defects, so people should upgrade. The site has some problems with this browser.
8-11 Tested with Opera 8-11: the site works very well with these browsers.

Safari

2 Not tested with Safari 2 or older versions.
3-5 Tested with Safari 3-5. The site worked well with these browsers.

Page Layout 

Following is information about the appearance of web pages. Note that, strictly speaking, this information applies to these pages and to pages in team sites created later than 2008 which use the Style 2007 design. Details about other pages will vary.

Displayed Pages

Each page is as wide as the browser window, but won’t exceed 55 ems: this limit, which mainly affects those with high resolution monitors, makes pages easier to read. Exception: Internet Explorer 6 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 normally used is the first available font from this list:

  • Arial
  • Helvetica
  • Univers
  • Nimbus Sans L
  • Tahoma

In some quotes the preferred fonts are Trebuchet MS and Comic Sans MS.

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 the user’s default; the size for small text (such as is found in sidebars) is one size smaller. Some users will find the fonts a bit too large: this can happen for users who have set larger default font sizes to enlarge tiny fonts set by many websites.

Printed Pages

Each page is fitted to the paper size.

Only the content of a page is printed: the masthead and menus aren’t. To minimize printing costs, text is printed in black and white wherever possible. For more about this, see “Why don’t printed pages look like displayed pages?

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

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

  • Times New Roman
  • Times
  • Nimbus Roman No9 L

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.
  • Apple Safari Browser: for testing pages.
  • Chris Pederick’s Web Developer Firefox Add-On: for troubleshooting pages.
  • Corel Gallery 1,000,000: for stock photos.
  • FileZilla: to upload files.
  • Fookes’ NoteTab Pro: to edit text.
  • Google Chrome: for testing pages.
  • Google Earth: for getting satellite photos of game locations.
  • JASC Paint Shop Pro: to create graphics.
  • JPEGclub’s JPEGcrop: to edit JPEG graphics.
  • KDE Konqueror: for testing pages.
  • HP PrecisionScan: to scan pictures.
  • IcoFX: to create icon 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.
  • OpenOffice: for creating OpenDocument and PDF files.
  • PrimoPDF: for creating PDF files.
  • Quinn’s aRealValidator: for quality control.
  • SitePoint’s Dust-Me Selectors Firefox Add-On: for identifying unused CSS.
  • Sonic’s RecordNow: for saving backups on CDs.
  • SpiralGraphic’s Wood Workshop: for making wood-like graphics.
  • SourceForge’s Audacity: for editing audio files.
  • Talicom HTML Power Tools: for quality control.
  • VMware’s VMware Player: for testing Linux browsers.
  • W3C CSS Validator: for quality control.
  • Xenu: to check for broken links.