Grow your CSS skills. Land your dream job.

Design v6

Published by Chris Coyier

I've been tinkering with this redesign maybe a month or two, and decided to push it out last night. I had been using it myself thanks to the Theme Switch plugin, but there was a few things I had to actually go live before I could change, so I just did it. As usual, it's not an absolute overhaul, more of a refresher. I'm calling this v5 v6 because apparently I called the last one v4v5 and let's just roll with that. (Locally, it's my 12th version!)

Reasons

  • Reign in the font situation. I wanted to establish the "CSS-Tricks" type part of the logo in a font that I liked and was a part of a larger family. I went with Gotham Condensed, which I picked up just for this, to extend my collection of the Gotham family, which should serve me well for a long time to come. Headers on the site are in FF Tisa Web Pro, served through TypeKit. Body copy is Verdana. Other than ads, which I cannot control, those are the only 3 typefaces in use on the site, which was the goal. (Well, the code in Monaco, but that doesn't count.)
  • Feature more of the site on the homepage. The homepage now also includes the latest 5 snippets and the latest video screencast, in addition to the the latest 5 posts.
  • No more dark sidebar. The #1 complaint of the last design was the really dark sidebar which visually overpowered the content area. I eventually started to buy into that criticism so I wanted to make the sidebar less intense that way. The outsides of the site is now "framed" as well, which makes me feel more comfortable, instead of the all-white-no-edges middle that was going on before.
  • Not do anything too crazy. This is just a refresher. No major new areas. No navigational changes. No different URL's... This is the same ol' joint it used to be

Considerations

  • Maintain or increase the value of the advertising. There isn't any more or less than the last design, but things were shuffled around a little. I like the placements better. They have more breathing room.
  • Dropping IE 6. Unfortunately I kind of half-assed IE 6 support in the last one. This time I just didn't want to deal with it. I'm fine with supporting IE 6 on client sites and eCommerce sites and whatnot, but that demographic on this site is tiny and I just don't care. For IE 6, I'm serving the Universal IE 6 CSS.
  • TypeKit fonts kinda look like shit on Windows, so I'm only serving up TypeKit for non IE browsers. This doesn't solve the problem of Windows+NonIE browsers, but we'll see what kind of feedback there is on that.

To Do

  • Update my bookshelf area
  • New footer for the forums
  • Re-think the increasingly-important Archives page
  • Add a few tweaks, mainly regaring search, in an additional IE 6 stylesheet
  • Ideally, go through the entire video archive and redo nicer thumbnails and put them in my new system (just an internal thing, I'm using custom fields for everything now and supporting two different systems until I can go back over this).
  • See if I can get it with no horizontal scroll at 1024px. I planned for this and then something went funny somewhere. I need to track down what the thing is that is sticking out and try and bring it in.
  • Keep on tweakin' -- I have some little micro-ideas already I need to get to.

For Posterity

Old

New

Comments

  1. Permalink to comment#

    wow – so much better. well done.

  2. Permalink to comment#

    Nice work Chris!

    I think the advert areas are far less intrusive now, I felt them a little heavy with the dark background before! I guess spreading them across areas has also helped!

    It feels nice and clean with the subtle greys you’ve used. + good to see some CSS3 in there!

    I like the homepage also including latest snippet etc.

    A thumbs up from me!

  3. This design is your best yet, really loving the simplicity, and light colours. The sidebar hover is pretty cool too!

  4. Matthew
    Permalink to comment#

    I like it!

  5. Scatheza
    Permalink to comment#

    I love the coloring and the new feel that comes with It.

    The only problem I have is I can’t seem to find a way to view a list of previous articles, unless this is what you referred to when you mentioned the Archives page.

    Anyway cheers for everything

    • Scatheza
      Permalink to comment#

      Doh!

      Had a look and saw the archives in the bottom, but from the current navigation the *Home* page is articles and, if possible, I think it should have a link to the older posts or the home page should get its own listing

      Cheers again

    • A better way to get to older posts is definitely on the agenda.

    • Sam Doyle
      Permalink to comment#

      That really needs doing, took me a while to find the link!

  6. muuuuch improved dude, I think v4 struggled a little bit more than the older ones. The footer overhaul here was just needed, and very well done too.

    That and the far more elegant menu bar have to be my favourite alterations here.

    site looks superawesome now

  7. Nice job! Defiantly an improvement, I was excited to see a new design and couldn’t wait to see the post explaining your thoughts behind it. The only thing I would like to see tweaked is the menu. Don’t get me wrong it is an improvement over the old tabs, but the whole navigation area is muddy and washed out. The rollover revealing the color icons is clever but doesn’t hold up quite as well when the icon is greyscale (ie: screencasts, snippets). Over all a REALLY great job Chris.

  8. Permalink to comment#

    It does seem to be a lot cleaner and easier to follow. I would suggest testing in Chrome. I’m seeing a conflict with typekit > leaves a lot of squares in between words. Could also be a conflict with the AdThwart extenion. I’ve installed.

    Regardless, I’m definitely liking what you’ve done here.

    • Permalink to comment#

      I’d like to second that. I’m using Chrome on Windows as my main browser these days (Firefox is still there for development, but Chrome is a lot snappier), and I’m getting a lot of these weird “space as squares” bugs with the new design. It doesn’t happen on IE8 or Firefox.

      I can post a screenshot if you need it.

    • Permalink to comment#

      Ditto, being served squares when they should be spaces in Chrome.

    • Permalink to comment#

      Getting the same in Chrome, font is also sized smaller, at least in the tagline.

    • Glad I’m not the only one!
      Otherwise, beautiful design Chris, well done

  9. Nice Job Chris! this is by far your best redesign. It’s clean and professional. simply beautiful details that make this stand out. I don’t feel like the footer is as well thought out as the rest of the site… i feel i get lost.

    Great Job!

  10. Love the new design! Looks very clean and professional, good job!

  11. Nice, but i don`t like twitter cloud

  12. TeMc
    Permalink to comment#

    Yup, definitly a hughe improvement.
    Although less “cosey” or “warm” I think the “fresh” look is what the site definitly goes well with.

    I like the 1px down effect on :active, pretty simple yet very good.

    Also, the shoutouts sqaures are a bit wierd. I’m not sure you did it on purpuse but I kinda like the blind-jukebox buttons (though ofcourse most of us watch the statusbar when we hover on links).

    Though a few small nitpickings I noticed:

    * There is no way of going to see “more” then just the few latest ones on the homepage without scrolling back up and going to the appropiate page. Think “more screencasts” (maybe with that absolute posititioned-trick you used in the previous sidebar, a SPAN within an [h#]-tag), but also “more snippets”, and “more articles”/”archive”. I think those links go well into the heading of that section (maybe making the section-heading itself be clickable aswell.)

    * in the footer (tweet) the entity-html things are double encoded, or not at all (not sure), becuase the tweet about TypeKit came out as raw htmlentities (ie. <!–[if !IE]>)

    * The universal IE6 stylesheet is funny, but I remember a similar project on googlecode (javascript) which turned IE6 into IE7. Maybe that’s worth looking at, since I’d be nice that when we’re at our offices we may check CSS-Tricks without scratching ourselfs behind our ears. Though I perfectly understand the choise for the universal one.

    That’s about all I could find so far.


    TeMc

  13. Permalink to comment#

    I think the new design looks quite nice!

  14. Permalink to comment#

    great job, been coming here for about a month or so, and I love the redesign…

  15. Snookerman
    Permalink to comment#

    I like everything except for the logotype. If feels very small and squeezed together.

    • Snookerman
      Permalink to comment#

      Frequently AXED questions, is that a typo? Or did you intend to write it like that?

    • I heard that in the future, everybody says Axed. And since this design is the future, I’m just up to date.

    • Snookerman
      Permalink to comment#

      hahah! gotta love the future! :D

  16. Permalink to comment#

    I think it looks great! especially the home page. I love the dropshadow appearing on boxes when they are hovered over.

    Complete bummer that IE displays fonts like sh*t. I’m using @font-face on my site, haven’t tested on Windows as much as I should. If it looks like complete crap I’m going to have to try an alternate method.

  17. Alex
    Permalink to comment#

    The new design looks great!

  18. Disappointed
    Permalink to comment#

    Why are you not letting people with IE8 see Typekit stuff?
    It works.

    :(

  19. Jon
    Permalink to comment#

    Beautiful update! An absolute improvement over the last iteration – I think you made all the right moves with this one.

  20. khaled
    Permalink to comment#

    Nice Design I like it

  21. Wow, this refresh is really refreshing on my eyes!

    Something I don’t like, is the Shoutouts section of the sidebar, there just a bunch of small squares with links to other blogs, but you can tell where you’re going.

  22. Permalink to comment#

    Love the realignment, not just because it looks prettier but because it actually achieves the goals you set forth beforehand. I really admire that: every time you’ve updated the look of this site, you’ve detailed the specific goals and reasons and written about how you’ve achieved them.

    I’m looking at it in Firefox/Win and the TypeKit fonts look pretty decent. Not like Safari/Mac, of course, but I vote you keep them.

    One minor nit to pick is the name/email/website input boxes on the comment form are cutting off the letters’ descenders (at least in FF/Win). My last name, ‘grossi’ looks like ‘qrossi’.

    All in all, great work as always, mate, and thanks for sharing the rationale behind it.

  23. Well done this site looks brill.

    At first I was a bit unsure but now it’s grown on me, well done and all the best in future design.

    !!!

  24. Permalink to comment#

    I must’ve seen this last night soon after you went live. I think it looks great. The subtle sidebar is much more pleasing to the eye. The header with the icons is really well done. I’m glad you went with Gotham Condensed, I am using that font for a new project I’m working on right now (great minds). Keep up the great work you’re doing.

  25. Love the new design. It looks great, especially the home page. And nice touch with the box shadow effect.

  26. Jillian
    Permalink to comment#

    I like it! I’m a big fan of lots of neutrals with a pop of color here and there.

  27. Permalink to comment#

    Oh no.. no colors. It makes my screen look like 1950 TV. In my own opinion… V3 was the best design there ever easy was on CSS-Tricks.

  28. Permalink to comment#

    Nice design! :)

  29. Matt
    Permalink to comment#

    Whatever design you put out doesnt really matter to me. The content keeps me visiting this site daily. Keep up the great work.

  30. Rick
    Permalink to comment#

    Nice design. Best one yet.

  31. EnfoToad
    Permalink to comment#

    I love the use of lighter colors for the background. Once again, an job well done Chris.

  32. Permalink to comment#

    it’s different but it’s great.

  33. That'sMe
    Permalink to comment#

    Better than ever!
    A bit inspired by smashing magazine, i think, but that’s good!

  34. Permalink to comment#

    Nice design, & thank you for dropping IE6, it’s time we stop supporting it!

    Maybe you would like to join:

    http://www.ie6nomore.com/

    -FireDart

  35. Hitesh
    Permalink to comment#

    Last is better,

    On Chrome 4.0.?.?(win xp) there is some problem in font. it no t render space like space.

  36. Permalink to comment#

    Looks beautiful & welcoming! I was weirded out when I 1st came on reading that Aborting Links post, linked in by tweet. Wasn’t sure if I was on your site, but was reassured looking at the logo & all was good! lol

    Anyways, I actually feel more at home while browsing your site, more than ever, especially when reading an article post! This looks like a great site revamp, nice job! :)

    - MexiChriS

  37. Permalink to comment#

    Uhh, nice work…

    BUT GOOD LORD!
    Could you just pick a theme and stick with it for more than a few weeks? You must have a ridiculous amount of free time on your hands… have you ever thought of taking up bowling… or knitting a sweater?

  38. Permalink to comment#

    I really like this design better.
    The only thing I find a bit heavy is the twitter speech bubble, the gradients in particular.

    • Permalink to comment#

      That jumped at me a bit too, figured I’d live with it for a bit before deciding if it was good, bad or indifferent.

      Kinda reminds me of the buttons on the main navigation of the previous Apple website – I thought maybe it would grow on me as something ‘retro’ in web design.

  39. Eliazer
    Permalink to comment#

    Nice work.

    Its a pleasure to watch how often you update the design, 20 points for that!

    However i personally think V4 was nicer.

    and @BigSteve you are not not right! i think everyone enjoys it when Chris redesigns his website.

    • Permalink to comment#

      Okay, fine. Maybe I just miss that big orange/brown marble bar across the top of the page- it was the unique, defining mark of css-tricks (for me at least).

      If he at least kept that in every redesign, I would be happy.

  40. Permalink to comment#

    I love it.

  41. Nice Work Chris on the Site Refresh, It really does look a lot more sleek an clean!

  42. Permalink to comment#

    This is the nicest design yet! V4 was my least favorite because the dark sidebar was just too overpowering – it jumped out more than the actual content. Glad to see you’ve addressed that and made some other nice changes at the same time.

  43. senshikaze
    Permalink to comment#

    it was a shock at first, but only after a few second it is bettter. and after the side by side with your previous design, i can see all you were trying to go for, good job.

  44. Permalink to comment#

    Love the new design, very clean and refreshing! I think it’s the best one you’ve had!

    mary

  45. Zak Weiland
    Permalink to comment#

    Hey great redesign! Really nice ad area, big improvement over the last version (still nice tho).
    The search area is bumping around when you select a different section other than ‘All’. Otherwise, great work!

  46. Love it, love it, love it!

  47. Permalink to comment#

    Really nice!!! Congratulations!, just a little something with the search box!, the font is kinda weird.

  48. Permalink to comment#

    I visited the Forums today and just thought it was only the design of the Forums but now I see it’s a global redesign. Nice, loving it ;D

  49. Permalink to comment#

    is it weird that I actually prefer the old?

    the sidebar seemed to ground the content, and i liked the larger header a bit more?

    • James
      Permalink to comment#

      Don’t worry, you’re not the only one. I preferred the old one too :)

      In fact, I was surprised at the number of comments I had to go through that were positive to find yours…

      This one looks dull, washed out and boring. Still elegant and a somewhat minimalism feel. Guess you can’t have both :p

  50. Tom
    Permalink to comment#

    I love the new redesign, but to be honest I preferred the old CSS-Tricks logo font of the old site at the top. I feel the new one is slightly too cramped, but apart from that it’s nice – I especially like the isolated sidebar with it’s shadows!

  51. Permalink to comment#

    Very Nice. Good Redesign.

  52. Permalink to comment#

    Ohh this looks really great. Congrats

  53. Great redesign! I was starting to get a bit sick of the tabs in V4… I’m really glad you did away with them. I really like the contrast that you’re continuing to use with gray and orange.

  54. I can’t wait to see the site when I get home. I was rather bummed to see it in the rawest of forms thanks to only having IE6 at work. Yes, we have IE6 here and it stinks, but I totally understand the boycotting of IE6. IE6 is the worst…we need many more people to totally drop its support.

  55. Permalink to comment#

    Awesome Re-Design. I really like it. I’m loving the “Other Projects” links in the footer. It looks awesome!

  56. Really really cool! :)

  57. Joe
    Permalink to comment#

    Really like the new design.. looks much fresher..

    Keep it up!!

  58. Permalink to comment#

    I prefer the old design… This one seems more, old. I liked the old one with the separation between the main content and the side bar too.
    My main criticism with it is the home page for it. That seems quite “messy” plus, though you can go into the archives there is no “previous” link to go back through the posts (well I did not see one). And displaying them in blocks… For a site that has lots of content with loads of previous posts I like reading the first paragraph, maybe seeing an image then click read more.
    But still, other parts do look more clear and nicer to read.

  59. I’m sorry to say it Chris, but this time it just doesn’t float my boat. It feels like it’s should be shown on an old black and white TV.
    I alo think it feels rather gimmicky with things like the fade-in’s.

  60. Anthony
    Permalink to comment#

    Very cool. I think this looks very classy and clean!

    Nicely done Chris.

  61. SpeedGun
    Permalink to comment#

    I’m not sure that I completely like it, but still very well done.
    It is now light and and easy to read.

    Just a quick question, I noticed whenever you have more then one word you put a “dohicky” (not sure what it is called) between them, is that on purpose?

  62. Permalink to comment#

    I think this site is terrific Chris. Your one of the few out there that never have to subsidize good content with good design. By getting rid of the dark sidebar, I really think that this site has “opened” up a bit more. It feels roomier.

    Please allow me to nitpick:
    After browsing the front page, I do think that the article headers could use a splash of color. I also think that the subsequent articles seem rather odd being in their own drop-shadowed cubes. I guess at first glance it makes me think of your ads.

    The numbers on the bottom left-hand corner seem out of place to me. I know they refer to comments but there’s nothing that affirms that. I would love to see it on the bottom right hand site, that way you see the “Read more / Comment” and then a number indicating the # of comments.

    Still, these things are really minor and are only small things that just immediately jumped out at me when I initially viewed v5. Glad to see Typekit being leveraged and Gotham in the logo (favorite typeface of all time).

  63. Really, really nice design, it looks more ‘editorial’ than ‘graphic designer’ (that’s how I feel V4 looked) yet it still maintains the brand.

    One thing though, is that for me the logo ‘CSS Tricks’ is not only too small but is being overpowered by the ‘asterisk’ tag.

    Another detail is that the icon for Forums is people wearing ties… I’m not so sure but I don’t think most of us that visit your site (if not all, probably VERY close to it), wear a tie for a living, heck, many probably hate ties anyway, hehe.

    I just suppose that you want to reflect your community with that icon, right?

    On another note, css-tricks.com fonts from Type Kit look pretty good to me in Windows, even without any anti-aliasing.

    Anyway, great redesign.

  64. it’s beautiful Chris. I was a fan of the last design, but this one feels a little more framed and solid, only critique I have is I liked the header style for the article titles on the previous design a bit better, they seemed more original + unique.

  65. Permalink to comment#

    I liked the previous design better. It was more warm and inviting, whereas this versions seems kind of cool and unwelcoming. I’m also not a big fan of the typography for this version. The heading fonts don’t look very good on FF 3.5 on WinXP.

    I’m curious to check out the design on my Mac at home. Is there a large enough amount of visitors for your site on Mac to use fonts that don’t mix well with Windows?

  66. Permalink to comment#

    I liked the old better.

    This is just way colder.
    The old was nice and had a better fuzzy/warm color. :)

  67. I think the new version looks more modern and fresh while the old version was more personable and welcoming. It will take some getting used to but overall I like it a lot, great work as always.

  68. Permalink to comment#

    Im getting some weird boxes for spaces on headings, like the leave a comment has 2 boxes for spaces between words. I dont know if its just me or if someone else mentioned it. Kind of annoying though. Like the overall design of the site though.

    • SpeedGun
      Permalink to comment#

      Same here

    • Apparently this is a Chrome on Windows problem. I can’t seem to replicated it with Chrome on Vista, but I’ve heard it’s on Chrome for XP and Windows 7. I emailed TypeKit about it, we’ll see what they say.

    • Darren
      Permalink to comment#

      Yeah My desktop is windows 7 with chrome and my laptop is vista with chrome. Both of them have the problem

  69. another-anti-twilight-zone-ish
    Permalink to comment#

    I could see bringing back a distant relative of the centered headers and orange/graphic laden post details… something with a little more weight and color. My eye was lost trying to locate the latest greatest post during my normal midday visit today.

    Ads seem to carry a lot more weight now. Was easy to tune them out in the old version, I guess because they were in a section that was styled so drastically different than the content. Of course I also tended to tune out the “Explore” section that was grouped with them.

    Overall. It feels a lot more like I’m in charge of where to look now, vs being told. Not sure I’m comfortable with that. Does that make me submissive? Hmm.

  70. Personally, I preferred the other design. This one doesn’t show much separation from the sidebar/content.

  71. Bert de Vries
    Permalink to comment#

    Last time i looked (19:45 cet) the site was like any other site. Nothing special. I think you could do better… It’s very white, although good readable, but dull.

  72. Permalink to comment#

    Yeah i agree with a few other comments, the older version was much warmer and nicer sounds weird saying that about a web page but never mind. I do like the navigation on this version. I also like the snippets page, the way they are really colorful and nothing else is.

    • Permalink to comment#

      Also, I’m using windows and in IE the font looks better than in firefox…

    • “TypeKit fonts kinda look like shit on Windows, so I’m only serving up TypeKit for non IE browsers. This doesn’t solve the problem of Windows+NonIE browsers, but we’ll see what kind of feedback there is on that.”

  73. Permalink to comment#

    I like this site very much, but now i cannot find a link to older posts. Back in a days i used to click older posts and go through 3 or 5 pages to find article that i was looking for. Now i cant find that functionality. Ok, there is a search field, but sometimes it is easier to find something, when You know where it is instead of searching. Cris, could You fix that?

  74. Awesome !

  75. arnold
    Permalink to comment#

    Thanks you also included some snippets update in your new blog design. Thanks again Chris , thats really helpful

  76. Ross
    Permalink to comment#

    Much better, Chris. I wasn’t a fan of the previous heavy theme.

  77. Congratulations Chris, you’re growing so much as a designer.

    My least favourite areas are the footer and the CSS tag in the header. Great job though. My most favourite redesign as of late is: http://www.nationalrail.co.uk/

    Even if it’s clearly followed the traditional ’2.0′ design aesthetic.

    Btw is the background pattern the same as the one on the Panic blog? ;) I was thinking of using the same pattern myself.

  78. Very nice Chris, but what’s wrong with space character? Just take a look here. Also I noticed that in the header in the string “A community curated by…”

    And I don’t know why but I don’t lake the badge in the head of site.

  79. Nice. Seriously it is great. The drop-shadows look a lot like the ones I use on my blog.

  80. I really am not sure about this new design, I was just getting used to the old one visually and then you changed it again; a bit frustrating.

    Aesthetically the design isn’t up to scratch with the old one: The new logo’s type feels squashed and looks tacky; The colours clash and the majority of it feels dull too; The navigation icons are nice, but I don’t feel they fit with the overall site design; Sidebar-wise it’s an improvement, while I didn’t really notice the dark sidebar in the last design, the new one does seem to balance the site out and sort of ‘retracts’ itself from the corner of my eye.

    Overall, the design isn’t awful; nor is it great. Certainly not an improvement and I’d much prefer the old one, however it doesn’t affect me too much seeing as most of the content I read on your site comes through RSS… So yeah I did just moan endlessly for nothing – sorry Chris! *cheeky grin*

  81. Hey Chris,

    I really enjoy the new layout, but you’re killing it with the 1px push on a:active. It’s a great little effect when used in moderation on big important links or button-like links, but EVERYWHERE is pretty overkill, no? I saw your tweet the other day saying that you’d been noticing this all over the place lately (we can thank Tim Van Damme) and I really do enjoy it, but like all things, in moderation.

    Also, the 1px push is a great idea for actual form buttons like the “Submit Comment” button on this here form, but you’re not using it there which, in contrast to all the links, makes it feel like it’s missing something.

    • It’s so subtle, I’m not understanding how it can be overkill. If anything it seems like it’s best to have it on everything so it’s consistent.

    • DED
      Permalink to comment#

      While I don’t think it is overkill, consistency isn’t really a good argument here. I think Sean’s point is that the one pixel push is consistent with button behavior ( it’s what we see when buttons are actually pushed), it isn’t consistent with link behavior. Nielson’s heuristic on consistency is that only those parts of the interface that are behaviorally similar should be visually consistent. So it depends on how you interpret the behavior of buttons compared to links. If you believe they are similar enough, then consistency is the right choice.
      But, good redesign, I think is much easier to look at without the strong contrast between the content and sidebar.

  82. Permalink to comment#

    Loving the redesign Chris. Wasn’t a massive fan of the last design but really loving this one. Only complaint is the font on the css-tricks logo at the top. Much preferred the old one.

  83. Gage
    Permalink to comment#

    Wow really refreshing design. I especially like the new home page very useful! I also like the less prominent sidebar.

  84. Batfan
    Permalink to comment#

    Very nice, Chris. I like it :)

    Thanks so much for the link to the ‘Theme Switch’ plugin too. That will be VERY handy in the future.

  85. I like the new design, but I have to say that I am a fan of the previous design, I was one of the few that liked the sidebar and colors (maybe because I am still trying to hone my eye for design). I do really like what you did on the front page by offering more content. I have been meaning to dive into the snippets area and now with them on the home page you made it easier for me to enjoy and use this new section. Keep the content coming you do a great job and are always the first blog I tell people to go to that ask about web design!

  86. Permalink to comment#

    I think this is my favorite design of CSS-Tricks so far. Good job Chris.

  87. Permalink to comment#

    Hi Chris,
    This is fantastic re-design. All elements looking (sidebar-content) like swimming ^_^
    Good Work!

  88. Take a look at this site, its not as cool as most but i thought this was a really cool thing they did with the background:

    http://www.creativeweek.org/

  89. Marcus
    Permalink to comment#

    The new design looks great!

    I dont know if it’s just me, but i can’t seem to read your full articles on the mobile version of you site anymore.

  90. Permalink to comment#

    I love the new design, very easy to use

  91. Permalink to comment#

    Lookin sharp!

  92. Martin
    Permalink to comment#

    Ooh. I like.
    It’s somewhat more sophisticated.

  93. rony
    Permalink to comment#

    its good for eyes now :D

  94. I really like the new look…nice job! I laughed out loud at the “Explore ye Pioneers” on the tabbed box. That Levi’s commercial must’ve really hit home.

    I’m either not seeing it or missed it entirely, but I didn’t see the twitter cloud.

  95. Permalink to comment#

    Really like the new design, well done!

  96. Chad
    Permalink to comment#

    Looks great Chris. Keep up the awesome work!

  97. James
    Permalink to comment#

    Chris the site looks great. The menu and the shadow behind the areas when you hover over are my favorite editions. Great work!!!

  98. Alexia
    Permalink to comment#

    Oops, I found a little boo-boo, I think.

    At least on my end, when I go to the Forums tab, the italicized text in the upper-right Search field goes back to the sans serif used in your previous layout.

    If it’s just happening to me, please ignore. :)

  99. imjp
    Permalink to comment#

    great design overall! i dislike the hover effects on the div though, kinda overdoes it

  100. Seriously better, everything feels more cleaner. See you fixed some quirks too like active states, search, and emphasis on ads. Overall nice job! Liking thefooter project hovers as well.

  101. Permalink to comment#

    It looks much more “put together” than the last one. That is, the sidebar, content, and really every aspect of the layout work very well together. :)

  102. Permalink to comment#

    nice redesign. i much prefer the new icons to the hand drawn style ones from before.

    just a little typo in the description for ‘script & style’ in the footer: ‘realted’ should be ‘related’!

  103. Helen
    Permalink to comment#

    Very nice (the old one was nice too), but the typography of h5 class=”articles-area typekit-main”>Latest Articles doesn’t fit to the rest. Same complaint about h2 class=”typekit-main”. Why don’t you stick to the bold Sans in your headings?

  104. you know what would be a great idea.
    The option for people to be able to switch back to old themes. so people can chose what ever theme they want.

  105. Hannes
    Permalink to comment#

    Those drop-shadows-on-hover on those content boxes at the front page are distracting, imo. If you really insist on having them, make them a bit more subtle please.

    V5 looks a lot better though – good job!

  106. Looks good Chris. Impressed with how quick you can do major changes like this. One thing…The ‘Search…’ text in the search box is a little high in Chrome on my Windows Vista.

  107. Jann
    Permalink to comment#

    I love the homepage! The lighter background on the sidebar makes it easier to find content.

  108. According to me your old design was better. I never felt that the dark color sidebar etc. were distracting the main content of your site. To be honest I do not like the color combination of the new design. The footer region is undoubtedly better in the new design. I feel that the uniqueness that you had brought in the old design was great.

  109. Prasath
    Permalink to comment#

    The Old one is Much Simpler Than the new
    I like the old One Better than this

    but I like this too.. .!

    • Prasath
      Permalink to comment#

      This resembles the smashing magazines new look. to be honest I like the old Smashing magazine too!!

    • Permalink to comment#

      I agree. I hate the new smashing magazine.. the layout actually makes me not like using the website anymore. My least favorite thing of both the new designs is having the one main article and then just small boxes with the next articles. It makes them look so boring.

      Another thing I’m not a big fan of in both the smashing magazine and this new design is the ad space overkill. Ads, ads, ads. They’re starting to get way too much real estate. But i do understand that money needs to me made and a lot of time is put into both sites.

  110. Cleanest version yet. Love it!

  111. boersnoes
    Permalink to comment#

    How about giving IE6 a message stating this is the poor man’s lay-out and other browsers get to see the real one.
    Instead of leaving the IE6′ers out on the dry, give them an incentive to upgrade.

    I know that on a webdev site this is probably preaching to the quire, but it shows good practice for other sites. Not?

  112. Permalink to comment#

    Hi Chris,
    i really like the fresh-up of your site. Looks very clean now and all in all lighter to me. Great work.

    Greetings from Germany and merry christmas to you!

    Christoph

  113. Permalink to comment#

    Good job ;)
    so clean!

  114. Really Awesome!! I really like the way you use jQuery….

  115. Permalink to comment#

    looks awsome now. But I dont like navigation.

  116. letheos
    Permalink to comment#

    I agree with most of your readers. The new design is both more cleaner and more elegant. My suggestion is you to try more bold background colors that will give more character and individuality to your site.

  117. Permalink to comment#

    Nice job, i love the shadow effect :)

    PS: in the top, the search icon is not centered ( Chrome , Win )

  118. stian dan
    Permalink to comment#

    Great job. I love it.

  119. Jack Reichert
    Permalink to comment#

    It’s really nice. Congratts. I know the feeling of having a new design and needing to push yourself to make it live. “Not do anything too crazy.” I love the subtleties you use.

  120. Permalink to comment#

    Everybody else seems to be have problems with glyphs in Chrome, but I’ve just got POS (plain old ‘serif’) for headings :( That’s in Chrome 3.0.195.38 on XP.

    Otherwise looks really nice and clean. I like the new “CSS Chris” Tweet footer. Gotta disagree with you CSS layout though, multi-line indented FTW!

  121. Permalink to comment#

    I still like the old cardboard looking version myself. (V2, V3?) Although you achieved one thing no other site has; you actually made me rollover ads, haha.

  122. Rob
    Permalink to comment#

    I’m really liking the new design although one thing I’d prefer to see is having the columns to the sides of the container a little darker.

  123. Amazing

  124. Permalink to comment#

    The new design is great. The navigation-icons really makes this a winner among your CSS-Tricks designs! It’s a boost in usability, and it feels just right.

  125. Hey Chris, this looks nice just a few more thoughts. Dont you think showing the image in the post in the excerpts on the homepage will look more attractive. Initial design had that but dont know why this is dropped in the v5. Rather ur pics added life to the home page.

    Also true that the dark bg sidebar demanded change but the new one seems a bit dull.. But again thats just a question of personal taste I believe.

  126. Nice…
    I really didn’t mind the other version at all Chris, but this look really nice. I specially like the fading drop shadows you put under the sidebar content… nice touch.

    I can only hope to get half way where you are with the coding of css… love the screen casts and all your hard work, helping us the not so great coders, getting better.

  127. Nabil
    Permalink to comment#

    hey chris. nice website! anyway just a suggestion. i think it looks better if you have the header to have a brown background like last time instead of just grey.

  128. n/a
    Permalink to comment#

    Wow, for someone who is supposed to be a designer, you really RIPPED someone else’s design. Looks WAY too much like smashing magazine

  129. Permalink to comment#

    Much better! Not that I disliked the previous design(s), but this feels a lot more complete and gels together well.

    The only thing I would say is to preload the images that appear for your “Other Projects” section in the footer – they didn’t appear until a couple of seconds later for me and I only noticed them after exploring the footer.

  130. Permalink to comment#

    The previous version was excellent – especially the header/sidebar union. But this design is even better. Feels lighter, cleaner, and more relaxed. Awesome work, Chris!

  131. Permalink to comment#

    Great job, Chris! I especially like what you did with the main navigation. The site now feels more serious, but it has kept the well known Chris Coyier identity.

  132. Permalink to comment#

    I very much like the orange line at the top and bottom of the page.

    On the other end, the top menu is a little bit to gray IMHO. I like the fact that the icons become colored as soon as you hover the items but almost three out of five icons stay gray when you hover them. Simply because these are black/white/gray icons.

    I’d like to see a little bit more color on the opening (home) page.

  133. Oh so beautiful…

  134. The shoutouts gray boxes look like they’re favicon sized, but they’re rendering as, well, gray boxes.

    The top right search, when you toggle between “all” and “articles”, the content inside the search box shifts a bit (at least in Firefox 3.5.5 on PC).

    You’re using italics in your sidebar modules, “Explore ye Pioneers”, why not in the masthead? “A Web Design Community curated by Chris Coyier”

    I’m not seeing a funny cat youtube video anywhere??? People LOVE funny cat youtube videos.

    Lastly, can you make the logo bigger and put it in red?

  135. Permalink to comment#

    The redesign looks good, I’m not sure though if I like it more than the old one.
    I actually liked the old sidebar.

    Regarding your problem with the horizontal scrollbar at 1024px: The inside-footer div has a width of 1044px (20px too much) – I think there is your problem.

  136. Is there no link to older posts or only I could not find it??

  137. Permalink to comment#

    very cool update! i’m loving the front page now.. seems so much more neater!

    possible typo?
    Add a few tweaks, mainly regaring search, in an additional IE 6 stylesheet

    regaring = regarding?

    Anyway, congrats on the update Chris

  138. Permalink to comment#

    Nice job Chris!
    Very nice n clean design :)

  139. Zoran
    Permalink to comment#

    Yeah nice job Chris, though i liked the old one too. Support for dropping the IE6 down, i think the more attention designers apply to it the more popular is getting, the best way to get rid of IE6 is to just simply ignore it.

  140. Doc
    Permalink to comment#

    The new design looks good and more clean than the now old v4.

    But you should realy rework thh twitter cloud at the bottom.

  141. Craig Allen
    Permalink to comment#

    I really like that the homepage is now really a homepage and not as solely focused on the blog. The footer is cool and I like the click effect on links. Looking forward to more great stuff in 2010, including the hard copy of your book!

  142. Shane
    Permalink to comment#

    Refreshed is right! The site looks really refreshed, like it has been given a breath of fresh air. This is my favorite of all of your redesigns thus far. Good thinking getting rid of the dark sidebar, the site looks bigger and much more cohesive as a result. Yet another reminder of why you are one of my web design heroes, Chris!

    All the best in 2010!

    Shane

  143. Permalink to comment#

    Maybe you should shorten “older articles” to a headers list. For now it’s OTHER block especially it’s separated by ads and has other visual styles.

    And I’m using AdBlocker so I see empty blue strikes. Can you do smth with it or it’s not in your hands?

    But I can say that whole design is pretty and easy to eyes.

  144. This is an awesome redesign, very well done. I’ve always loved the way this site looks.

  145. David
    Permalink to comment#

    Maybe I’m just missing it but how do i get to the old content? Didn’t there used to be a previous entries link?

  146. micha
    Permalink to comment#

    much better!

  147. Mike
    Permalink to comment#

    I’m starting to dig the new design.

    I think a good tutorial would be how you did it, such as how did you get WordPress to show the first post in a big block and then the remaining posts in smaller blocks in columns.

    I’ve seen a few other wordpress sites do this but haven’t found how it’s achieved.

  148. Really like the redesign Chris, it feels much more crisp than the previous design.. Like the fact you have incorporated the “older articles” links as well that you spoke about in a previous article. Nicely done :]

  149. Dennis
    Permalink to comment#

    Don’t like it.
    Makes browsing trough articles alot harder with just text.

    -1…old was better

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