The personal website of Chris Coyier

Redesign

It’s time it’s time, to redesign. I’ve gone back and forth with this site quite a few times. From trying to go minimalistic and send people to my projects elsewhere, to being blog/writing focused. This time I’m trying to do both, but have a home capable to housing and publishing content very well. My goals:

Articles

If you are reading this post directly on the site, you are looking at the new format. I like it. I think it’s sexy. My favorite part is that there is ample margins on both the right and left, so I can play around with formatting and do dramatic things like have a basketball player going in for a dunk jut into the text (and all it takes is some simple CSS classes). These images might be awkward in RSS, so I hide them with inline style (display: none;) and then bring them back to life in the CSS with (display: block !important;). That technique failed. I may need to look into using empty divs with background images instead to keep purely decorative images out of RSS.

Link Posts

I use a WordPress plugin called Postalicious to import my Delicious links and turn them into blog posts. I like moving that data over here, because I think it makes for good blog fodder and then the data is under my firm control. But links posts are decidedly different than other written articles, so this new design treats them differently. The latest is shown on the homepage, but the other recent links are only to actually written articles, not link posts. The blog page also only shows real written articles, relegating link posts to it’s own section.

Showcasing Other Projects

The homepage still has prominent links to the other stuff that I do. I’m still not entirely satisfied with this area though. Not sure why. Will work on that.

Portfolio

My old portfolio used some fancy JavaScript and all sorts of animations and such. It got old to me quick, so this new design features really simple text and screenshots and I think it will be a more timeless approach for me.

New Technologies

This website is marked up in HTML5 (view source and check it out!). It also uses all kinds of CSS3 stuff from rounded corners to RBGa to transforms and transitions. I’m only using a touch of jQuery to solve a little tiny problem I’ve never had a great way of solving with CSS (I’m using padding and background on links inside articles, and I can’t figure a way to use CSS only to remove those properties when a link contains only an image).

For this fancy font (Skolar), I’m using TypeKit.

Let Me Have It

Like it? Hate it? Find bugs? (There are surely some bugs)