Previously on mikekuehn.ca...

For your interest, my previous online incarnations are shown here with commentary. Click on the thumbnail to open the archived page.

2011-2013: AJAX Mixed Media Portfolio

Screenshot of mikekuehn.ca circa 2011 As a freelancer in several fields, I wanted to showcase audio, video, and images in a consistent fashion - which this site aimed to accomodate. YouTube, Vimeo, and Soundcloud embeds coexist with playable MP3 links and slideshows. A previous iteration 'playlisted' the page contents; this became difficult as APIs were added.

The UI is characterized by a single-page 'expanding project' layout, similar to iOS app folders. This was chosen for both navigational ease, and to allow music to play while browsing other projects. All projects are shown on initial load, and can be filtered using a dropdown tag list. When a project is selected (its thumbnail clicked), the associate 'inner page' appears below, triggering a scroll effect to ensure maximum visibility of the desired content.

I was happy with the design and interactivity of this page, but coding it was a learning process. Wordpress is a less-than-ideal backend for such a site, and while Soundmanager2 did a great job of handling the audio, and jQuery BBQ the deep-linking, as APIs were added the monolithic JS file became unmaintainable.

The design problem of a mixed media portfolio / player is ongoing, so I'd like to give it another shot using a node.js framework like Meteor. Version 2 should be a standalone webapp with an admin interface better suited for managing media-heavy posts.

2010: 'Hi-Fi, Lo-Budget' Mini-Site (jQuery)

Screenshot of mikekuehn.ca circa 2010 I had just closed my recording studio, and set up this mixing / mastering room in my house. My friend Joel took some great pictures of it - click on the photo to change it. Several of my musician clients had made music videos which I wanted to show off, but the explanation of my role in each project was almost invisible and led to much confusion! Hint: Look for the tiny, lowercase, translucent text on the right side of the popup when you click '/video'.

I think this was the first site that I hand-coded in plain HTML, CSS, and Javascript, so my design focus was skewed by a desire to use all the coolest jQuery animations and HTML5 embeds. A lesson for anyone getting into web design: Never forget the objective of the site. It isn't to 'wow' visitors with animations and nontraditional UIs!

Epilogue: Having missed the mark with this design, I soon after made a studio page which more clearly indicated what services I was offering.

2009: Selected Discography (Static, Text)

Screenshot of mikekuehn.ca circa 2009 This discography page relied heavily on mouseover link text - a very odd 'easter egg' way of communicating information! Otherwise, the plain text layout and simple MP3 links provided a useable interface to my recording work at the time. There are lots of hidden links inside the bio page, which probably no one but me ever clicked.

Another UI lesson in disguise: Never hide what you want to be found.

2007-2008: Postcard Music Player (Flash)

Screenshot of mikekuehn.ca circa 2007 Cool animations right? You gotta love Flash! One great thing about this page is that you really want to click the play button.

The problem with a 'site in a SWF' is that the native browser behaviours are obstructed - scrolling, back / forward navigation, deep linking, screen reading, the list goes on! If you dig around you'll see that I'd actually written blurbs for each tune in the MP3 player and a substantial 'What I Do' page, but both are made nearly inaccessible by the design.

In the end, it may have been a bit too much to write on a postcard.

2004-2006: DIY Music Production Blog

Screenshot of mikekuehn.ca circa 2006 The first and possibly the most effective iteration of my personal website: a blog! I got a lot of traffic and positive feedback on the home recording writeups and informational posts like 'How To Build a Pedalboard'.

No CMS here; each page was made in Macromedia Dreamweaver. This of course meant that any change to the navbar had to be manually copied to each page. PHP includes were very much beyond my reach at the time.

The current website (you are looking it) is a kind of return to form: blog style, static, text-based. I've just upgraded the toolkit.