Ionrock Dot Org

My Weblog

The Tech Behind the New Ume Site

Recently, I pushed the "live" button on the new Ume website. Being a programmer, I took the opportunity to update some code and try my hand at design. Feel free to leave any me comments (bugs!) here.

The Design

After the initial design got stale (which happened pretty quickly), Lauren did a redesign for our first official full length. This essentially Lauren's first foray into Photoshop and it lasted for quite a while. This last iteration is obviously also designed for our new EP. Laurel (a friend who also does projections at our shows) did the cover design and we managed to grab an image from her for the header.

This design actually came out of an entirely different design that I had almost finished. The previous working version had a really light feeling. The big problem was the actual content areas. When we decided to scrap it, I started over on the text. I put together some basic textual elements and then worked on the menu based on a previous experiment. Once the text was looking good, Lauren showed me a banner design she had been playing with. We added that to the page and things were pretty close. A few menu changes later and things were pretty much done!

The Code

When I first started writing code, the Ume website was where I actually used it. I cut my teeth on PHP and MySQL keeping our show listings up to date and managing our mailing list. In fact, I'm still using the same (poorly designed) database I always have! This iteration gave me a chance to finally clean up the PHP code for the show listings as well as fix some basic organization issues that always bothered. The majority of coding this time around was spent writing Javascript.

Before this iteration of the site, I started working on an electronic presskit. Many bands use something like Sonic Bids, which is actually pretty helpful, but for specific purposes they keep something of a online one sheet as well. For ours, I wanted users to be able to play our music. I found SoundManager2 and started working on a simple player that was similar to the WordPress plugins that turns mp3 links into neat players. It turned out pretty well and I had a decent jQuery plugin for SoundManager2. I used this player on earlier designs, but we thought it would be better to have a player that would play the whole record instead of just stream a few songs. The player on under the "listen" heading is the result.

Since I had a player and I didn't want it to restart whenever someone went to a different page, I went ahead and made all the page content load via Ajax. Now, I should mention, that I don't think the site degrades gracefully and personally I'm ok with it. Band sites are traditionally meant to look good, so if things break when a person turns off Javascript (or flash for other band sites), the user is out of luck. I'll try to fix this of course, but for the time being it wasn't a priority.

Ajax content is pretty simple stuff thanks to jQuery. I can't say I had any major innovations here. The URL fragment defines where it will pull the content from. I added a loading spinner from this site. As simple as it is, I was really glad getting a decent spinner was such a painless process. In fact, the whole implementation was extremely painless. jQuery is really an amazing library that made life really easy. The actual site specific code is written as a jQuery plugin, which feels similar to writing a Python web app and packaging it as an egg.

All in all, the site redesign was a real success. As a programmer, it was nice to see how my skills have grown throughout the years. It is also a reminder of how much the web has grown up with the advent of great libraries. The ease in which I made this relatively dynamic site is truly a testament to the libraries and evolution of the web as a platform more than anything. So, I suppose this post is generally a thanks to those folks who wrote great libraries!