Grow your CSS skills. Land your dream job.

Design v11

Published by Chris Coyier

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.

Comments

  1. Merlin
    Permalink to comment#

    Cool design, but it does not work right on IE11 on Windows Phone 8 (Huawei Ascend w1). Everone of the nav elements goes all over the screen. Sorry for my bad english, I an from Germany.

    • Cory
      Permalink to comment#

      Looks fine to me. Samsung ATIV Odyssey running WP8 version 8.0.10521.155

  2. philtune
    Permalink to comment#

    I started following around v9 and v9.2 was by far my favorite. It got the creative CSS juices flowing just entering the site. I’m seeing a lot of sites nowadays simplifying their designs to cater to the mobile set, but I’m nostalgic for the big impressive Photoshop layouts.

    Yay on lazy-loading comments. Personally, I don’t like that comments bloat the page height (am I the only one that bugs?) so I can’t immediately tell if I’m reading a short message or the chapter of a novel (so I know how much I want to invest in reading it).

  3. Kevin
    Permalink to comment#

    Looks great! I’ve only really followed this site since the last version, and to be honest I really kinda hated it :( BUT your content is always great and I enjoy reading enough that I could get past it. This new design is awesome, love it! I’m really just commenting to thank you for developing such a great resource for developers :) Keep up the good work (please)

  4. Standard
    Permalink to comment#

    So much better than v.10 !! still miss 9.2 though. twas my favorite by far.

  5. Chris,

    I’ve followed along since v9 and have learned a lot by you. The screencast for v10 has been a great inspiration. I’m excited to see the new look of v11. I think my favorite elements are your logo and the search form. So simple but so effective. Way to go!

  6. This is the best version IMO. I was never a big fan of V10.

    Hope you do a new course for the Lodge soon!

  7. Would also love to see you explain this SVG icon thing via one of your videos. (inc the Grunt bit)

  8. ZacBeers
    Permalink to comment#

    I’ll be honest, I really do like the new design. I’m a little if-ish on a few things, but over all it’s definately an improvement. Good job Chris!

  9. name
    Permalink to comment#

    I also like the design, but honestly that logo font is fugly.

  10. Nice job. Will take a bit of getting used to, but I like change. The comment previews aren’t quite working all the way yet, but I guess that will come with time. Nice work!

  11. JoshWhite
    Permalink to comment#

    I still think v9 / 9.2 was my overall fav :) I came in around v4.

  12. benjamin
    Permalink to comment#

    Rad. I’ve been following CSS-Tricks since within your first 10 screencasts. I always get psyched when I see a new version of CSS-Tricks. I like the crispy clean feel of this redesign. Thanks for the memories and skills. Stay awesome!

  13. The swapping of the ‘CKS’ for ‘XXX’ on mouse over in the logo just plains rocks.

    Awesome detail.

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

    Feel your pain Chris. I implemented a “gravatar cache” system on my site to help with this. There’s a plugin for that. I rolled my own.

  15. Jon
    Permalink to comment#

    A few wrinkles to iron out, but THANK GOD v10 is dead! :)

  16. Can we go back to last version If I wanted to compare it with my version (after learning it in the lodge).

  17. Pete
    Permalink to comment#

    I like this new design Chris but I do think it could be improved. I’m not a fan of the gradients you’ve used at the top of each page, I don’t think they sit right on the page. Also, I think the sidebar is maybe a little wide and the big ass subscribe buttons are way too big, no real need for them to be quite that big i.m.o.

    One other thing that is grating on me is the overlap of the titles with the section below them. I think it makes them harder to read, not good for someone with bad eyesight.

  18. Dani
    Permalink to comment#

    we will have the making-off screencast on the lodge?

  19. Shaun Forsyth
    Permalink to comment#

    Hi Chris, first time post and a long time reader, I’m sorry to say this new design is just too simple for my tastes, it feels like noddy town in a long list of grown up websites. However I respect the amount of work you would have put into this, its never easy and will continue to read your great content.

  20. Flicking through the Design History, tears come down at the sight of how Web Design has changed. At looking at v10, which is gone just a few days, it seems really old-in-style!

    Amazing redesign for v11! Keep the good work :)

  21. Permalink to comment#

    I like the redesign. Nice and clean on the dark background – I was never fond of the drop shadows on all the panels – too fussy.

    Are you going to change the favicon too away from the asterisk?

  22. I <3 the new redesign!

    I was shocked at first when I loaded up your website as their didn’t seem to be any inkling that this was going to happen, but like everything…we get used to it.

    If you remember, no one liked it when Facebook updated to their new design, but you just get used to it.

  23. Permalink to comment#

    I LOVE IT!

  24. Noah Blon
    Permalink to comment#

    CSS Trixxx looks amazing — one of the most inspirational designs I’ve seen in a long time. So many cool things to learn from. Of course I love the responsive embeds. Really great job Chris!

  25. It’s bitchin’!

  26. Permalink to comment#

    Hey, good to see the new layout :) like it but specially good to see your approach for facing IE8 and lower limitations, all content is there, not bothered about fancy stuff on it. In exchange, web looks fabulous on tablet, smartphone fablet whatever…
    really like it! :)

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

    That’s an incredibly friendly thing to do, and even though it’s not (yet?) been something that has affected me, you deserve a shoutout for your consideration.

  28. Looks great, Chris, but the curves at the bottom of the post boxes don’t render the full width of the box. I’m on Safari 6.1.2. They look fine in Chrome. :\

    • I messed around a bit in Web Inspector, and changing the mobile-blogpost>footer to have margin-bottom: -15px !important; and height:15px; fixed it completely. Actually, now that I’m looking at it, it has to do with the flexible boxes. Since there’s a declared height on the footer, and the background is set to cover, the SVG isn’t scaling properly when the width is increased. Man, that’s a tough one.

    • It would be cool if you could define the height of a box in terms of its width via a ratio,

      width: 100%;
      height: width/5;
      

      Of course, you could do that with JS, with a listener for box width changes, but with so many boxes, that’s a lot of processing on window resizes.

  29. Craig King
    Permalink to comment#

    With everyone generally sounding so positive I wonder if I am viewing the wrong site. To me it feels plain and boring. The gradients also feel like a bit of a throwback to 5 or 6 years ago. The menu is still the worst part, although the tablet version seems nicer, mainly because it is better in line with the metro style of the rest of the design. Further to that the subscribe section in the sidebar looks like a codepen exercise more than a coherent part of the design. Technically very nice but doesn’t feel well integrated.

    Oh, and the hidden comments under a glowing bar seems like rather hard to find functionality. I actually first assumed it was the remains of a blocked ad.

    I am assuming the text overlapping at the bottom is a mistake and not part of the design: View

    As a final thought, I present one small suggestion, if only to make the menu feel more part of each page: View

    I genuinely hate to sound negative but I believe in giving honest feedback, especially since you clearly put a lot of work into it. But I feel such a great site has had better in the past and deserves better now.

  30. Cp
    Permalink to comment#

    I dig the new design. Simple, yet effective and pleasing. Below is a screenshot of one CSS bug I’ve noticed. A bunch of headers seem to be colliding with the content below them. I’m using Chrome 33.0.1750.152.

    http://cl.ly/image/3x2X2u0k1104

    CP

  31. Nice version :)
    Reminds me of version 8.

  32. Nathan Strumfeld
    Permalink to comment#

    Love the boldness and simplicity.
    I’m an HCI grad student in Chicago so I’ve gotten a ton of useful info from your site.

    One thing I noticed- on the Almanac page, the background gradates to black and the descriptor type is black so it seems to disappear. Maybe make that type something other than black?

    Thanks for all the resources!

  33. Speaking of the Gotham font, after a very long time in development, H&F now offers there fonts as webfonts, managed through Cloud.typography… we use Gotham where I work, at a hospital, for our branding so I was waiting patiently for it (pun intended).

  34. Simon
    Permalink to comment#

    Sorry Chris I appreciate the technical skill but the new err ‘design’ is awful.

  35. Bradley
    Permalink to comment#

    One thing that threw me off was search. I thought the magnifying glass was part of your new logo. The form field ‘underline’ approach was really unintuitive, and the magnifying glass didn’t have a pointer cursor so I didn’t realize it was interactive.

    • Mazurka
      Permalink to comment#

      I actually really like the new approach over v10 but it may need a label of some sort.

    • Rich
      Permalink to comment#

      Until I read this comment I didn’t realise that either.

      The rest of the site is ok, but the usability of that search box is a bit meh- There’s nothing to suggest that it’s a search box and as you said, the icon just looks like part of the site logo.

  36. Mazurka
    Permalink to comment#

    Appreciating some of the smaller UX improvements, especially the searach placement and style, that’s a big improvement over 10 if you ask me.

    It might be something wrong with my font set (although I don’t think so) but I’m getting faux italics on the body copy on this machine (windows7/chrome). The bolds may be faux as well but they are harder to tell and look pretty fine to me.

    Great work.

    • The font-stack here is “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, “DejaVu Sans”, “Bitstream Vera Sans”, “Liberation Sans”, Verdana, “Verdana Ref”, sans-serif.

      Lucida Sans Unicode doesn’t have bold or italic. Maybe it would be better to switch Lucida Sans and Lucida Sans Unicode.

      Off-topic: I usually don’t like it, when " or ' are automatically substituted by “, ”, ‘ or ’. Especially in code examples this generates errors. If they are substituted, at least they should be correct quotation marks (“↖wrong”, “↖right”).
      Is it intended that there’s no scrollbar in the comment field?

    • Mazurka
      Permalink to comment#

      Good catch Gerhard, since my machine doesn’t have Lucida Grande I’m defaulting to the next option lucida grand unicode instead of lucida grand (which is the third option and does have bold and italic in the set).

      Not sure why the unicode version is set as second option, didn’t notice that originally.

  37. josh
    Permalink to comment#

    looks great chris, feels like the old site, looks much better

  38. Qbin2001
    Permalink to comment#

    Windows 7/Firefox 27.0.1
    - No gradient on the headers.
    - No rounded font on the logo (Firefox blocks fonts from other domain without proper scripting/htaccess)

    Windows 7/Chrome 33, Opera 16

    All above ok.

    Windows 7/IE10

    No gradient on the headers.

  39. Marco
    Permalink to comment#

    Good design but I noticed (on Safari 7.0.2) that you have the same issue I used to have on a site I had. Note how your font changes its thickness when you hover over your logo. It has to do with transitions and/or opacity.

  40. Very cool, Chris; I like the color choices, fonts, gradients and layout. I use a Dell monitor turned on it’s side for my secondary screen though (which I use solely for the browser), and it seems a little too large overall (my screen displays 1024px wide). Definitely readable though :p

  41. Gilles FRANCOIS
    Permalink to comment#

    I think it looks good.
    What is really great about this new design si that it gave me an exemple of what to do with SVG. The tabs from the menu are pretty good looking. I think now, with SVG, I can shape almost anything I want on my pages.

    Regarding the fonts, I had some smoothing problem on the Ideal Sans, I still have some problems with the font in the tabs (it looks pixelated a bit) but I know it is a small bug on windows/chrome; and maybe we can brainstorm together to find a workaround !

    Anyway, I am also working on a redesign for my website and it causes me a lot of stress. So Chris, congratulations to you on the good job.

  42. Permalink to comment#

    Well done Chris, there are things to better still… but I like the new style!
    One important thing: the logo (*). Hurry in getting it back, I think it is an important brand issue.

  43. Permalink to comment#

    I feel a sense of sadness seeing V10 go, having seen it built in the lodge I felt attached to it. I seem to be in the minority of loving v10 as well.

    Whilst V11 will take some getting used to, we must remember that Chris is a leader in the web industry, he is one of those that SET the trends rather than follow them.

  44. Permalink to comment#

    I really like the clean and simple new design!

    The only thing I really miss is the orange *

    Also titles seam a bit overlapped or off in iPad, I don’t know if this is intentional.

    great work, thanks for sharing!

  45. Louis
    Permalink to comment#

    Love it!

  46. Permalink to comment#

    Really flawless Chris, keep up the good work man. Clean simple design.

  47. William
    Permalink to comment#

    Beautiful. Well done!

  48. Josh chunick
    Permalink to comment#

    I like the new look…. however, I was a bit freaked out when ‘XXX’ came up after hovering over the logo. I thought, “wow, some hackers redesigned your website – how nice of them – and have subtly linked you to some pr0n sites.”

    What is the XXX supposed to really reference?

    • Cp
      Permalink to comment#

      Haha, good catch. That is a bit odd… and slightly misleading – albeit, a fun effect. Three X’s definitely comes with some sorta stigma.

  49. EmC
    Permalink to comment#

    I like the new design, but I really miss the old search functionality within specific sections.

  50. Permalink to comment#

    Amazing work, I love it!

  51. Nice job Chris!

  52. Permalink to comment#

    It took me a little while to get used to the design. But now I love. Very simply, blocky, and childish. Which I this is great. I love the buttons too. Nice work.

  53. Daniel
    Permalink to comment#

    I think the site is excellent, it feels very responsive to me. It almost has an ‘app’ type feel to it – if that makes sense.

    Very refined and it has a look that makes it seem like a brother of CodePen in a way. Great work Chris. This new design will make me come and visit the site more than I have been recently.

  54. Permalink to comment#

    Chris, I have always been inspired by your ideas and v11 does not stop short. While many are nixing some of the changes you made, I feel the bigger thing everyone should realize is that you own this site, so should you not put your own ideas into it? I was taught from an early age by those I enjoy in the industry that yes, your viewers are important, but at the end of the day, it is still your site you own. The juices that flow from a designer are their own, and like artists with other mediums, not everyone will interpret the work the same way, and some will hate it. But this wonderful piece of art you have provided on this canvas Chris is taking my breath away. I feel refreshed and anew with ideas after hitting a stopping point and I thank you for that.

  55. Congratulations on the redesign Chris. I usually find black themes quite bold but you managed to make it very appealing.

    I think I like it better than v10, especially since it looks simpler. Way simpler. It’s been ages I’ve wondering about both the Gallery and Download sections; glad to see them finally out.

  56. Andrei Pham
    Permalink to comment#

    I like this version, but I loved v10. It’s a pity that such a wonderful design (the previous version, that is) had to be thrown away and forgotten.

  57. Permalink to comment#

    Very nice design, like it vey much.

    I found this on Chrome 33

  58. Djwebdroid
    Permalink to comment#

    Looks great on my windows phone!

    love the content …

    Thanks

  59. Love it. I’m a fan of the trend towards simple, it’s interesting how many people aren’t.

    Also, the history page is great. “If you can’t look back and wince then you’re not growing”

    Would you mind giving a ballpark idea of how many days work this redesign was?

  60. Great re-design, I am starting to design more website with large font and bold colors. Glad you haven’t dropped the snippet section. I love to have a poke around there for some great code.

    Are you working on version 12 yet?

  61. Maks Sherstobitow
    Permalink to comment#

    Good work! The resource becomes more simpler and gets a nice look.

  62. Great new design Chris, really SO much better than the previous v10. Awesome job mate!

    Sam

  63. Nour Akalay
    Permalink to comment#

    Really love the new design (nothing new here, liked the all).

    I see you changed your mind concerning body font and went back to custom font. How does this one compare in terms of performance?

    Will you update the post to talk about it?

  64. I’ll Will be honest I LOVE IT ! You are awesome Chris !

  65. claytron
    Permalink to comment#

    I like the new design, though each time I roll over the title and see “xxx” in orange I think of porn and sex. Not that that’s a bad thing.

  66. Chris
    Permalink to comment#

    I dislike the new design and applied some stylish-rules now. Reasons are:
    - too dark (!)
    - too big fonts (now I’m at 80% zoom level in browser and its okay)
    - too much spacing withing the elements
    - distracting “touch” of the h-elements with the blocks under them

    Its designed for mobiles, but leads to bad usability on desktops. Seriously: I wonder why so many ppl. speak about an AMAZING work here!?

    BTW: .shape-tab have a small gap below them (I’ve set height to 101% to fix this) and the box-shadow of the paper corners is buggy.

    • Nour Akalay
      Permalink to comment#

      You must be looking in Firefox because in Chrome it’s definitely not too big.

  67. I have decided not to leave a comment stating my opinion that v11 is the best so far.

  68. Federico
    Permalink to comment#

    I like this version !!! more readable and minimalistic.

    Background black fits very well, i like that the ads were removed

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".