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? :)
Now I can design the header and footer for the next whitepaper with no hassle, and we can start using a cohesive design for all proposals, contracts, whitepapers, and anything else the team comes out with or needs. Consistent branding across all our media is the way to go, and Pages is letting us do that.
