What would you like to learn today?
Web Design Web Development iOS Development

Design v10

It's been just about a year since the v9 design. You know what that means! Redesign time! This is, most definitely, the biggest overhaul yet. Not that you won't recognize it. There is a fresh coat of paint, but all the old stuff is there.

The Kickstarter Made It Happen

When I struck off on my own, I knew I wanted to make a go at making CSS-Tricks more of a full time gig. Right away, redesigning the site toward that goal seemed like a good idea. But why do that hidden away in my room? I love the idea of working in public and that's exactly the kind of work CSS-Tricks is made from. So I thought I'd turn on my microphone and screencast the whole process. Then I'd make those videos available to purchase or subscribe to. To validate it was a good idea, I put up a Kickstarter.

It went pretty well :).

Now I'm coming through with my promise to the backers. The videos are available in a new area of the site called The Lodge of which Kickstarters will get access to and everyone else can purchase access to if you'd like.

Screenshot

If you're reading this anywhere other than css-tricks.com, I encourage you to jump over and look around. But here's a screenshot of the homepage for the feed readers:

This design and all previous ones are screenshot for posterity here.

See a problem with the design?

I'm going to try something new. I'd like it if you could open a new issue on an otherwise-blank GitHub repo when you find a bug or any other problem with the new design. The GitHub issue tracker is awesome and perfect for publicly tracking bugs.

Report Issue in Issue Tracker

Comments

For a long time I've had a system here of curating comments. It's a simple thing. Spam I delete. Not-very-useful comments I bury. Awesome comments I feature. You can read more about it.

In the v9 design, I never got around to a good style for buried comments. Featured comments got a gold star. In this new design buried comments are more obvious (they are squat and fade out). Featured comments have a yellow stripe across the top.

I'm not trying to be mean to people who's comments I bury, I'm trying to be respectful to everyone else who's time is being spent on my website. Comments like "Nice post!" often aren't actually spam, but also aren't useful to anyone. If I discourage those kind of posts by doing this, I'm OK with that.

New Stuff

The Lodge is the biggest new thing.

There are a few new Deals on the Deals page (if you have one to offer, hit me up). Not a lot of brand new stuff really. New content will be coming a lot faster now that the redesign is "done." I'll be finishing the Almanac for real, posting tons to the Gallery, shooting new screencasts, and blogging up a storm.

Illustrations

I think the new design is worth exploring just to see the custom header illustrations. Lovely work all around by Reagan Ray, Meg Hunt, John Neiner, Giovanni DiFeterici, Erica Sirotich, Nick Sirotich, and Alyssa Nassner.

Little Easter egg: hover over any custom header for about 5 seconds and a link to the illustrator will pop up.

It's Not Over

One of the beautiful parts about the web is that it's ever-changing. It doesn't have the finality of print design. I have a huge list of things I want to do on this site, from the tiny to the huge. Look forward to this design morphing over time. I'm sure it will be quite a bit different than it is today by the time v11 is a sparkle in my eye.

