Broadbent Institute

The Broadbent Institute is a non-partisan organization created to promote Canadian democracy and progressive politics. In its relatively short 5 year history, it has grown and successfully undertaken a number of initiatives, including advocating for the equality for all Canadians, as well as training the next generation of this country's leaders. Rightfully so, it wanted to show off those accomplishments.

The development of a digital anniversary report consisted of an interactive scroll feature that highlights both the organization's treasure trove of photography, as well as a celebration of its quantitative achievements. SCSS & JavaScript are used to create the pseudo-parallax scroll effects, while the WayPoint.js library creates the "ticker" functionality in the background.

One of the challenges to this project was ensuring that the site is mobile-friendly. Naturally, with so many images and interactive elements, site speed and load times can be dramatically affected on smaller devices. As a result, I optimized the site by switching out mobile- and desktop-friendly images, lazy-loading images when they come "near into" view, as well as ensuring that the script was consistent to the rendering capabilities of the device the website was being viewed on.