- Launched: October 2010
- Status: Unrecognizabily Modified (The live site may look similar to original launch, but the underlying code is no longer intact.)
This is probably one of my favorite projects that I've done.
I don't think I can speak highly enough of my experience with Nick Smith. Not only did he create what I think was a phenomenal design, but he was pretty much my dream designer. This was my first project with him, but I hope I can do more.
One of the big things I take issue with is people treating websites like a screen-based viewer for printed media. So many people expect the exact same experience on Internet Explorer 6, or some ancient AOL browser, as on Chrome 7 or Safari 5 for Mac (I kid you not, I've had a client that insisted on pixel-perfect AOL 9 support). I'll go into detail about why this isn't a good idea in another post, but the Reader's Digest version is that it holds back web innovation and fails to take advantage of what the Web as a medium has to offer. What I loved about working with Nick is that he was different. He understood that the Web is not print, and shouldn't be treated as such.
Nick took this project on as a side gig in his spare time, which I think is why I only ended up with a full design for the front page, and because of that, I was able to work with him more to come up with a look for the rest of the site, and it showed how much he understood the need for slight changes in the design on my part, and a little improv from both of us.
We were under a bit of a time crunch, thanks to some breakdowns in upstream communication, so one of the things that wasn't clear in his design was what to do with the navigation and footer when the browser window is larger than the width of the design (it was already complex enough, and most of it was single-column anyway, so I opted to make it fix-width). With the drop shadows on the navigation, especially, I found it didn't look right keeping the red ribbon fixed-width, so I made it stretch with the screen. When I told Nick about it, he loved it and agreed that it was keeping with the spirit of the design.
A few days later, I was in need of a finalized design for the internal pages. Since I hadn't heard from Nick, I decided to provide a suggestion. The asphalt background was too much for text to sit directly on it, so an intermediary background had to be put behind any content. I mentioned to him that I really liked the crumpled paper look from the logos at the bottom of the first page and thought it should be carried over to the other pages to help tie them together. I also mentioned that I had tried using the paper images I had for the Places list and that they still seemed a little too busy for regular text (though logos did fine on them), so something a little more subtle would be needed. He suggested a "hinting" technique, where the tops and bottoms of content blocks had the paper background that would then fade into a plain white background, giving the illusion of being paper. With a little CSS magic to provide both background images to each content block, the effect looked great.
Due to the time crunch, I also wasn't able to add some effects (such as the block shadows) to Internet Explorer (IE uses proprietary filters for various CSS-like effects, and they tend to be a bit of a pain to have to continually update while in the development process, so I wait until last to minimize their changes). Therefore, the site sort of accidentally uses progressive enrichment. It's largely subtle or minor effects, such as a radial shadow on the asphalt background, gradients and drop shadows on the top navigation ribbon, a couple slightly rotated objects, and a lowered opacity of the Bearcats logo (to make it look like it's painted on the asphalt). None of these are really design-breaking, and certainly aren't functionality-breaking, though it does provide users of browsers that support these CSS3 features a more appealing experience.
I also got to play pretty extensively with the Google Maps API, as well as its ability to generate custom place markers (an idea I ran with). I had a lot of fun building the list of places (pulled from a database) that linked to pins on the map, so that clicking on a list item would make the map center on the pin and open an info bubble. While this was technically a feature originally done in the O Spot webapp by my predecessor, I was using a more recent version of the Google Maps API, which included a number of code changes, requiring changes to how the API was accessed and utilized, as well as rendering the pin generator used by O Spot obsolete. So, though I was able to reuse bits and pieces of the O Spot code, I still largely needed to write new code, thus allowing me to learn how to solve that problem myself.
All in all, it was a great mix of technologies and challenges, and I had a ton of fun on this project.