It’s a real pleasure to finally unveil this site since Colin, Matto, and I worked so hard on it. Kings Of A&R is the music industry weblog to read if you want to learn about new bands, are a part of a band yourself, or are a record executive looking for the next big thing. Dean Cramer and crew have been running KOAR for awhile now, and he and his site are recognized as industry experts when talking about up and coming bands trying to make it big. It’s read by thousands of music industry big whigs everyday, so it was a great honor to be able to work on this site.
A Little Something New
My personal goal for all work that I produce is to either learn something brand new, or use a new technique that I’ve been sitting on for awhile. For the KOAR design, that little something was partially a dirtier-looking design, but mainly the usage of a typeface I’ve been dying to use for awhile now called Base 02. Base 02 is a typeface that I downloaded awhile ago (I can’t believe this beauty is free!) that produces the most amazingly dirty letters and words you’ve ever seen. Pair this typeface up with Cameron Moll’s brilliant introduction to faux weathering and you have a seriously cool combo for getting your grunge on.
Base 02 has this amazing, vectorized splatter look that must have taken the StereoType people a long time to produce. I highly recommend checking out some of their other font experiments as well since they’re all pretty badass.
Background Images Rule Them All
I’ve always said that you can produce complicated-looking sites fairly easily through the smart usage of overlapping background images, and this KOAR design is a great example of that. I have a main container element that holds all three columns, and this container background image repeating down vertically to give it the column look. At the top of each column, you’ll notice some graphical articulation that’s not part of this repeating background image, so to get that effect, I simply gave each column its own background image (not repeated, just on the top) that overlapped the container bg. The images I used: left, center, and right.
I floated all three columns, then had the footer clear the three columns which gave the container element a height. One of the major hassles that newer CSS coders face is the concept that the browser doesn’t know what the height of your floated elements are unless you specify them. If you have a block with two floated columns in it, that container block will not have an actual height and will not show your background image. To give the container block a height, underneath your two columns you can drop a footer and have it
clear: both;, and then that’ll drop the rendering engine back in normal mode, and automatically make the container element 1) have a height, and 2) repeat a background image vertically. Keep the floated columns and the footer all within the same container element, and you’ll be good to go.
A big thanks goes out to WordPress (& 9rules) super genius Colin Devroe for hacking together a WP theme from my XHTML/CSS prototypes. He always amazes me.