About the CSS-Tricks Redesign

Avatar of Chris Coyier
Chris Coyier on (Updated on )

In case you haven’t noticed, I’ve done a bit of a design overhaul around here. I thought I’d take the opportunity to go over some points and features of the new design.

Why?

Because it was fun. Because I’m a designer and we never stay satisfied. Because I think websites should always get a little design refresh at least every year or so.

Is there anything new?

Nope, not really. Just a new face. On the back-end, I’m slowly moving some stuff into WordPress that lived outside of it before. Like all the video pages. Most of them are on static pages I built one-by-one as I need them. I don’t even remember why. But now I have a special WordPress page template for them, where I insert the stuff into Custom Fields, which will work out great I think. This will allow for commenting on the video pages themselves, which is nice. This will also make future design tweaking a hell of a lot easier.

Connection to old design

I’ve said many times in the past that I like evolutionary design more than revolutionary design. Essentially, tweaking and improving rather than starting from scratch. While this design feels quite a bit different, I still feel it’s evolutionary. The underlying code hardly changed at all. The background texture, while lighter, is the same. The tag is still here! The sidebar is still on the right and has the exact same stuff in the exact same places. The footer is still humongous =)

jQuery

I like jQuery, you like jQuery, WordPress likes jQuery. I was using it a little bit in the last design, but I figure if I’m going to load the library I might as well make more use of it. Things jQuery does in the new design:

  • Does the color-fading in the main menu. Tutorial on that coming soon.
  • Powers the tabbed slider in the sidebar.
  • Pulls my recent Tweet in the footer.
  • Animates the links in the footer.

Changes to Page Titles

The old design appended ” – CSS-Tricks” to the end of almost every page. I don’t even remember why, I think it was either some early effort at SEO, or just came in as a part of a template I started from. I never liked it. Now I’m using a much smarter technique for properly naming pages in WordPress. The homepage is just the name of the blog. Posts are just the name of the post.

Here is the clever bit of PHP (specific to WordPress) that handles page titles:

<title>
	<?php if (is_home()) { echo bloginfo('name');
	} elseif (is_404()) {
	echo '404 Error - Page Not Found';
	} elseif (is_category()) {
	echo 'Category:'; wp_title('');
	} elseif (is_search()) {
	echo 'Search Results';
	} elseif ( is_day() || is_month() || is_year() ) {
	echo 'Archives:'; wp_title('');
	} else {
	echo wp_title('');
	}
	?>
</title>

@font-face

As a nod to CSS3, I am using @font-face for some of the text in the footer. You’ll only be able to see it (at the time of this writing) in Firefox 3.1 beta and the latest versions of Safari. I am using the free and very nice Fontin font from Jos Buivenga.

If you are interested in using @font-face, want to learn more, and want to learn how you can make it work in IE, check out Jon Tan’s article.

Coding the new theme

I decided that it would make things easier to work in the exact same environment that CSS-Tricks currently lives. So I registered a top level domain name and put it on the same server. That way when it was done an complete, I could literally just move a few folders and files and that was it. All the relative file paths would be exactly the same, which I wouldn’t be able to do if I was working from a subdirectory of the original site. Maybe overkill, maybe better ways to do it. Whatever, it worked great for me.

One problem I ran into was the fact that I wanted to copy all the posts and comments over to the test site from the main site. I should have been able to just export from the main site and import at the test site. Tried that, but the file was 10MB which was too big (even after some fancy hacking tricks) for WordPress to import. I could have moved the database, but I just got lazy and didn’t do it.

So… When the design was getting close to done and needed some real live testing on the real live site, I found an awesome WordPress plugin that did the trick. It’s called Theme Switcher, and it allows you to show a different theme to people who are logged in (and at a high enough access level). So I was able to active my new theme and literally see it in action when I was logged in, while everyone else was still seeing the old design. Extremely helpful.

It’s not centered

Just a design decision. In order to center this design I’d have to come up with some kind of way to resolve the left side so that it could use the same repeating graphic as the right does. That would take up a decent chunk of horizontal space and I just don’t think it’s necessary. I don’t mind it left aligned anyway.

Things you just have to live with

At this point I have way too many articles to ever (ever) revisit one-by-one and make changes to. There are some consistencies in the articles that dictate certain design aspects of the site. For example:

  • Images in all posts are 570px at a maximum. So the main content area of the site always needs to be at least that wide.
  • Images in all posts were meant to be shown on white. When I first started this new design I had a little texture in the main content area I liked, but then I went back an looked at some old posts with lots of images that were meant to be shown on white and it looked awful. From now on, my main content area will always need to have a white background.
  • All code snippets in my archives are wrapped in both <pre> and <code> tags, with a class name indicating the code type. All HTML code in unescaped. I use a plugin to allow me to do that, and another plugin to do the highlighting. I like the system OK, but I am absolute trapped into it now. Different code highlighters have different requirements for how you handle your code, and I have far too many snippets to ever go change them all.

Hope you like it!

So there ya have it! I hope you like it, feel free to let me know (either way). For posterity, here are some screencaps.

Old Design

New Design