Chris Coyier’s website CSS-Tricks.com is likely already in your bookmarks, if you’re like me you check this one often to see how CSS is being pushed and experimented with daily. When he rolled out his most recent version of CSS-Tricks.com not too long ago (we reviewed the last version here) I took notice of several details. Instead of only just giving you my opinions on this website I thought I would call Chris up on Skype and talk through some of the things that he put into the redesign.
From the overall new-ness of the design down to the forum his site is so full of content that it’s much more than just a blog. There are screen casts, code snippets, blog posts, a forum and more to deal with. The undertaking of a redesign like this is a pretty big project and so I’d like to break down my favorite parts:
To start with the website is built with media queries and so can scale down width wise to fit on different screen sizes. That’s a nice touch and show’s a thoroughness that we’ve all come to expect from Chris’ work. Chris shared his desire to rework the site to be wider than the standard 1024 width website but at the same time not leave out those that have smaller screens than that, then also the smaller than that screens for mobile devices. Enter the media query, i’d say his use of this is highly successful for this case.
We discussed the color scheme of the design as well. I think I agree with Chris in the case of the colors he’s selected, being bold and different in this case, really helps blend in all the disparate ad designs and colors and ultimately makes the overall design look harmonious.
1. Main Navigation
I like the navigation design, I think the size and colors make it very obvious for the user on the page and I love how all the colors work together with the other content sections of the site. The interactions on the navigation elements are fun and in my opinion really set the tone for the rest of the website’s visual experience, in a good way. They are done with CSS transitions, it is “CSS-Tricks” after all. Chris says that the navigation is the most un-liked part of the redesign by his readers but imho it’s the best part.
I love how the shape behind the sidebar ads changes as you roll over them. The shape really draws your eye toward the ads then the roll overs are fun to discover. Done with changing the border radius of the top-left and bottom-right sides of a square. It’s like most things on Chris’ site, a simple idea applied in a non-obvious way, it makes for great stuff!
3. Recommended Services
These extra services are featured in this area, but like with the ads above it they have an interesting mouse over effect with the flipping rectangle animation. It’s things like this that will keep users involved with small details of your website that might otherwise get overlooked and ignored.
4. Specialized Content
These sections house the special content of the snippets and screen casts. This content doesn’t mix too well with a regular blog post and often have longer shelf lives than traditional posts too. So they need their own space, I like this spot for them. Down under the main posts section, but more permanent feeling, especially the snippets section with the way the tagging has been color coded, etc…
The footer is pretty exciting, again a simple idea executed in a non-obvious way. The roll overs here are just nice when you discover them, they are all different with the icons and colors and have a really nice ‘reveal’ when you see the colors and stuff.
The real lesson we can take away from CSS-Tricks.com (aside from the literal lessons Chris gives us) is that you can take a simple concept and do some really nice conceptual interactions that are fun and memorable to your users.
About: Chris Coyier
From chriscoyier.net: I create websites and help people make theirs better through writing, speaking, and working on web applications. I consider myself a lucky man. Creator of CSS-Tricks.com and Lead Hucklebucker. Master Cascader. Head Tag Closer at Wufoo.
Follow Chris on Twitter @chriscoyier