CSS-Tricks.com v9

csstricks-v9

This is, I think version 9 or so, of Chris Coyier’s (@chriscoyier) CSS-Tricks.com website. We’ve reviewed his site designs in detail in the past and have always followed his progress and how he approaches working on his website. This one for me is a fine addition to the UMS gallery.

It’s pretty well tricked out with some CSS goodies, from the gradients in the link hover states to some of the interactions in the footer. Chris gives some good insight into the redesign right here.

csstricks-rwd

The thing I keyed in on is how the design is responsive, Chris gives a good breakdown of his approach as well:

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).

The cool thing for me is that Chris is fearless in his redesigns, he loves to experiment and try new things – even entirely new designs. It’s fun to watch as it develops constantly.

Author

Gene Crawford

With over a decade of experience in the industry he has overseen the design and architecture of hundreds of web sites and applications. An active member in the design community, he's the editor & producer of unmatchedstyle.com, the ConvergeSE, ConvergeFL, ConvergeRVA and the Breaking Development conference series.