The Car Blog: Launch and Design

The Car Blog is a go! TCB (The Car Blog) is a blend between a car forum, a weblog, and an online magazine, and is a place for car people to go and vent or rant about the world of automobiles. I did a better job of explaining the site on the About page, so go check that out if you want more. This blog entry isn't about explaining what TCB is, it's about giving you the nitty-gritty about the design decisions I made, why it looks the way it does, and the CSS ballyhoo and tomfoolery that powers the visuals. So let's get into it!

Beginning Design Thoughts

Successful car site design incorporates heavy imagery and a deep sense of visual amazement, because when it comes down to it, we like to buy and look at cars that we think look good and car websites are the same way. When I started out sketching initial concepts for TCB, I knew that we needed a solid header graphic that incorporated big-time car imagery for some off-the-bat visual punch. I went over to my favorite photo resource, stock.xchng, and found this gorgeous photo of a Ferrari 360 Modena against a blue sky. After some Photoshop color-shifting and slicing, I achieved an effect that I think lures your eyes down the page more because of the slicing's vertical orientation.

The typography choice for the logotype is DIN, even though I was originally considering Interstate. Both typefaces are examples of auto-specific fonts, where in the U.S., Interstate (or an identical twin) is used on all interstate highway signs. Just look up at the green rounded rectangles next time you're driving, and you'll noticed the slanted ascender tops which are its dead giveaway. I ended up choosing DIN because it is the German equivalent of Interstate, and I love German cars. DIN is one of the most recognizable sans-serif typefaces out today, and if you just look around a little bit, it'll pop right out at you. Oh, and the B-Logs font is Myriad Pro, but you already knew that ;)

Advertising Design

I've never been fully in control of a website that has advertising on it before, so I was really excited to make the ads on TCB not as ugly as other ads on the web. Coudal and John Gruber have done a fantastic job deploying text-only advertisements on their pages that are integrated into the design, and I went to school on their examples in order to make the TCB ads work as well.

We have three different ad placements on TCB, and each one has their own design style and physical area on the page. The "Premier Ad" is underneath the Leading Article area on the homepage (as well on top of the content in the individual entry pages) so because of its placement, it needed to be tightly integrated with other elements on the page so I wouldn't throw-up when looking at it over and over. I reused the blue from the header graphic and navigation to get the color scheme for the Premier Advert box, and then kept the rounded-box metaphor going as well. The top part of the div was done using a background image (nothing fancy), and I used a superfluous display: block'd span element underneath it to round the bottom as well.

The advertisement at the top of the Shortlinks box needed to 1) not look like an "ad", and 2) blend into the style of other shortlinks. What I did was simply use the same style as other ones (except not in an unordered list, and no light grey background) and add a background image on the bottom that alerted users that it was an advertisement in the same manner as the Premier Ad on the left. If your gamma is correctly adjusted, the background of the rounded "ADVERTISEMENT" rectangle should match the lighter grey underneath other entries over there.

And then underneath the Shortlinks box we have our third category of ads — the least intrusive, and also the least "styled". I made these simple because once your eyes get to the section of the page where those ads would be, you're most likely reading the main page content and I didn't want to force a visual saccade over there which would throw your reading off. These don't have rounded edges like everything else, or do they? And this brings us to our next section.

CSS Tomfoolery

When we were talking about the design of this site way back in the summer, we decided the baseline browser would be IE6, which makes development a whole lot easier. The cool thing, also, about developing for high-level browsers is that we can do things with the CSS that we normally wouldn't think of. Some of that stuff included Mozilla- and Safari-specific styles to spice it up a bit.

-moz-border-radius — A Mozilla-specific style that rounds the corners of a block-level element. It was used in those instances where I felt multiple divs just to accomplish a rounded corner effect wasn't necessary (like the light-grey shortlinks entries, as well as the advertisements underneath the shortlinks). Also, enough people are out there using Firefox so I thought a nice segment of the population would benefit from such stylings. And if you're like me, and use Safari instead of Firefox...

text-shadow — This effect was implemented in the latest version of Safari (Jaguar users, I think you're out of luck) and it looks wicked cool. I actually use this effect extensively on the homepage: the current navigation tab text, the leading article title, the leading article subtitle and category, the author/comment count div, the sidebar links, and also in the footer. So if you're using Safari, you get an extra treat that others don't :)

The navigation of the site uses an inverted tab style that I've used in the past, and thought it would work well here too. Sliding doors are in effect, however I've been using that technique since before Doug gave it a name :) Some really intricate-looking design effects were achieved quite simply by using background images. For an example, the navigation tabs appear to overlap the underlying color, but that entire unordered list just uses this background image to make it appear complicated. Also, to make the Shortlinks header appear to be offset from the Leading Article header, I just stuck that image in the navigation's background as well. Boom! Effect achieved with no CSS headaches.

Even though in the header you can click on both the TCB and Business Logs logos, the top header graphic is all one image. In an effect similar to the old imagemap idea, there are two divs up there with transparent backgrounds that "cover up" where the clickable areas appear to be. You can see this for yourself if you hover about 20px left of the left edge of the B-Logs logo ..... it's still clickable.

Final Thoughts

This wasn't the most complicated CSS design I've worked on (the gov't work I did was, go figure) but it's the design I'm most proud of. My test for a website is if I get sick of the design before I even launch it, but for this one, I was excited to show off my work and see what people thought and haven't gotten sick of it yet :) This site is also really rewarding for me because our writers are very influential people in the design community (Jason Fried, Carlos Segura, Didier Hilhorst, to name a few) and working with them on a project was really great.

