Starting in 2007, my friends, Mike Chin and Mike Scalise, started a blog that was solely focused on collegiate a cappella, called The A Cappella Blog (or ACB for short). My friends started the blog where Chin wound up creating most of the content, and Scalise did the majority of the technical side of things, including developing the original blog on WordPress. The duo would travel around the US and review singing competitions (including the actual ICCA events featured in the Pitch Perfect movies), impart wisdom they picked up by being around a cappella groups, and share YouTube videos submitted by the community.
As their friend who wanted to hang out and occasionally join them on the road, I started bringing my camera with me and started taking photos of the events that would eventually be shared on the site and on the ACB Facebook page. This started to become a regular thing and over time I began to get more involved in the blog.
In 2011, we were discussing some changes the guys wanted to make around the site and I asked if I could take a swing at redesigning the site. We worked together to change the information architecture around the site and transition everything over to a new theme.
Around this time I was working on my first responsive web design project at work, and we decided to try to incorporate RWD into this design. On smaller devices we replaced the grey header with a skeuomorphic blue header that felt like it fit into the iOS 6 aesthetic. We included a hamburger icon that shifted the entire site over to display a navigation drawer.
Also, as part of the redesign, we moved the site off of Wordpress and migrated its content to Drupal. Part of the reason for this change was because the way Drupal managed content entries was a better fit for a few features we included in the redesigned site. For one, we created a directory of all of the college a cappella groups that we were aware of. We also ran a bracket contest that let users submit their predictions for who would win ICCA regional and national events.
Drupal allowed us to create the content structure that allowed for storing and managing these content types. We also created custom Drupal modules to help with the bracket contest and submission process.
The A Cappella Book
I mentioned this in the Maker section of my site, but during this era I also took part in laying out The A Cappella Book. You can read more about it here:
Re-Platform and Redesign
By 2014, I had gone all in on Craft CMS for my personal and professional web development projects. It was often the more flexible CMS option for our clients and I became very used to using it for web development. In 2016, I discussed how we might want to make adjustments to the ACB site and with that I pitched the idea of buying a Craft CMS license and porting all of the content, once again, over to a new CMS platform.
At this point we decided to dial back our commitment to the site as we were all beginning to start families and dial back on traveling to cover events. With the redesign we cut out the bracket contest and looked to simplify the scope of the site.
The new site focused on blog posts, the book, and the group directory. I got to take some big swings on the design in a way I didn’t get to experiment at work. For example the list of blog post categories was large and cluttered until you hovered your mouse over an item—fading all but the hovered item away.
Other pages on the site had big text and featured a large header photo. If a blog post had a specific feature photo we would show that in the header, and if no header photo was set, the header would randomly select an image from those uploaded into the CMS.
As another experiment, the main header photo was set to take up 75% of the vertical viewport. This was true on landscape and vertical screens, so as the size of the window changed it would cause the focal point of the photo to get cropped in unfortunate ways. To fix this, I used the focal point feature in Craft CMS to let you point to the subject of the photo in the CMS. Instead of using it to crop the photo down and focus on that point, I extracted the coordinates, converted them to percentages, then used CSS to make sure that the subject of the photo always stayed in view, even when the rest of the image got cut off.
ACB Archive
In 2019, my friends decided to retire The A Cappella Blog. At that time we decided that no further posting would occur, but we wanted to keep the site up as a static archive so people could continue to read the articles and refer back to the site as it was in that state. I wrote about the process to converting that site here:
Fin
The A Cappella Blog was a labor of love for my friends and I. For me, it was especially satisfying in letting me explore web design and features as I started taking on more full stack development and management responsibilities at work.