{"id":166123,"date":"2014-03-18T14:19:03","date_gmt":"2014-03-18T21:19:03","guid":{"rendered":"http:\/\/css-tricks.com\/?p=166123"},"modified":"2014-10-24T19:08:10","modified_gmt":"2014-10-25T02:08:10","slug":"v11","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/v11\/","title":{"rendered":"Design v11"},"content":{"rendered":"

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.<\/p>\n

<\/p>\n

Some of it looks like this:<\/p>\n

<\/figure>\n

Less<\/h3>\n

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<\/a> now. <\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Gone is the slew of links in the footer. Only the important ones are left.<\/p>\n

The homepage (and rest of the site) is 2-column instead of three. <\/p>\n

Simpler feels better around here.<\/p>\n

More<\/h3>\n

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

Speed<\/h3>\n

Speed is always a goal here, as it should be on any website. <\/p>\n

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

There are only a handful of images left and I plan to nix as many of them as I can. <\/p>\n

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.<\/p>\n

<\/figure>\n

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.<\/p>\n

Type<\/h3>\n

The CSS-TRICKS logo font is in Gotham Rounded<\/a>. Love it. <\/p>\n

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.<\/p>\n

Look<\/h3>\n

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<\/a>:<\/p>\n

<\/figure>\n

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.<\/p>\n

A fairly major aesthetic change is the big-ass headers:<\/p>\n

<\/figure>\n

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<\/a> pushed me over the edge when I saw theirs:<\/p>\n

<\/figure>\n

Validation<\/h3>\n

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

<\/figure>\n

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

Resizeable CodePen Embeds<\/h3>\n

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.<\/p>\n

<\/figure>\n

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:<\/p>\n

\/\/ Cut mustard\r\nif ($(window).width() > 1000) {\r\n  $.getScript(__templatePath + \"\/js\/min\/mega-mustard-ck.js\");\r\n}<\/code><\/pre>\n
I wrote it up on the CodePen Blog<\/a>.<\/p>\n
Forums Upgrades<\/h3>\n