Php Java Javascript

W&M: Tag Day

A front-end web development project for a charitable giving initiative for William & Mary.


Home Projects

Requirements & Planning🔗

The Tag Day website had 2 overarching requirements

  • The project needed to be hosted on the new web platform at the time: Adobe Experience Manager (AEM) 6.1
  • The project needed to be appealing to the current students and alumni alike
  • The project needed to be interesting for visitors and on and off campus.
  • We had no budget

Collaborating with the design team, a flat design was chosen for the website to be more appealing to current students. This also allowed the website to translate easily into a mobile-friendly site.

The biggest challenge we faced was that we had no budget, we had trouble finding free, interesting APIs for us to use. While there were many interesting APIs, their threshold for paid plans was too low for us to use the service.

Features🔗

Prior to 2015, the initiative had not had a strong branding symbol for the website. We decided to take the “TAG day” (emphasis mine) literally. We decide to use tags as a recurring digital asset on the website, to turn the tag day from a physical concept to a memorable digital brand. We eventually decided on a simple animation to make the tag the centerpiece of the website.

See the Pen Swinging Tag by Douglas Fenstermacher (@dfens) on CodePen. We eventually settled on the OpenStreetMap API to provide the foundation of an interactive campus map using Leaflet. This interactive map allows visitors from off-campus to learn about the buildings that exist due to the charitable giving of William & Mary donors. We were able to apply the tag branding to the map to keep consistent color schemes and branding

Performance Optimization🔗

In combination with lazy-loading images, the website was built to load in less than 3 second on a 3G mobile connection. WebP images could not be used on the website as Internet Explorer 9 and 10 were commonly used at the time at William & Mary. To reduce image loading time we converted as many images as possible to PNG, using PNGQuant to reduce the file size of our PNGs. This brought our average file size down to 10KB. After having optimized the image, the file loaded in less than a second on 3G. While the implementation of Adobe Experience Manager platform had not reached maturity, we were able to take advantage of the architecture of the platform. The load-balanced caching layer minimizes the response time of the server, allowing us to further reduce the load time of the web assets.