Comments

  1. Permalink to comment

    I love the new look. The functionality on my phone is great too. The way you conserve space by using a navigation button is very clean. I look forward to seeing what this becomes and also greatful for all the useful info you send everyone’s way

  2. Julian
    Permalink to comment

    I think you did great with the flat, greyscale scheme with the modules, it really separates them and makes the content really stand out.

    The font choices are similar to and make me nostalgic about design v8, when I first found this cool website. ;)

  3. Permalink to comment

    Nice redesign, very readable and clean.

    One observation I have is that, to my eye at least, at the breakpoint where your three column layout becomes a single column with hidden topnav, the webfonts become rather blurry. The smaller headlines down the page are quite hard to read.

    And a question: How did you determine the breakpoints? Were they based on device sizes, or did you let the design and line length decide when you broke to a new layout?

    I’m now inspired to go redesign my site which has been a very piecemeal process over the years but is sorely in need a a complete overhaul.

  4. love247
    Permalink to comment

    What did you do with the website design??? Im so sorry if this is gonna sound harsh, but it looks like old designs! Not beautiful at all.. horrible. The previous one was so much better
    I don’t want to browse it anymore :(

    • Permalink to comment

      To answer your question, you could sign up for the Lodge and watch the videos to see what Chris did with the design. ;)

    • Aimo
      Permalink to comment

      Wow, i don’t know what to say…
      it’s just like love247 said. Sorry for that, but you were always my personal god when i came to website design. I don’t know what i should call this new design, it’s not really ugly but it’s totally boring. It gives me the feeling that you get when visiting friends in a hospital: everything is too clean and dead. Totally unpersonal :(
      If i could return to v9, i’d switch back immediately :S
      The old theme was soo wonderful…

      And, most horrible thing: you killed the frog :’((

    • … Horrible? You don’t want to browse it anymore? Someone is being quite dramatic! Even if it isn’t your taste it is still palatable. I personally think it is nice, but even if I didn’t, there is no way this design is ‘bad’ enough to not want to browse. And ‘killing the frog’ (poster above) – You’re joking, right?

      I’m quite happy with the redesign and look forward to drawing inspiration from it!

    • I have to agree that the new design is boring, and kind of looks like a css template you’d get for free 5 years ago.

    • Gav
      Permalink to comment

      I agree fully with what you are saying – the previous version of this site was amazing! now it really is not great at all. Why was this change made at all? :(

    • Permalink to comment

      sorry I have to agree

    • Cold Bear
      Permalink to comment

      Concretement…

      The buttons look really cool with the 3d. Works fantastically on Safari 6. That’s an improvement in my opinion – maybe a fallback for slower browsers wouldn’t be bad.

      The graphics on top in every section are cool as well. That’s the personal and appealing part.

      Other than those I have to agree to this comment I’m answering. The v10 appears dull and not very “css-ish”.
      I’m sure there’s professional work behind this and it’s working great. However, I recommend releasing v10.1 really soon with improvements that give the user more personal connections with your site like the frog you had on v9.

      It’s soooo grey ;-(

    • Permalink to comment

      Sorry, but I’ll have to join this thread….

      The new homepage is not nearly as nice and inspiring as the previous one.

      Although, I have to say that the single article pages look better. especially the comments area.

    • Ivanhoe123
      Permalink to comment

      I thought exactly the same, no offense to the author :/

    • Danc
      Permalink to comment

      Hi Chris,

      You are always my guru, whenever I am looking for web design, CSS and WordPress solutions. But I think you are trying too hard for this new design. Font is the biggest issue here, I think. Thus, I have to agree with some of the guys’ comments here.

  5. sophy
    Permalink to comment

    Great Design….. I love this theme

  6. Where’s the frog ? :)

    It’s interesting to see how this site evolves. So, keep it up Chris!

  7. neoprabhu
    Permalink to comment

    Kind of Metro + 3d

  8. Aaron Stone
    Permalink to comment

    The new website is great! Although on Chrome here, it’s a bit slow, and the ’3D’ effect with the text boxes is not so three-dimensional. Was it meant to be like that? Border really don’t make for a good 3D effect, you know.

    But the website is a pleasant refresh nonetheless, but it’s really slow (typing this comment especially!)

  9. Permalink to comment

    Great work! I love the notification in the footer best.

  10. Wow, this is different. It feels a hell of a lot more cleaner. I like the asterisk at the bottom with your photo in it.

    I like it, but it may take some time to readjust. lol.

  11. Joe
    Permalink to comment

    How do we purchase access to The Lodge if we didn’t pay during the kickstart project?
    Thanks!

  12. Permalink to comment

    Love the new design, looks amazing well done!

    only comment is the snippets section (which I love by the way) the menu on the left should float down the page with you as you scroll so its always on the screen as without it the page looks a little empty.

  13. This is great! I like all the subtle details.

  14. Permalink to comment

    I would just remove the grey border top / left / right from around the navigation tabs. Personally. Otherwise it is growing on me.

    • That’s a thought. I’ll give it a test locally and see if I like it more. It would be slightly larger click/tap targets which is always good. I kinda like now how it lines up with the edge of the modules.

  15. Permalink to comment

    I really don’t like this new theme :(
    It’s a bit too plain and basic and the blur/shadow that separates the buttons on the main nav is a bit cheap looking.
    The previous design was far more adventurous and fun to browse, which made it stick out from other sites. Now it seems bland and boring.
    I don’t want to come across harshly but this is more of a downgrade than an upgrade.

  16. Julian
    Permalink to comment

    Version 9 design is still found on article demos. The header that says “CSS-Tricks Example” is still v9 styled.

  17. Shit just gone real !

    You did an amazing job there Chris. I don’t like every single thing, but it’s new for sure, and it pleases me. I can’t tell now if I prefere the new or the old design, but I’m sure you improved many many things in this one.
    I can’t wait to see the lodge, really.

    Anyway, keep up the good (awesome ?) work Chris. :)

  18. Permalink to comment

    Sorry, but in my Firefox 15 this site looks awfull… Will post the issues to the github… Anyway I liked the V9 much more!

  19. amidude
    Permalink to comment

    The nav doesn’t show up for me in FF 15. “k, 9, Q,p” shows up in the top row. It’s definitely a redesign. I’m not sure what to think of it just yet.

  20. José Pedro
    Permalink to comment

    For some reason, in Firefox 15 (pt-PT localization) the words in both the posts and comments are being broken at unusual points. They don’t have dashes indicating they continue on the next line, and the point where they are broken does not stick with proper grammatical rules.

    Though the comment textbox is breaking them correctly and using dashes to indicate the word continues in the next line.

    • Paulie_D
      Permalink to comment

      Yeah…there’s definitely an issue with the icon-font if FF15

    • I just found the same thing on a site I’m building last night. Seems FFOX is now doing something bizarre with break-word:break-all; If you remove it, it hyphenates all over. I’m still working on it.

      (I think my issue may be related to display:table-cell; along with the break-word. A buggy interaction of some sort. FFOX – the new IE!)

    • KInd of a bummer since it works great in WebKit right now. I’m gonna pull it out though, lots of reports of this being a problem.

    • José Pedro
      Permalink to comment

      Isn’t there a JavaScript library, Hyphenate.js or similar, that does the intended goal without breaking other browsers? That would be a feasible alternative.

  21. nobody
    Permalink to comment

    Actually, this design really looks weird. the “logo” on orange square is just horrible.. 3D buttons are not that horrible, but still ugly. V9.2 was awesome

  22. wowowoowowow amazing design chris keep up :D

  23. Permalink to comment

    Congratulations on the new site design. I think it looks great!

  24. Ty
    Permalink to comment

    Really nice, great work Chris! I just have 1 quick question (forgive me if im jumping the gun, I know this just launched today) I backed your Kickstarter, and just wanted to know how to get Lodge login info.

  25. Permalink to comment

    Somehow i liked the previous version of the site more.. seeing that version it felt like i m visiting a website from css genius!

  26. I’m sorry, I don’t mean to cause offence, but the blue you’re using for the hyperlinks and the buttons? It’s the shade of blue used for those things you dry your hands with in lavatories, please change!

    Also the bars with categorisations on the homepage feel wrong, theyre too small, lack sufficient padding and they don’t align with anything.

    I do love the little animation on the footer links though

  27. Looks great Chris! I do miss the bright colors on the nav rollover, but that’s just me, awesome job man – b

  28. Tom
    Permalink to comment

    Sorry Chris,

    this site looks horrible. That pseudo “3D” effect is ugly – especially the form fields.
    Readability/Reading experience -> fail.

    CSS-Tricks was one of my favorite site, but now …

    • Permalink to comment

      Yeah! Tom you are right, when i first looked at it, I found that some put a fire onto css-tricks.com, because everything is grey, even navigation are with grey dark gradients.

  29. Permalink to comment

    Stunning! Love it.

  30. subash pathak
    Permalink to comment

    Awesome design chris,
    you have done awesome
    but few things i really don’t like new forms and legecy syntax for unprefixed linear gradients.
    :-)
    but the design is more then awesome so you have to take care because it may cause over exposure to pure awesomeness

  31. The footer is amazing; I didn’t think anything could be better than the last one, but it is.
    The illustrations are great too (although I think the later ones don’t fit the layered/single-colour feel of the site). However I find that the nav is slightly weird, and that the header is missing the logo.
    Otherwise: great work, and I never thought you’d do it so fast. I love the site.

  32. @Chris

    hi,

    backed you up on KickStarter for $25
    when we backers will get email / update with login credentials ?

    I want to sign up :)
    https://css-tricks.com/lodge/signup/

    but go directly in the Lodge without new payment

    • You should have gotten emails about access from Kickstarter by now. If you haven’t hit me up from the contact link in the footer.

  33. Tom
    Permalink to comment

    I have FF 15.0 and I immedialt noticed two things:
    -The font icons in the main menu aren’t working: I see the characters k, 9, Q, p and so on…
    -Words are broken in the middle!

  34. Covarr
    Permalink to comment

    Imagine my surprise when I’m looking through my RSS feeds in the morning, and I see myself being quoted. XD

    That aside, I’m liking this redesign. One thing that really caught my attention is the navigation bar at the top. It shows off doing something correctly that’s very easy to get wrong: the timing on the hover animation. This is fast enough that it still feels immediate, but slow enough that you can still see that it’s animated. One common mistake I see is making it too slow, so that the animation is the center of attention. A 3-second fade may seem cool at first, but can make it difficult to see what’s selected when you move your mouse from one item to another. So good work on that.

  35. Permalink to comment

    Interesting how the world of web design is moving away from Apple-style realistic lighting to MS-inspired flat colour. The former is beginning to look really quite passe. Interesting times.

  36. Filipe
    Permalink to comment

    I really don’t like it the old design was so much better. Not sure what you were thinking when you redesigned it. Can’t wait for version 11

  37. Gerry
    Permalink to comment

    Im sorry but this redesign is a complete disaster…. anyone that contributed any money to this through kickstarter should be refunded immediately

    • For anyone feeling this way (who isn’t just a troll but a real person with real feelings):

      1. Give it a little time. There is a LOT going on in this design. True feelings about (anything) often take a little time to develop. The fact that Gerry here was able to find the comment box and easily voice his opinion is testament to the design not being a “disaster.” Disastrous designs don’t allow users to easily accomplish their goals.

      2. In The Lodge area of the site, there are over 150 screencasts detailing the redesign process of this site. There are real, empirical, numbers-based goals for this site. Some of them will take time to prove and some of them are already proven. Design is more than gut feelings about aesthetics, it’s about accomplishing real goals. All that is laid out in those videos.

    • Gerry, you’re talking rubbish. Like anything new it takes a little bit of getting used to, but nobody can deny the amount of work, planning, thoughts and considerations that have clearly gone into the design.

      Additionally – the Kickstarter wasn’t really for the redesign, I signed up to the Kickstart and donated $100 bucks to say thanks to Chris for making me a better front end developer and also because of the upcoming learning materials that will be worth 10 fold what I donated.

      In summation – don’t disparage and write off someone else’s work – especially if you’re not going to pinpoint a problem specifically or offer a viable alternative.

    • Filipe
      Permalink to comment

      40 hours of tutorials to explain how one website is done is a all lot. I think it’s great that you are doing all that but I think you should focus more in what you use to do like explaining new ways of coding specially with html5 and css3 that are now been used . What about canvas??? i have learn a lot reading your posts and even watched the tutorial you did on lynda.com which was great. I also like your boo about WordPress. Bottom line I think most of us were expecting something completely different than what you did I think that’s why we are so disappointed. I just hope you’ll go back to teaching us about the latest out there. Thanks for working so hard for us.

    • Permalink to comment

      I think technically the website is fantastic, but from a design point of view its a fairly substantial step backwards in my opinion.

      On larger screens its a little cluttered to be honest on the home page and although the illustartations are great, I’m not entirly sure why they are on the website, they just don’t fit with the look and feel of everything else. Each individual section almost feels like a new website.

      I agree change isn’t always easy, but I think on this occasion the design is off and could do with a little work to be honest. It kind of has a feel of a developer who designed the website, if you get what I mean.

  38. Permalink to comment

    WHERE’S THE FROG?!

  39. Hugo Giraudel
    Permalink to comment

    So, I took some time to go on and there on the site, looking at almost every section more or less closely in order to have a more precise idea on this whole redesign thing.

    The header looks pretty poor in my opinion. This orange square on the top left corner is a bit flat, and the menu is too simple I guess (ironically, the shadow on the nav links is a bit rough). It misses the eternal * logo on the top part of the site. The v9 header was awesome, this one looks kind of cheap in comparison.

    The footer is awesome, really. This centered pictured is absolutely great, and the hover effect on links is amazing. The bottom part of the footer with links to CodePen and ShopTalk is very sweet as well : dark and discret. Really nice work on the footer.

    The main page is quiet good, but the blog posts are not attractive enough. Or maybe the Hot links blocks are too disturbing, I don’t know. Swapping colors (orange and red) could do the trick, it could worth a try.
    Bad thing in my opinion : no more comments counter / link to comments on blog post blocks. I liked the comments counter on the previous design to :
    - know if there is a new comment
    - directly go to comments section
    Speaking of comments, I think they look way better now. They are clean and nice, I like it very much this way.

    The forum looks particularly good on v10. The old version was kind of messy. But now this is great, with the exception of a few minor bugs (which will probably be fixed in a few days).

    The snippets page is very beautiful, so colorful. The v9 design for the snippets was a total mess. We can now find everything we want, it’s clean and well ordered.

    The gallery is like super heavy. It takes almost 2 or 3 seconds to load some content. At least, it looks great ! I think it’s just a matter of performance, so I’m sure you will figure out how to deal with it.

    Videos are pretty much the same as in v9, so not much to say about it. There is a little order bug in page 4 (Delta), but no big deal.

    Same for Demos, it’s quite the same. It looks really well ordered, so I guess it’s very nice this way. I have never been much in this section of the site anyway.

    The new design for the almaniac is really funny and innovative, I like it. But what the hell is this font for the letters ? It looks really odd in this retro design to see a handwritten font.

    About the “3D effect”, I don’t know what to think. It looks retro, and it does it well, so I guess it is good. But in comparison to the old design, it looks a bit elementary, especially on buttons.
    Plus, I don’t think it goes very well with the footer which is pretty awesome (texture, realistic shadows, slight gradients, etc.). However I think it relies on small details, so maybe a few lines of CSS could probably fix/improve the whole 3D thing.

    In conclusion, I’d say there are good and bad things in all this stuff. The redesign is clean, for sure (no ugly gaps, beautiful images, nice color chart, etc.), but some things do not fit well in it.
    Anyway, we find everything we want, the nav is clear and intuitive, so I guess this is the most important thing. As far as I can tell, I don’t come here for the design but for the blog posts / snippets / screencasts, and I think it’s the same for 95% of the folks out there.

    So please, to all of you who can’t stand the new design, give it some time, it will probably get better, and if not, whatever, we can get used of everything. ;)
    By the way, congratulations on the whole design process Chris, we will help you making it better. :)

    • Looks like there is a little bug with name / email on comments. It happens to display the email instead of the name, without any link to the provided website URL.

      Odd.

    • Joshua Hibbert
      Permalink to comment

      Nailed it, Hugo. Also, the typography still needs a fair whack of work. But I have confidence that it will improve with time. This is a huge load of work, and Chris can’t get it all done straight away! I’m pleased that he shipped, even though there are some people being very negative about it.

      Interesting fact: I had to scroll back up the page to reply to your comment (maybe that could get fixed)!

      I’m still undecided on the header illustrations. Every single one of them looks awesome, but I’m not sure how they tie in with everything else. It’s too early to make a decision, as with anything, I’m sure they will grow on me with time :)

  40. Ian
    Permalink to comment

    “Level Based Learning”

    Seems like this module should be a top-level priority instead of 1/2 way down the page buried next to ads…

    • I agree… once more time can be spent making browsing those areas more compelling. Right now it’s just a list of articles in random-ish order. While a little useful, it’s not something I want to promote heavily yet.

  41. EstherH
    Permalink to comment

    i think someone mentioned this already but i;ll say it again… the icon fonts not working in FF (i’m still on 14). navigation links looking very odd…

    • EstherH
      Permalink to comment

      sorry, one more thing, the links in the footer are super bland in FF. just checked it out now in chrome and they are very cool…
      other than that… i’m sure there’s lots to learn about the process, but i’m not so fond of this design…

  42. Erik
    Permalink to comment

    Criticism comes easier than craftsmanship…Gerry

    Dope site! Some people will love it, some people will hate it, but in the end everyone is learning something. Thanks Chris.

  43. Dimitrie
    Permalink to comment

    congrats on your redesign. I am wondering what were your initial goals, except for making it a full time job? I am very happy to see the new design, now will go browsing around if you dont mind.

  44. Melindrea
    Permalink to comment

    I find the retro look very interesting. The font you’re using, though, reminds me a bit too much about what Notepad looks like on a wine installation.

    Are there supposed to be random letters/numbers as icons for the menu? I don’t object to them, but if there is not, it’s broken on Chrome/Ubuntu 10.04.

    Also, it appears that the menu just… doesn’t work when the window is smaller, IE when it turns into the Navigation ‘n’ Search.

    • Melindrea
      Permalink to comment

      …and since I think I might’ve buried the positive bits (which wasn’t my intention), I like the look =)

  45. I hate this new version. It makes me sick. v9 was way much better.

    • Are you just being dramatic? If not, in what way does it make you sick? Do you have an illness or disability that brings about nausea when you see certain things on screens? For instance, epilepsy? I’d be interested to know if there is something in this design that induces actual illness.

  46. Ultra awesome. I love the new site. Really good job Chris!

  47. Permalink to comment

    Beautiful! I really liked the old design, but this is a worthy successor.

Leave a Comment