Grow your CSS skills. Land your dream job.

Design Refresh

Published by Chris Coyier

It was time for another design refresh! The best part about this one, for me, was that all the work I did last time made this one very easy to do.

As usual, it's not extremely drastic. Evolutionary, not revolutionary. The old one wasn't bad, I just felt playing and improving where I could.

Feel free to critique. Good or bad, but try to keep it constructive.

Goals I tried to achieve:

  • The main navigation feels more connected to the site again. This was important to me as it was something that got a bit lost in the last design.
  • I wanted to emphasize the community aspect of the site. The focused navigation helps with that and the new tag line brings it home.
  • I liked the typography before, so it's exactly the same.
  • The crazy outer space stuff was fun for a little while but it wasn't very "me", so it's gone in favor of a cleaner style.
  • I still got to use texture, which I love.
  • I never liked having the standard footer in the forums area. I like my "about the author" section, but I'm not the "author" of the forums, you guys are. It didn't fit, so now the forums has a trimmed down simplified footer.
  • The whole layout is centered again. It never bothered me being left, but that was the #1 complaint last time.

Problems / Critiques so far

  • What the heck is that thing above the search bar?
    It is my (perhaps half-baked) attempt at linking the words "Web Design Community" with the search bar. I wanted to make clear that this entire site is searchable with that box, which is extremely useful I think. I'll likely play with different ideas up there.
  • What's with all the white space in the sidebar?
    I feel like this is a classic problem on many sites. Some pages are really really tall, and some are short. Tall pages have a lot of empty space at the bottom of the sidebar. One idea I had was to measure the height of the page, and if it was over a certain height, append some extra content to the sidebar to fill out that space with JavaScript. Might be do-able.... But what about posts with 50 comments? That's just too much space. I'm not sure there is a perfect solution for this (so far, anyway).

To come*:

  • Clean up the styling of the Forums, make it nicer
  • Bring Twitter back into it
  • Bring some friend links back into it
  • Bring Script & Style links back into it
  • New button style

* I have ideas for all of this stuff and it shall be coming soon!

For Posterity:

New:

Old:

