As an audio guy that [currently] works in a customer service role for a company well known for design… I often got discouraged attempting to create designs. What I read around the web from designers being the current trend is this thing called “design” consulting; people that create a web presentation concept before even touching markup. Well great…. how the crap am I suppose to come up with a ‘consulted feel’ for my huge database of recordings?
Inspiration came Quickly…. watching the behind-the-scenes of the first Back to the Future movie I heard director Robert Zemekis tell composer Alan Silvestri exactly how he wanted the music to sound… “BIG!!“
Pictures
In previous implementations of my portfolio’s layout I kept images small on purpose after having issues with techniques being borrowed then used against me. Having a Nikon, a large monitor, Aperture and iPhoto I realized I had some amazing pictures of recording gigs and needed to show them off on a medium as colorful as the web.
Fonts
My favorite eye-candy websites are completely focused on typography; I think they are difficult to get right. So I made a great attempt at the font-only approach. The site design is completely built with CSS with quite a bit of CSS3 and even [webkit-only] transitions. No images…
Organization
200+ Recordings = information overload for an employer or client. Some brain power and a few Subway napkins later: Show a few good ones big a bold, and give access to more if needed.
I had already implemented a “favorites” section done through the Status field in ExpressionEngine (more below). Those go up front. On the main audio page, big images of featured concerts are put first. Non-featured entries (in “open”) are then viewable through the Archive section sortable by category.
Since there is more traffic on microphone entries, I make sure to still make my work the biggest freaken thing on the screen on those pages. Featured entries have priority at the top with large images while archived projects are smaller thus showcasing both quality and quantity with that particular mic.
Code & ExpressionEngine
To built the new version without interrupting the current design, but still use current information I relied on EE conditionals. Since the template structure was remaining the same, it was just a matter of using:
Old Template
And I went page by page either redesigning or merging code.
Another challenge was Dreamhost. I had just moved my site due to some rather sad issues with my previous host, and Dreamhost doesn’t have the quickest database in the world. Each template got a healthy dose of caching tags as well as template caching:
{exp:weblog:entries weblog=“blah” caching=“yes” refresh=“forever in minuets”}
Yes, I know EE only looks at one or the other, so the reasoning is that I mess around with my site so often that I wanted fail-safes in place when I forget to re-enable template caching.
Images are a major undertaking with EE 1.x. I rely completely on a plugin called File that allows images to be uploaded and inserted into a custom weblog entry (if you’re wondering if I’m terrified about EE 2.0 and this plugin, you’re right). In order to migrate my 200+ entries over a longer period of time than the site design, I built in a conditional:
[img src=“http://www.blairliikala.com/images/noimage.jpg“ alt=“{title}“ /]—global weblog variable with the link to an image.
In short, if that new field with the larger image isn’t there, see if a Gallery image is (which are big), otherwise just use the small image. However, if there isn’t a small image, and thus no image for the recording at all (a few exist), then show the no image image. Same goes for several other sections. Yay for conditionals!
New to the global development was using a body id and class:
[body id=“{segment_1}“ class=“{segment_2}]
Allowing to have a unique ID automatically associated to each page section, and a class to each sub-page based on the URL. That came in real handy when making the navigation highlights.
CSS3 is amazing, and I use it. It’s all backwards compatible/degradable so those with Webkit-based browsers get the best experience, and those with IE7 get the idea. Things I use; transitions, columns, and rounded-borders.
