Design v6

Avatar of Chris Coyier
Chris Coyier on (Updated on )

I’ve been tinkering with this redesign maybe a month or two, and decided to push it out last night. I had been using it myself thanks to the Theme Switch plugin, but there was a few things I had to actually go live before I could change, so I just did it. As usual, it’s not an absolute overhaul, more of a refresher. I’m calling this v5 v6 because apparently I called the last one v4v5 and let’s just roll with that. (Locally, it’s my 12th version!)


  • Reign in the font situation. I wanted to establish the “CSS-Tricks” type part of the logo in a font that I liked and was a part of a larger family. I went with Gotham Condensed, which I picked up just for this, to extend my collection of the Gotham family, which should serve me well for a long time to come. Headers on the site are in FF Tisa Web Pro, served through TypeKit. Body copy is Verdana. Other than ads, which I cannot control, those are the only 3 typefaces in use on the site, which was the goal. (Well, the code in Monaco, but that doesn’t count.)
  • Feature more of the site on the homepage. The homepage now also includes the latest 5 snippets and the latest video screencast, in addition to the the latest 5 posts.
  • No more dark sidebar. The #1 complaint of the last design was the really dark sidebar which visually overpowered the content area. I eventually started to buy into that criticism so I wanted to make the sidebar less intense that way. The outsides of the site is now “framed” as well, which makes me feel more comfortable, instead of the all-white-no-edges middle that was going on before.
  • Not do anything too crazy. This is just a refresher. No major new areas. No navigational changes. No different URL’s… This is the same ol’ joint it used to be


  • Maintain or increase the value of the advertising. There isn’t any more or less than the last design, but things were shuffled around a little. I like the placements better. They have more breathing room.
  • Dropping IE 6. Unfortunately I kind of half-assed IE 6 support in the last one. This time I just didn’t want to deal with it. I’m fine with supporting IE 6 on client sites and eCommerce sites and whatnot, but that demographic on this site is tiny and I just don’t care. For IE 6, I’m serving the Universal IE 6 CSS.
  • TypeKit fonts kinda look like shit on Windows, so I’m only serving up TypeKit for non IE browsers. This doesn’t solve the problem of Windows+NonIE browsers, but we’ll see what kind of feedback there is on that.

To Do

  • Update my bookshelf area
  • New footer for the forums
  • Re-think the increasingly-important Archives page
  • Add a few tweaks, mainly regaring search, in an additional IE 6 stylesheet
  • Ideally, go through the entire video archive and redo nicer thumbnails and put them in my new system (just an internal thing, I’m using custom fields for everything now and supporting two different systems until I can go back over this).
  • See if I can get it with no horizontal scroll at 1024px. I planned for this and then something went funny somewhere. I need to track down what the thing is that is sticking out and try and bring it in.
  • Keep on tweakin’ — I have some little micro-ideas already I need to get to.

For Posterity