I had a lull in client work last week, so I took advantage of it and finally got around to redesigning The Periodic Label, the independent music site that I run with a few friends. When I first built the site over a year and a half ago, it wasn’t clear what kind of functionality we were going to need, or really even how the site was going to be used. We started adding features (like the band journals), and I started to realize that I was going to have to rethink the site from the ground up, or it was going to end up like MySpace—a hideous Frankensite of glommed on features that was a usability nightmare.

I started out by simplifying the template structure in ExpressionEngine, which led to much cleaner URLs and infinitely easier maintenance. One of the toughest parts of the site is that the design is section dependent—each section of the Periodic Table has it’s own color scheme. The first build had separate templates and weblogs (the information canisters in EE) for each section, which meant 8 weblogs and 16 templates just for the band’s pages alone, as each section’s home also needed it’s own template. In the new incarnation, I was able to utilize EE conditionals (my new best friends) and custom weblog fields to get that down to just 1 weblog and 2 templates. In addition to the obvious maintenance advantages, this meant that the URLs went from something like theperiodiclabel.com/index.php/site/bandPage_av/band_name/ to theperiodiclabel.com/index.php/bands/band_name/..

The next major overhaul was in the way the band journals were implemented. I finally figured out how to correctly use the {related_entries} and {reverse_related_entries} tags. I then combined them with categories, and I was able to take out all the hacked conditionals I was using before to relate a band’s page to it’s journal page. And I was able to future-proof it for when we hopefully have more band’s posting, instead of coming up with an individual solution for each band.

One of the changes I’m happiest about is getting away from the Flash-based navigation of the Periodic Table. I was able to rebuild the table using CSS and JavaScript into something that is infinitely more accessible, and I think even better-looking. To build the table, the groups of elements ("a chemical series") in the table are placed as background images and positioned absolutely within a container div. The only place it gets a little wonky is in the two that overlap (Mobius Strip and Quantum Chaos). I somewhat alleviated it by applying z-index:99 to the hover state of those two, so that the one you’re hovering over stays on top. The remaining issue is that when you’re hovering over one, the overlap area is no longer hoverable for the one underneath, so the user has to move their mouse a little extra to get access to it. The descriptions that pop up above the table help the user know when they’re over the right one, and are done with an appropriated version of the Tooltips script from the fantastic Simply JavaScript by Kevin Yank and Cameron Adams.

I also finally got around to utilizing 2 services that I’ve been wanting to try out, and which both turned out to be surprisingly easy and powerful. First, I moved all the mp3 files to Amazon’s Simple Storage Service, a scalable, pay-as-you-use data storage system. We got a lot of attention with our first free full-length release (Smyer’s Crooked Tigers), and our server got hit hard, spitting out over 23GB in one day. I’ve been wanting to move all the large audio files off our server for some time, and Amazon’s S3 seems like the perfect solution—affordable, extensible and easy. Second, I set up feeds for all our Journals at FeedBurner. I’m still feeling my way around, but it’s so much more user friendly than just setting up an XML RSS feed page that the user has to know what to do with. Plus, it has great subscription tracking features.

I also made a discovery regarding CSS background images and page load times that I’ll talk about in my next post.