Grow your CSS skills. Land your dream job.

Design v9

Published by Chris Coyier

Rolled out a new design folks! A lot of folks were surprised it happened so soon after the last one, but actually it's been about 8 months, which is pretty average for this site, if a little slow. I've updated the design history page just for longevity.

New (v9)

Old (v8)

Some notes

Just for fun

There is no huge agenda behind the design. Mostly I just thought it would be fun. It's kinda what I do. Although... there are some new areas of the site coming up that this will help motivate.

Fonts

I stuck with Myriad (I quite like as body copy) and Kulturista both via Typekit. Although I'm hoping to replace with Whitney and Vitesse as soon as the HF&J web font service rolls around.

Responsive

The old design used media queries, but this one is closer to "responsive" because it's also fluid, which means it's probably going to do OK on lots of devices I didn't even plan for. For example, I didn't even test it on the iPad but I hear it's alright. I also chucked some transitions on a few elements so when the media queries hit and change those values they animate to their new position/size. I used three weird-ish breakpoints. Default is for browsers above 1200px (most of my traffic), first break point is that. Then breaks again at 1024px and then at 860px (which is basically the mobile version).

IE support

Design is passable in IE 8+. It's a wreck at this moment in IE 6 & 7. I plan to fix up IE 7 when I get a minute and serve the universal IE 6 stylesheet for IE 6.

Thingies used

  • Site runs on WordPress. Also now running Yoast's SEO Plugin.
  • Forums run on Vanilla.
  • Fonts by Typekit.
  • Search by Google Custom Search. You can use the back-button to get back to search results again finally!
  • Advertising by BuySellAds.
  • jQuery for doin' stuff. E.g. more options/less options in subscribe area in sidebar.
  • Respond.js to make the media queries work in IE 6-8-9.
  • Modernizr to conditionally apply some styles more cleanly. E.g. where gradient rollovers are used, do something else for IE 7-8-9.

Stay tuned for more stuff coming soon!

Comments turned off. There is already a forum thread going on the new design, so let's consolidate discussion there.
This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".