In the summer of 2003, I decided, inspired by the CSS Zen Garden, that TSN.ca needed to come into the 20th century, and really take advantage of XHTML 1.0, and CSS. To do so would require an entire re-build of the site, just more than a year after our last re-build.The site was getting cobwebs anyway, and the sales team was starting to complain that they didn’t have certain ad units available. Maybe the re-design would be a way to incorporate some new sales units, and at the same time achieve my goals of bringing the code up to snuff, eliminating 90% of our hacks, and slimming down our pages (which would translate into an immediate cost savings).
I took our site, and really parsed it down to the basics.
Digi-Bar: The topmost bar on the website which contains links to the other digital sports sites in the CTV family, as well as TV Schedules.
Banner: The branding area on the TSN.ca front page
Money Bar: The grey bar under the banner which houses things such as A/V, Photos, Fantasy Sports, and Contests
Navigation: Left side navigation, formerly based on dropdowns, in this brave new world I would re-design it in CSS using an unordered list and some fancy Suckerfish like flyouts.
Content: Anything inside of the “chewy middle” is deemed content. This includes stories, front pages of “hubs” which have two columns, a main and right column.
Footer: A series of links at the bottom of every page. Includes text links to all of the help pages you need in a corporate website, and of course the copyright material.
Here’s a look at the base basics:
Tomorrow: first steps, digibar, banner, moneybar, footer.