Colophon
Introduction
This site is made by Charles A Upsdell, a website designer. It 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 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.
Note: some newer portions of this site have been made friendlier to handheld devices; one aspect of this is that certain information which is of lesser importance does not appear on handheld devices, especially if it would be hard to present on a small screen.
Note: this designer of this site also makes other youth sports sites, e.g. for the Georgetown Eagles 2008 Major Peewee AAA Baseball Team, the Toronto Titans 2007/2008 AAA Minor Bantam Hockey Team, the Ontario Lightning Hockey Clubs, and the “AAA” Predators of the North Central Ontario Hockey Association.
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 design styles and contents.
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 2007 Team Site. This is a design created in 2004, slightly modified in 2007. Its primary colours are ruby, deep blue, and silver. Its masthead looks like this:
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 looks like this:
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 is nearly the same as the 2007 masthead: the most striking difference is that the 2007 style has a silver vertical menu bar, whereas the 2008 style has a sapphire menu bar.
An earlier, primitive design was used for a 2000 team, but when the better 2004 style was created, the 2000 site was re-done in the 2004 style, so the earlier design is no longer available. The masthead of the original 2000 style was:
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 sites than others. The basic team sites in 2008 typically offer the following pages for each 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, but 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 is not already on the News page; lists the coaches and players; offers a team photo (if one is available and it is not 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.
Games : gives an overview of the season, if this is not already on the News page; lists the team’s opponents and home diamonds for regular season games; lists all the team’s games, including regular, exhibition, and tournament games, with their schedules, locations, and results; lists the tournaments and championships, with links to additional pages, one page for each tournament or championship, with details about each.
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.
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; for some team sites, such information appears instead at the end of the News page.
Confidential Information : 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.
Note that locations of games and other events typically link to maps showing where they take place, some of which include satellite photos; you can view many of these maps here.
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 were not important. Newer team sites, however, can be somewhat more impressive than older sites, because improving technology and growing broadband usage 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 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, white, blue, and 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 a 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.
Internet Explorer 5 and 6 must have the JavaScript programming language enabled so that the burgundy-coloured drop-down menus at the top of each page will work: this is necessary because these browsers lack a critical feature which they are supposed to support.
Beginning in 2007, all browsers must also have JavaScript enabled for pages which have information from schedules, which for team sites 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. If JavaScript is not enabled, messages will appear advising the user to enable it.
Browsers with JavaScript enabled may also enhance some pages: for example, the home page will display a randomly selected image from a photo gallery if JavaScript is enabled; but these pages will work fine, without the enhancements, if JavaScript is not enabled.
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?
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.
Following is an overview of known issues:
Internet Explorer
| v4 | Not tested: this ancient browser has many problems, including serious security defects: people should upgrade immediately. |
| v5 | Tested with Internet Explorer 5.01 and 5.5. There are various oddities in how certain elements of pages appear. Caution: Microsoft does not support IE 5 for the Mac, IE 5.0 for Windows, or IE 5.5 for Windows, so they have unfixed security defects, and people should upgrade. |
| v6 | 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 60 ems. |
| v7 | 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. |
| 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, Etc.
| 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
| Support of this browser ends on Mar 1, 2008. Those using Netscape should switch to another browser. 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
| v7 | Tested with Opera 7.54: older 7.xx versions have problems, including security defects, so people should upgrade immediately. The site has some problems with this browser. |
| v8 | Tested with Opera 8.54: older 8.xx versions have problems, including security defects, so people should upgrade. The site works very well with this browser. |
| v9 | Tested with Opera 9.23: older 9.xx versions have problems, including security defects, so people should upgrade. This site works well with this browser. |
Safari
| v2 | Not tested with Safari 2 or older versions. |
| v3 | Tested with Safari 3. The site works well with this browser. |
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 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 used is the first available font from this list:
- Tahoma
- Arial
- Helvetica
In some sidebars the preferred font is Tahoma, and 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 one size smaller that the default; the size for small text (such as is found in sidebars) is two sizes smaller.
Handheld Devices
Some newer portions of this site have been made friendlier to handheld devices. This happens only for handheld browsers which recognize the
CSS @media handheld rules: this should be true of all handheld browsers, but this cannot be guaranteed.
One aspect of this is that certain information which is of lesser importance does not appear on handheld devices, especially if it would be hard to present on a small screen.
Another aspect of this is that the layout of some information is different for handheld devices.
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 will 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.
- 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.
- 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.
- OpenOffice: for creating OpenDocument and PDF files.
- PrimoPDF: for creating PDF files.
- Quinn’s aRealValidator: for quality control.
- Safari Browser: for testing pages.
- Sonic’s RecordNow: for saving backups on CDs.
- 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.
