Building the Thelonius Kryptonite Landing Page

Back in the summer at SLUMFEST 2012, the 2012 Saint Louis Underground Music Festival, while watching the Neoclef.com booth, my friend excitedly pulls me aside for a performance I “just have to see”. We maneuver our way through the Atomic Cowboy to the indoor stage and I see a man with a band behind him, killing it. I’m Thelonius Kryptonite (and the Enforcers) live for the first time and it’s incredible. You gotta see him if you get the chance.

After his performance (I only caught the last song) I get some quick questions in, get his email address and go home to Google his music. Naturally, the first thing I try is theloniuskryptonite.com. No Bueno. It didn’t exist. At first I’m disappointed then the web designer in me realized it’s an opportunity.

Fast forward a few months and a few emails and it’s almost time for his album release party. TK (short for Thelonius Kryptonite), Damon Davis (aka LooseScrewz, aka the FarFetched mastermind) and I are bouncing website ideas off each other when we realize it’s almost time for the big day.

Everything comes together when TK and I have a phone call about building a page to promote The Anchor Punch, his debut EP. We run through a list of sites he likes with a special emphasis on Santigold’s site. TK and Damon send me the poster flyer, links to the promotional videos, and multiple versions of the album cover. The buck has been passed.

For some reason my creative methods are becoming more analog. I used to sit in front of a computer with Photoshop open to try to conceive designs. Now I sit down with an index card and pencil. Index cards are awesome because they force you to think big picture. You don’t have the space to dive into details. Consequently you get a very clean design.

Anyway, below is my index card design artifact.

You can see the basic layout including

• a floating header
• a floating footer
• a featured video
• and an email opt-in form design

Thanks to Bootstrap, writing the markup for the layout is easy. The floating header is made with the .navbar-fixed-top class and the floating footer is made with the .navbar-fixed-bottom class. The videos are set apart with the .hero-unit class. The album section and release party section are rows. Images are stored in .img-containers that add the border radii and drop shadows to them.

Originally I was going to write all of the code and upload the static HTML page. Then, we realized the BandCamp widget for his album wasn’t going to be available while I was at my computer.

WordPress to the RESCUE!

Using the good ole the_content() tag, I left a place for the BandCamp widget to be embedded using WordPress’s visual editor. Problem solved.