Comments

  1. Permalink to comment#

    I really like the new design, cleaner and simple, congrats.

    Good work Chris !

  2. really nice design chris, oh and by the way you changed the link to “Lost your password” in AMSU. good to see that too :)

  3. Permalink to comment#

    Nice work Chris.

  4. I thought the thing above the search bar was supposed to make the search look like a rear view mirror. Anyway, nice job with the redesign.

    • Permalink to comment#

      Agreed. The box around the search-input is somewhat attention-whoring. I immediately saw it because it stood out, but I’m not sure that’s what you wanted, Chris? Else, the tabs is a sweet improvement!

  5. Léo Renaud-Allaire
    Permalink to comment#

    English isn’t my first language but, “Goals I tried to archive” ? Anyway, great makeover, really like the new design.

  6. I like the blue top bar of the old. If you combined the two, I think it would look good.
    Replace the orange fade in the new with the blue color from the first. Then change TRICKS back to orange.

    Just in case you wanted a coders opinion.

  7. xbakesx
    Permalink to comment#

    I really like your new design.

    When you do these redesigns, do you keep the same markup and swap out the styles? Or do you tend to change some of the markup to accommodate your new styles?

    If it’s the former, you should consider putting in a spot to swap styles out like http://www.csszengarden.com/ but just for you and your old styles. It’d be a fun exercise.

    • There are enough markup changes that a simple CSS switch wouldn’t be possible. Although, since it’s WordPress, I’m sure there is a way to be able to switch themes on the fly for users. It’s something I may look into doing in the future, pretty cool idea =)

    • redouane
      Permalink to comment#

      Hello Chris, I notice that your twitter is not there.

  8. Permalink to comment#

    Getting better. One thing: can you hide comments for print media? When I print a tut, I don’t want ten million pages just because of comments. Other people might like it, though, so it’s a matter of opinion.

  9. Permalink to comment#

    I love the new design Chris, I really love the footer – its awesome.

  10. Zandy
    Permalink to comment#

    I think the new site layout is lovely. Very fresh and bright, but not annoyingly hip. It has a nice mellow vibe. I like that you’ve moved the search bar up. It’s so much easier to find. I did not get the “link” between the search bar and the web community tag, I’m afraid. But I like that it’s there. I’ll be interested to see what you come up with there. I like the sidebar. White space doesn’t bother me. I like the ribbon headers in the sidebar, also. Overall very nice.

  11. Sgobin
    Permalink to comment#

    Good redesign. Let me just comment too things: I think a light shade in the side bar will help in the contrast with the main content and you will could use less “shadow” (this is a personal taste). The second is about the search bar, maybe a thin stroke? I’m using Safari 4 Beta and it display rought edges in the rounded corner. Maybe you could use a “inverted” tab to pop-up the search bar if it was your intent.

    Anyway this is a great site with really great content. Thanks to your tutorials I lost my “fear” to template to wordpress.

    P.S. As you can see english is not my primary language, so I hope you could undestant. :)

  12. Brian
    Permalink to comment#

    Chris I really Like the footer and new navigation. I didn’t like the hover effects before but I love the color choices!!

  13. Cool Chris! I like it, especially the sidebar. :)

  14. Permalink to comment#

    Really nice. Definitely the best design so far.

    Two suggestions:

    Get rid of that big black border around the search box – it’s really jarring and doesn’t match anything else on the site. I don’t think you need any border there, personally.
    Make the sidebar background a light grey or something to separate it more from the white content area.

  15. Mike
    Permalink to comment#

    When I select text on this page the selection is orange. How to achieve such behavior?

    Thanks for sharing…

    nice design.

    • Permalink to comment#

      -moz-selection::
      -webkit-selection::

    • Permalink to comment#

      ::selection {
      background: #B13E2C;
      color: white; /* Safari */ }

      ::-moz-selection {
      background: #B13E2C;
      color: white; /* Firefox */ }

  16. Det look of the new design is great, but I miss the old footer. It was way cooler.

    Mathias
    Oslo/Norway

  17. Very cool. The h3 is the sidebar is my favorite part

  18. Permalink to comment#

    I like it, especially the 3D headers in the sidebar. Good work!

    The only thing I absolutely do not like is that big, nasty black border around the search box. It looks way out of place in the rest of the nice, clean layout.

  19. Permalink to comment#

    Love the site refresh!

    Suggestion for the Search box: Maybe you could use a chain hook like this one where the Search box would be “held up” by the community area.

    My $0.02

    Rock on!

    • Ralph
      Permalink to comment#

      Exactly my thoughst too on the chain hook. LOL.
      But much props Chris, great job overall!

  20. TeMc
    Permalink to comment#

    Lots of great improvements!

    I certainly like the overall thing over the old design.

    However a few things from me:

    The sidebar, as soon as it’s content ends is reallty taking stealing too much attention (see here: http://bit.ly/css-tricks-a001 ), and at the same time also too ‘white’.

    A texture in the sidebar, either entirely, or only after it’s content end (an extra div, before the end of the sidebar, and it’s height is automaticly the height of everything between end of sidebar’s content, and end of the sidebar, what/ever)

    Or better, make the bottom of the sidebar -not- included in the footer-bg-image, but let it be a seperate image, this way you can attach it to the bottom of the sidebar, and when it’s over the footer, then it’ll look as now, and if the sidebar stops earlier, the footer won’t show the sidebar.

    (I’m not sure if the latter is semanticly possible, that’s up to you !)

    For the rest..

    It’s great ! I like it very much. This design is clear, simple, clean and breathing.

    -
    TEM Corner

  21. Great design Chris!

    But, I see in the top-right corner the text “A WEB DESIGN COMMUNITY curated by Chris Coyier”

    Curated needs to be created.. Or is my english so bad, hehe?

  22. Nile
    Permalink to comment#

    I liked the other one better, but this one is great. Thanks for posting tutorials, and spending time to record video tutorials for free! You rock!

  23. Maxwell
    Permalink to comment#

    Yea Chris, I really like it. I was a fan of the space textures but that IS me and I get it not really being YOU..

    Maybe it would be cool to have some sort of Twitter Feed in the empty sidebar space? I dont know how realistic that is haha

    Overall looks great though ! Good work :)

  24. I like it, chris I twitterd you so…. but….

    what about making the boards consistent with the main site, after all it is a major part of the site… as in colour scheme, change the blue to nearer the main site colours?

  25. Great, but the search field looks very… ugly. :/

  26. Permalink to comment#

    I like the new design! The only thing that puts me off is the color scheme… I love orange and brown.. but when they are combined it makes me think of A&W Fast Food Restaurants :P

  27. Runa
    Permalink to comment#

    Chris, you have killed the wonderful underwater footer! Grrrrrrrrrrrr.
    Runa
    PS: Can I have it?

  28. Samuel
    Permalink to comment#

    Cleaner, but the older one was a bit more memorable….Seemed a bit more personal. Also, i agree with the negative comments on the Search Bar (too much going on)…sorry!

  29. Pete
    Permalink to comment#

    I like the new look, nice with change.
    Border around search isn’t to my flavor though.

  30. Hi Chris,

    I have never seen such a beautiful 3-D unique design of a website… this is really great. The sidebar is simply amazing, wow !!! great stuff.

    I used to be a developer back in 1992-93… and after long time came back to software QA in 2004… started blogging recently.

  31. redouane
    Permalink to comment#

    Hello Chris, This new design is as good as the old one but I noticed that you’ve deleted your twitter. Why ? Also I like the color. I think it much with your other projects. How we can access to your twitter?

  32. Chris I see it mentioned a few times already in the comments, but adding some color or a texture in the sidebar might help. You could wrap all the sidebar content in a div to keep it on a white background and maybe add a light texture to the sidebar itself so it only shows after the content runs out.

    Not a perfect solution, but it would add more visual interest to the space. Might look better in my head than on the page. Worth trying though if you haven’t yet. Otherwise perhaps ending the shadow where the content ends. The shadow seems a little distracting and all whitespace might work better.

    Great job on the redisign. I always liked the old design and now I’ll like the new. It’s still easily recognizable as you, but change is good.

  33. Permalink to comment#

    The new design is extremely pretty. Cleaner and easier on my eyes at least.

    Your design skills are impressive! Maybe someday I’ll be this good

    Cheers!

  34. Sketchy
    Permalink to comment#

    Part-time lurker here…I’m trying to create a personal theme for WordPress myself, and your site, in many ways is an inspiration.
    Like the new design, really liked the old one. It had more texture, so looked less “clinical”, in a good way, if you know what I mean. But I’m a complete design newbie, so don’t mind me. ;)
    Also, what happened to “Fade is the new Hover” with the nav?

  35. icetrix
    Permalink to comment#

    Briljant… really, I am just starting with Webdesign (17 now) and really enjoy it.
    Your most inspiring whas WordPress as CMS… really a nice one.

    Starting atm with a Portfolio site.

    I also have a question regarding wordpress… but not going to ask here lol^^.

  36. I like the header of the new one, but the background and sidebar were better in the previous iteration. The new footers not bad either.

  37. Your killing it man. Love the introduction of the burnt orange to your color scheme. And your pixelated logo in the footer is a nice touch. Honestly, much better than the UFO. I didn’t really see the connection there in your last design. :) Keep the good work rolling.

  38. Matt
    Permalink to comment#

    I like the new design, but, could you possibly just add a texture to the sidebar, just to make it not look so bland?

  39. Good Work! We always follow the articles that you are wonderful! Thank you!

  40. Permalink to comment#

    Refresh looks great Chris! My only criticism is the search box: most people expect the search to be in the header of the site anyway. Lots of thought has gone into this – I especially like the messages above the main navigation as you hover over the links. Everything appears to fit a lot better this time around, with a common look/feel. Nice one!

  41. I like the new design. Keep up the great work!

  42. Permalink to comment#

    nice… design.
    but, design search engine not enough good.

  43. I’m liking the new design, Chris. The biggest thing I like about the new display is the center alignment. I happen to think the sidebar looks fine, though it can look a bit strange on the posts with many comments. All things considered, it’s an improvement!

  44. I really like the new design. Keep the good work !! :)

  45. Ben Lacey
    Permalink to comment#

    Hey
    I think the side bar with the sponsors looked nicer in the old version …
    I have no idea what you were thinking with the box shadow on the items!

    The old site was brilliant!
    If it’s not broke … don’t fix it …

    Not too sure about the pixelated star at the bottom .. that kinda looks takky..
    Like the footer without the image – looks better than the original site!

    I prefer the header in the new version – its smaller, still has the logo and important info in it.

    Love your podcast videos! They have helped me a lot! Keep up the good work!

  46. Permalink to comment#

    Love the new design. Especially the text that you pull up with jQuery for the nav.

    About the question someone asked, “What the heck is that thing above the search bar?“. I think that they were talking about the grey colored concave rectangular shape that is centered on the rounded black ‘box’ that appears to be around the search box. It looked to me as if you had the orange texture tiled in the background and had reached an end that wasn’t suppose to show, but upon looking at the background image alone proved that theory wrong. It was a little distracting, but all in all the new design is great.

  47. Great work. Definitely improvement on an already great design.

  48. Eduardo
    Permalink to comment#

    I liked the simplicity, but the font is a bit small I think. I love the font-size of abduzeedo, and I think you could do something similar.

    take care ;)

  49. Needs to be cornified.

  50. Runa
    Permalink to comment#

    Let’s come back to the footer, Chris! I’d like the Chris-picture being more colorful. The greyscale doesn’t really fit to its warm surrounding.

  51. Matt
    Permalink to comment#

    I like this new design, much more clean. I love the white space. The thing that bothers me the most is the thick black border around the search bar, it is a bit distracting and doesn’t match the site too well. I think if you were to either make it a thin black, or gray, line it would be alot less attention grabbing.

  52. Permalink to comment#

    You have some weird conflicting perspectives and shadows going on in the sidebar.

  53. nice changes, i like it very much :-)

  54. Loving the new theme, colors are really punchy and vibrant. The 3d elements in the sidebar however need a bit of work (maybe a color change) and a bit of tweaking in terms of angles.

  55. Permalink to comment#

    That looks like a coffee stain to me :) I think you did a great job! The new design is a big improvement over the old one . The only thing that bothers me, if I may say yo, is that black thick rounded border around the search. It looks almost as an ellipse and it just doesn’t fit in the whole concept. I think that area can be significantly improved.

  56. Permalink to comment#

    I wasn’t going to comment, but this is a pretty slick re-design. Props;

  57. Hal8
    Permalink to comment#

    Really like the refresh and i really like the nav and agree with what you said about it. Love this site :)

  58. Gavin Steele
    Permalink to comment#

    Yeah I think you have done a great job, from what I hear designing your own site can be the longest and hardest design of all?

    Just a comment on the 3d flags? on the side bar (Featured articles and Poll) I think they are a little deep. I think I would make the left hand side (Grey) a little thinner. I think they look like they are popping out a little to much to the right.

    A great redesign!

  59. KrazyCeltic
    Permalink to comment#

    The new layout is an improvement in color, navigation position, and overall layout. The feature that immediately caught my eye was the black line encircling the search box, but it did not catch my eye in a good way. I’d be interested to see if a semi-transparent line like the shape connecting the search box to “A Web Design Community” would be more visually appealing, while still yielding some weight to the search area.

  60. Permalink to comment#

    Hi Chris,

    I checked your CSS and found this “grow up” technique, what is this? And can you teach us that?

  61. Great re-design Chris. I love it.

  62. Excellent work. Much cleaner, but I will miss that flying saucer.

  63. I like this design a lot more. It just looks cleaner and more refined. Well done sir!

  64. Steve
    Permalink to comment#

    Looks like you will get tired soon with this layout and you will change it again. The combination of sidebar sharp edges with all round things from the header will trigger this decision i am sure… (i know your in loved with those 3D looking “somethings” today but you will get over it)
    Anyway, it is clean and nice.

  65. I like it for the most part. The color scheme, the black on burnt orange looks rich and the navigation is clean. I’ll have to chime in with the others who are second guessing the sidebar design. I like the 3-D looking headings, although I’m not sure they exactly fit with the rest of it. Good idea about extending the sidebar content dynamically, but it just needs something, not sure what. You ‘da man though!

  66. Ethan
    Permalink to comment#

    Very cool! I like the wmd editor.

  67. Hi Chris, very nice theme, simple is the best, you could put for the 5 depht reply link to display none, so it does not show the div.

    ol.commentlist li ul.children li.depth-5 .reply {display:none;}

    again, i like your theme a lot, olso the videos, i’m a fan :) .

    ps: sory for my englIsh…

  68. Permalink to comment#

    I like it! its cleaner, thats the way things are going now. More focus on content over elaborate styles.

    Chris why you don’t use gravatars?

  69. Permalink to comment#

    Woops questioned too soon, I see you do use gravatars.

  70. like it! its cleaner, thats the way things are going now. More focus on content over elaborate styles.

    Chris why you don’t use gravatars?

  71. Alex
    Permalink to comment#

    Hi, I like the new design and it looks good how the side bar flows into the footer. Also could you do a screen cast or just an online info about how the old links would animate when you put your mouse over them, and also a bit about JavaScript.
    Good design though and it does look more sleek!

    • Alex
      Permalink to comment#

      P.S. How do you do the effect with the text appearing when you hover you mouse over the links/images…

  72. Chris, it’s absolutely awesome! I like the title you’ve added as well. “A Web Design Community curated by Chris Coyier”. This site’s really been amazing over the last year I’ve been following it.

    When did you start CSS-Tricks?

    Keep up the awesome / generous work!
    -Brian Long

  73. Permalink to comment#

    Way better. That old background image was truly horrible — I’m glad to see it gone.

    I’m not a bit fan of the empty drop shadow box to the right on long pages though.

    Great job!

  74. Ryan T.
    Permalink to comment#

    Hi Chris, I like the redesign. It gives a more professional elegant look.

    Two things I noticed:

    1. The help text that shows upon hover on the tabs should be centered and wrapped so it is directly on top of the tab.

    2. The rounded corners around the search box do not look clean. I see some jags in the corners. If you can remove the google search box and just have the rounder corners , I think it will look better. Possibly use a large font in the search box.

  75. Sathish
    Permalink to comment#

    Great redesign….

    The only thing I hate is the search outline :D I saw the different layout for CSS-Tricks in my safari topsites page. I instantly recognized, something is changed becoz of the search bar outline. Other than that everything is great :)

  76. Permalink to comment#

    Nice design, but why that black circle around search form?

  77. Russ
    Permalink to comment#

    I like the new design (but have a few nit-picky critiques). The majority of the design uses nice crisp edges. The tabs use a subtle rounded edge and the comments use the same subtle rounded edge as the tabs. All good for me. What I don’t like is the mix of severely rounded edges used in the right column and the search (and even in the comment editor bar). I would probably make these square and crisp like the rest of the site or use the same subtle rounded edges as the tabs and comments. I realize the radius is probably the same used in the previous design, but that design had more of a rounded feel to me and it worked better in that case (IMHO).

    Regardless… I’ll still continue to visit your site religiously because your content is fantastic. Keep up the great work!

  78. Permalink to comment#

    I like it, a lot neater and more crisp feel to it. Great job, like it a lot better than the previous.

  79. Nice. It has more contrast.
    By the way – the mouse over text for the RSS feed shows 0 as the number of subscribers.

  80. Danc Chan
    Permalink to comment#

    What a long wait. I have been waiting for this opportunity to say something on the new look and feel (design) of your website, since the day I saw it changed. I really like this one. Clean, professional and easy to view. I don’t think the empty bottom navigation bar is a real matter. You don’t need to purposely fill in the empty space to make it look complete, Chris. Less is more, agree? Anyway, well done. Keep the good work, my CSS guru. :)

  81. In a word, WOW. Much sleeker design IMO, the tabs are much improved, and an awesome footer. The ads look out of place, but we can’t really avoid that, can we. All in all, well done.

  82. No Twitter?! I love your posts on there, and I’m sure other people would love to follow.

    Also, I love everything, very cool. But I don’t care for the Black, 10px stroke on the search box. I wasn’t sure if my Firefox browser was reading that properly since it stands out from the rest of the design. lol.

    Cheers bro.

  83. Gustavo
    Permalink to comment#

    Chris,
    I like the new redesign…

    Could you try made some changes on search bar?

  84. I’ve gotta say this to you Chris…
    The search bar needs to change. I would use the same bg and style of the Polls for example. Keep it similar. I’m not sure if you did that (for now) until you finish it up or not but that’s my suggestion.
    Thanks for all your efforts.

  85. Hey Chris,

    Looks great! Some things are definitely better, some may just take some getting used to. But I think the real take-away here is that you are changing things to advance the site and make it better. Which is much appreciated and should be respected by everyone.

    I know I’ve spent a lot of time staring at PSD mock ups and is one better than the other? To me? To everyone? Who knows… but there’s only one way to find out for sure. And the proof is in the pudding, +99 comments so far, way to really foster a community!

    ~Oh!

  86. Nathan
    Permalink to comment#

    Andy Gongea mentioned it above… but in case you missed it the RSS icon in the nav bar displays “Table-based layouts have 0 mortal enemies” when hovered over. Obviously the text changes every time – and that still works – but the number always remains “0″.

    Nice design update by the way. Keep up the good work.

    N

  87. Gjergji
    Permalink to comment#

    Hi Chris – the new redesign look great! I like the outstanding banners such as Foxycart, Featured Articles, Polls. The Search box.. maybe remove that thick black line or have something more fine or you can have a circled-by-hand line ;)

  88. i Love this design!

  89. Erik Lundmark
    Permalink to comment#

    Great stuff Chris, it’s all coming together.
    Now, are you planning on improving your Yslow score? ;)

  90. Permalink to comment#

    Thanks for centering the layout. Really helps.

  91. Permalink to comment#

    new design is much better, didn’t like the previous one that much, now is time to say what i think ^^ teehee

  92. Permalink to comment#

    I hope this is an April fools trick. Your last design was one of my favorite designs of any site. This one… not so much. Huge downgrade IMO.

    Those 3d block things behind the titles in the sidebar need to go, the search bar is worse, (the thing above the search bar did make me laugh though), the footer is worse, the whole new design makes me sad.

    I see everyone else seems to like it though, so maybe I’m crazy!

    Love the site and tutorials anyway man, thanks for all the good stuff!

  93. I like the redesign but the border around the search bar is really too much. Maybe you could use something a bit “softer”. Apart from that, I’d say everything else is an improvement.

  94. Permalink to comment#

    I was going to complain about the border around the search bar, but that’s already been done some 30 times or so, so I won’t ;)

    The site redesign is fantastic though–I really like the “new look.” The color arrangement in particular is much nicer than before.

  95. Permalink to comment#

    I love the new design and I think the pop-up look is neat for the headings on the right side. I wish I was more creative!

  96. Just Awesome! A really nice feature that I like is the messages that show up when you rollover the menu buttons up top. Teach me, teach me… better yet, teach us, teach us.

    PS: Comment box with preview, also awesome!

  97. Zandy
    Permalink to comment#

    I like the new search bar! I had to try it out.

  98. I really like the new layout. I think it is more unified than the last design. I do like how you recently changed the search bar too. It looks a lot cleaner than the rear view mirror looking one. One idea not sure if you really need it but maybe a back to top button in your footer. Its not really needed but might be useful on the posts with alot of comments. Also i just want to thank you for creating such a helpful resource for web design.

  99. This new design looks good and is more readable for myself; will definitely have me hanging around a little more!

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