This site wouldn't look like it does now without the help of my usual beta testing and feedback team: Paul, Matto, Nigel, Mike, and Alex. Thanks guys.

And that's it. What do you guys think? What would you change? Any bugs? Let's hear it, good or bad.

For the Windows users in my audience, here is a screenshot of what the site looks like with Safari-rendered text-shadowing. Makes you want to buy a Mac, eh? :)

Comments

[Michael Simmons]

I can't get over how hot this site looks. You guys did an excellent job.

Even thought I am not the biggest car buff, I've added TCB to my feedlist.

[Jeff Croft]

Wow. This design rules. I have no more to say.

[Eric Lorraine]

Uh... you forgot me you ass.

[Mike D.]

Top notch!

I love everything about the site, including the very creative name. Did Scrivs come up with that?

I wonder if upside-down sliding doors should be called hanging curtains. Or steel curtains... that sounds badass.

Keep up great work. Very very nice.

[David Schontzler]

* Recalls conversation we once had in your comments about walking the line of designer and dev where we get kudos from fellow devs but cry at our own work.

You really threw that out the window. Nice. Although, I must say, the design style is becoming very standard. Rounded corners are in, bigger text is cool again (yay for those of us on laptops), light colors are king. Not that I don't like the current trend, or your nice implementation of it. The "Your ad here" stuff is a bit icky feeling though.

[Scrivs]

Ummm, I think I did come up with the name. I could be mistaken, but probably not. Yes, yes I did.

[Tom Carwardine]

Brilliant!
Love the design.

I couldn't agree more about the lack of decent car focuses material on the internet.

Will you focus purely on new cars or how about some retro features, I am a retro VW fanatic and would love to see some good content on a well designed highly useable site - I am sick of dodgy forums, popups and blinking adverts!

Nice one guys - one for the favorites folder in netnewswire!

[Baudesign]

This is indeed a very good design: looks good, loads fast. I am curious about the ads. What is powering the deployement? phpAdsNew? Can you give us more info on that?

Thanks and again: félicitations!

[Dan Macrina]

Oh hold on let me wipe up my drool that is just hanging off the side of my mouth... The site is looking amazing its everything a car enthusiast could ever want an hot site that talks about cars. What can else can a say... Left me speachless-

[Matthew Oliphant]

Tom: I know older cars more than I follow the newer ones, so my guess is I will be writing about older cars more. It will happen. I am a old Veedubber (my previous car was a 1974 412) so I am there with ya.

[Mike]

*wipes tears from eyes* Thanks everybody ;)

Baudesign - our ads are hand-coded for now, but that might change depending on how big we get.

[Nathan Logan]

I like it.

A lot.

[Mike K]

You have created an absolutely gorgeous site & hit the target audience square between their eyes. I look forward to reading the great content too.

[Dave Marks]

Absolutly beatiful Mike! Good work!

Any chance of a screen grab of the site in safari so we can see what you're doing with the text shadow...

:)

[ak]

thanks for the props man :)
all i did was drool on it though

[Mike]

Hey Tom - we'll be focusing on whatever the editors (and writers .... maybe lol) think is cool. I'm into retro stuff, and we're trying to hit all automotive angles, so old car stuff is definitely still in the picture. If you've got an idea for an article, hit me up.

Dave - I just added a screenshot link to this entry, and it's also right here as well. (120KB .jpg image)

[Ryan Mahoney]

I have no interesting in cars. That being said, I'll probably visit this site a lot because it is *beautiful*.

Nice work!

[jay]

I love the design, Mike. Excellent work! =)

[Dann Ryan]

That really is a beautiful design, I love it. I totally would of never noticed that the vertical lines in the top logo draw your eyes downward, did you ever think you might think a little too hard sometimes? Anyways, I guess you made a really valid point.
I am on my work PC right now (Windows 2k) and in IE6 there is a serious flickering problem with the right side of the sliding door. I know this is probably a very small isolated case, and I definitely don't see the issue in Mozilla, but I just thought I'd give the a heads up in case you hear it in the future, anyways, really nice work. Congrats.

[Mike]

Hey Dann, thanks for the compliments. Yup, I definitely am aware of the issue, and have been tinkering non-stop since we launched but can't figure out how to avoid the flicker. If you, or anybody, comes up with a way, then please email me ASAP. I'll really appreciate it.

[Dave]

Beautiful site, nice write-up! Have no idea how I stumbled across it, but glad I did...

Regarding the "flicker" in IE6 on the <ul class="nav"> tabs (not sure if this has been resolved for you, since I'm viewing thecarblog.com in Safari) -- my own solution for a work in progress is to add a <span> tag before the <a href...> which contains the same background image as the <a>. So technically the flicker still happens, but no one sees it. Like this:

<li class="home"><span><a href="/">Cover Page</a></span></li>

Seems to work as long as you don't mind the extra <span> in your markup. Was worth it to me :)

[Tyler]

Awsome! I've been waiting for a good cars blog.

[suleman]

The cars shown here are wonderful. I always take advantage whenever I see information like this.

[Adan]

Beautiful, execellent design. Now that is a great car blog.

[Jimmy]

Beyond amazing website... Fantastic design! Not to mention a great blog with fantastic information. A bookmark for sure.