UNCOVERING THE WARD: A BEHIND THE SCENES LOOK AT MAKING A HISTORICAL WEBSITE

TECHNOLOGY TUESDAYS

BY: ORVIS STARKWEATHER

The Virtual Exhibition on the Ward we developed. Source.

Last semester, four of my classmates and I were tasked with envisioning a digital media initiative that could work well in a museum context. When we started to plan this project, it became clear that we wanted to build a virtual exhibit ourselves, which would allow us to learn about the process and resources needed to execute similar projects in our professional lives after school. We decided to create an exhibition on the history of the St. John’s Ward neighbourhood, commonly referred to as “The Ward”. This offered the fortuitous combination of large public interest in the subject matter with images that the City of Toronto had released into the public domain.

After Daniel Panneton developed the stellar website content and our team decided on the functionalities we wanted, I set to work coding the website. The website is primarily written in HTML and CSS with two javascript animations: a smooth scroll feature that I picked up at a Ladies Learning Code Course and a Before and After Image Slider developed by @ace. After roughly 45 hours of work, the website was ready to turn over to the rest of the team to do the heavy lifting writing our report: Sarah Anderson, Jasmine Fisher, and Taylor Noble.

We were successfully able to implement most of the desired functionalities, with my one major regret being the lack of arrows on the before and after images sliders. Most of the Before and After Images Sliders I’ve seen use these arrows as a visual clue to their function, but try as I might I could not figure out how to add the feature to our website. On the other hand, we were all quite excited that the website met accessibility standards. We specifically selected a legible body font with a high-contrast colour scheme and included alternative text for the images in case website visitors were using screen readers. Another great success is that the website is responsive, allowing it to be easily used on a variety of devices from mobile phones to desktop computers.

An example of a Before and After Image Slider with arrows to indicate function. Source.

Time constraints meant we had to select only 10 images to feature on the website. With this in mind, we built a website that could be easily expanded. It is my goal to add more content as soon as I get some leisure time. While there is plenty of room for expansion, the website is a testament to what can be accomplished in a short amount of time and limited resources. If you have not done so yet, I suggest perusing the website for yourself at www.wardhistory.ca.