Design v11

I redesigned this site a smidge. It’s not a huge re-thinking or as big of an undertaking as v10 was, but it’s different enough I’m going to call it v11.

Some of it looks like this:

Less

Gone is the Downloads section (also has been called “Demos”). While that got a good amount of traffic, I never kept it up and the demos were getting long in the tooth. I live in a world of demos and that place is CodePen now.

Gone is the Gallery. As much as I liked it, experience taught me I didn’t update it enough to be worth it. I still have a huge archive of screenshots I obsessively capture, but until I can figure out a smoother way post them (and do it responsively) I’m going to let that be.

Gone is the ability to search specific sections of the site. All that did was link to different Google Custom Search engines specifically limited by sub-directory. The default search is good enough.

The logo is just simple one-color Gotham Rounded now. I still think of the asterisk as the logo mark for CSS-Tricks, but I couldn’t figure out a good way to incorporate it. I’m sure it will return someday.

Gone is the slew of links in the footer. Only the important ones are left.

The homepage (and rest of the site) is 2-column instead of three.

Simpler feels better around here.

More

While in some ways there is less, there is also more posts shown on the homepage. It’s such a lightweight and easy thing to do, might as well.

Speed

Speed is always a goal here, as it should be on any website.

There are less icons in use. For the ones remaining, I dropped icon fonts in favor of an inline <svg> icon system, meaning zero requests.

There are only a handful of images left and I plan to nix as many of them as I can.

A good homepage load is typically under a second, which is a solid place to be. I plan to keep working on it. I think there is a few more resources I can either combine or remove.

On pages with a lot of comments, it’s clear that Gravatar is the slowest thing, mostly because it can be a ton of individual requests. I’d like to start attempting to lazy load those. I’m not ditching them I don’t think; I’ve always been a fan of avatars next to comments and other user-authored content.

Type

The CSS-TRICKS logo font is in Gotham Rounded. Love it.

While I was using H&FJ Cloud Typography fonts, I originally went with Ideal Sans for the body font. I also love it, but I got a ton of complaints right away that it rendered poorly in the classic Window/Chrome scenario. I could have tried out some things, but the fonts were also loading a bit slowly, so I decided to nix Ideal Sans and go with a (gasp) non custom font. Just regular ol’ Lucida Grande. I don’t love it, but it’s fast and renders fine everywhere.

Look

Generally better aesthetics is another upgrade – at least in my opinion. I’ve long been a fan of bright, fun colors, especially on dark. It’s a thing I’ve (poorly) copped from Kevin Hale, which you can see from his slide decks like this one:

There is only a handful of colors defined and I use them over and over in as logical of a system as I can. Feels decently cohesive I think.

A fairly major aesthetic change is the big-ass headers:

I’ve always liked that — when an article greets you that clearly. It was sort of a last-minute change for this design, and the newish nGen Works blog pushed me over the edge when I saw theirs:

Validation

Dribbble actually validated the whole idea for this design. I posted a simple example there and it got so much positive feedback I decided to go for it.

We’re about a week post-launch as I write this, and the design has largely been met positively. That’s literally a first =).

Resizeable CodePen Embeds

I was hoping to add more functionality to the site this round, but unfortunately I didn’t get to do as much of that as I would have liked. One thing I did get to was making all CodePen embeds resizeable.

Since that functionality is only really useful on large screens, I did a super basic cutting of the mustard to load it in from my global JavaScript:

// Cut mustard
if ($(window).width() > 1000) {
  $.getScript(__templatePath + "/js/min/mega-mustard-ck.js");
}

I wrote it up on the CodePen Blog.

Forums Upgrades

• You’ll get an email notification when you are mentioned by @username in a thread. So you know if someone is talking about you or specially trying to get your attention. You can also still subscribe to a thread after commenting (like you can in the blog comments) if you want to keep up to date on all follow-up posts.
• You’ll get an email notification if your post gets caught in spam, with instructions on who to notify so it’s not lost to the ages.
• The concept of Featuring and Burying Comments has made it to the forums. Myself, any of the moderators, and the person who started that topic have links to feature and bury replies. I hope that encourages better answers.
  

  

• For regular Forums visitors, you might appreciate the new All Topics page which shows the most recent activity in all the sub forums combined.
• Markdown has made its way into Jetpack, so rather than use a separate plugin for it, I’m using that now. Via a plugin I had custom built by Justin Sainton, Jetpack-markdown is in use in the forums as well as the blog comments, but not on the blog itself (legacy reasons for me). I also replaced the live comment preview with a preview tab in the blog comments. What’s nice about that is that it’s a real live preview rendered by the server, so it’s not faking it with a client side lib like it was before.
• In v10 I never quite finished the responsiveness of the Forums. Should be much better now in v11, although not perfect.

History

I’ve added v11 to the absolutely embarrassing Design History page on this site.

Issues

There are still some things I’m ironing out. If you see a bug, the best way to make sure I’ll see it is to shoot over a message – and it would be much appreciated.