Grow your CSS skills. Land your dream job.

Design v8

Published by Chris Coyier

I had some extra time over Thanksgiving so I decided to spend it doing some recreational designing of this site. Here's a few quick notes (I need to get back to content!):

  • Colorful! I think bold colors are fun and brighten up the attitude around here
  • Fonts are Tandelle and Myriad Pro (which I think works great as body type and header type)
  • There are all kinds of CSS tricks - perfect site to go a little overboard with that
  • The code highlighting is as close to TextMate's Twilight theme as I could get with Prettify code highlighter.
  • The site works best at above 1200px resolution monitors. Even the new little 11" MacBook Air has 1300-some pixels. However, around 6% of this sites visitors are stuck at 1024px, so there are some media queries to help with that a bit

I quite like it overall. I'd really appreciate any reports of layout issues in specific browsers, I'm sure there is some cleanup to do there. Any feedback at all is welcome, let's just keep it constructive.

Comments

  1. Hi Chris,

    I like the refreshed design a lot: simplicity still rules! But I have a bug in the main navigation: i just can’t see any text. I had this issue before with the old design.

    I use Chrome 9 dev and Windows 7 Professional (64 Bit).

    Greets from Germany :-P
    Felix

    • Not sure the deal there, sorry. That’s a dev release as you know so maybe it’s a bug.

    • Mike Adams
      Permalink to comment#

      Same problem with Chrome 9 (9.0.597.0 dev) on Windows 7

    • Screenshot of issues from Chome 9.0.597.0 dev on Windows on a 1024×768 (yes it’s small!)

      csstricks

    • The ‘bug’s seems to be related to smaller monitors. I just sized my browser to 1024 and the main navigation changes based on that.

    • MikeH
      Permalink to comment#

      Like the bigness of it. I’m working on a redesign for my company’s site and am involving similar layout elements. Too little space seems to be a problem and I am discovering my appreciation of custom fonts.

    • Permalink to comment#

      I had this issue too in Chrome Dev release in previous design and also V8. But look awesome in Firefox though. :D

    • Permalink to comment#

      Just to edit, using the latest stable version (v8) your site look fine. ;)

    • I had same problem before with Chrome dev but after last upgrade it’s (9.0.597.10) gone. About new design: comments surprised and impressed me, css transitions cool new stuff love the way you do it, new bold colors (i know u use this word a lot so…) suck especially this one rgb(168, 0, 255). And one more thing thanks for inspiring me to learn wp at last i now how to rebuil my old but still online crap ;)

  2. Permalink to comment#

    Comment form is way down the bottom in Safari 5. Doesn’t seem to be below the article, but rather below everything.

    I think the design is ok, but I’d get rid of the stroke/shadows on the logo and other elements that have that bold shadow on. Also can you tone the colours down a little?

    • If you can stretch out your browser window a bit you’ll see the comments pop back up I think.

      I like the colors.

    • Permalink to comment#

      Hmm, I’m on a 1280×800 screen. Which I believe is one of the more popular resolutions atm, The window is stretched quite far (About 1000 pixels wide), I think it would be a bad move to mess up functionality for such a wide audience. Also Like what someone else said, everything does just seem too big.

      I thought the colours could be muted down a little, maybe you are checking on a screen with less contrast than me though.

    • Permalink to comment#

      Also, shouldn’t the post titles be the same font as the IT’S YOUR TURN etc.

    • At 1200px the design is at its regular desktop browser design state.

    • Im a beginner here but I agree with getting rid of the shadows in the logo.

    • Grumbledook
      Permalink to comment#

      This is poor design imo, I use a vertical taskbar so that messes things up and shoves the comments down as others have reported.

      I also use a window rather than maximised on my 24″ desktop screen and it also isn’t wide enough on that either, though I could stretch the window wider doing that just for this one site isn’t something that sits well.

      When I first saw the redesign I thought there weren’t any comments on the site any more. I scrolled down to the bottom of the article and didn’t see x comments (cause you have that at the top of the article which I’m blind to). As the comments were pushed down below the sidebar it looked like you disabled the comments completely. Confusing users, not a good idea.

      As per the overall redesign, it is worse than v7 which was worse than v8 in my opinion. Though obviously you can’t please all the people all the time.

    • Well, I just love it… and the comments are awesome!
      Go on, keep this good work Chris!

    • I love the everything about the site. Even the shadows are cool. Another great design by Chris.

  3. Permalink to comment#

    Awesome! I like it a lot! Also, let me thank you for your great job! I`ve learned a lot from this site! Keep up the good work.

  4. Tjann
    Permalink to comment#

    Everything on this page is too big imho.

    • Press Command Minus =)

    • Whyzak
      Permalink to comment#

      I have to agree. It’s as if you were at 120% or so.

      But i do like the design of the comments.

      I also think, having the comment form below all the comments makes sense, since one should read the comments before adding a new one AND since one can comment a comment by clicking on the return arrow icon.

    • I actually like things bigger. Higher resolution monitors are becoming more mainstream. What looks big on your monitor may look just right on mine.

    • Heiko
      Permalink to comment#

      I love it like that as well. The new design is plain awesome!

  5. Khalid
    Permalink to comment#

    I like the design. It shows that you have guts. The first second I was shocked, but after a few seconds I could appreciate it. It actually inspired me to spice up a design I was working on and now I use some brighter colors.

    The site works best at above 1200px resolution monitors. Even the new little 11″ MacBook Air has 1300-some pixels.

    Even though I have a MacBook with a screen resolution of 1280x800px, I always keep my browser’s width on ±1000px. So

    • Khalid
      Permalink to comment#

      I forgot to finish my last sentence, because I decided to add that quote and clicked on ‘Submit’ before I finishes the comment, so here is the rest of it: “So the width is in my opinion a bit unpleasant.”

  6. Love all the little animations that you do in this refresh!

    The tagline seems like the anti-aliasing is turn off to me, I use Safari 5 and Mac OS X 10.6.5, here a screenshot: http://cl.ly/3Tud

    Otherwise, great redesign!

  7. Great work Chris, i like what you do with little details.
    Nice work with transitions and css3 stuff.

  8. Permalink to comment#

    Hi Chris, awesome design. Clear and minimalist. But, in Safari for iPhone the design don’t work correctly. Best regards.

    • I tested on my iPhone 4. It’s not absolutely perfect but there is a special media-query based design for it that should be workable for now. When I get my hands on an older iPhone I’ll check it out there too, maybe that is the problem. It’s hard to tell from “don’t work correctly” – so if you can take a screenshot or describe it better that would be helpful.

    • It seemed like it was crashing safari on my iPad. It was the only tab I had open when it crashed multiple times.

      I really like the new design though. Your stuff always impresses me.

    • Permalink to comment#

      Hi Chris. I’m testing the web on my iPhone 4. After search form there is an empty space until “Latest Screencast” section.

  9. Permalink to comment#

    Nice, big and readable. I’ve gotta hand it to you, this is the best CSS-tricks design I’ve seen so far. The comments section is easy on the eyes and it seems you’ve taken more notice of colour contrast than other designers.

    Well done, Chris!

    • DemersDesigns
      Permalink to comment#

      I totally agree with the comments section. Beautifully done Chris! The only thing I did notice is that the name/date sections overlap a bit if there is a short comment. Minor issue in what is a great layout of a comments section.

    • Ben
      Permalink to comment#

      I couldn’t disagree more. Doesn’t suit my tastes at all. Everything seems so bulky and all the random bright colors make it hard on my eyes. I’m literally getting a headache from looking at it. The font’s don’t work well on my computer either. The Headers are difficult to read.

      I would like to see the ability to “Choose Your Theme” which would let us go back to any version previously made. That would be fun, and pretty easy to do with WordPress, would it not? Version 7 was my favorite.

  10. Permalink to comment#

    In Chrome 9 it looks like your fonts aren’t getting embedded: http://imgur.com/m2frg

    Why not specify Myriad Pro as the fall back font before Typekit – I have it installed already, so I don’t really need it to be Typekitted!

  11. Permalink to comment#

    Also, transitions aren’t happening in Firefox 4 – have you specified the -moz- prefixes?

    • Permalink to comment#

      Transitions are not supported in < FF 4.0

    • Permalink to comment#

      oops, you said you were looking @ 4 ;( My bad …

    • I found a few that weren’t properly prefixed and fixed them. Do note however that some transitions just don’t work in some browsers. For instance, I don’t think Opera is doing background position transitions yet and those are used heavily here.

  12. Lyleyboy
    Permalink to comment#

    Flipping marvellous. I love the fact that you have (and can) play with all the CSS and JS enhancements.

  13. Permalink to comment#

    Love the new design!

  14. Permalink to comment#

    Awesome design! Love it all!

  15. Permalink to comment#

    I love it!

    I just checked it on my Nexus One (Android 2.2) and it looks pretty okay too. I was wondering why you set the viewport to 550, though. Wouldn’t it be work better with device-width? (I wouldn’t need to zoom to be able to read). Am I missing something?

  16. nigel
    Permalink to comment#

    There’s a lot to enjoy in this new design. The comment form and sliding asterisk are terrific and the comments flashy but extremely readable. Great stuff. I don’t know how you managed to knock it out so quickly. Amazing.

  17. Permalink to comment#

    The last design didn’t last very long! Liking the new on. The logo doesn’t like back to the home page.

  18. Mate, this design is a bold bold move. I respect you for taking the chance. If you like it that’s all that matters :)

    I think the design is ok, but it’s the content that I care about the most :)

  19. Alexia
    Permalink to comment#

    Great overhaul! :) I always look forward to these and this one totally caught me by surprise. Your recent ones usually seemed like variations on the previous one, but this one is so different from any of them.

    <3 it!

    Keep up the great work!

    – A loyal fan in Toronto. :)

  20. Permalink to comment#

    Nice new look to the site, loving the awesome bright colours, the navigations seems a bit easier than before.

    One thing I realised was that the logo in the header isn’t a link for me that’s not good because I tend to use the logo to go back to the homepage.

    And again love the new design!

    Shedh

  21. This simply rocks!

    I love the way you designed comments and replies… I can’t get enough of looking at it… Amazing.

    Not all of transition rules in noprefix versions , is that deliberate (i.e. animations in, let’s say, Opera were broken somehow)?

  22. I like this a lot. The colours look good to me. My only issue is that on Chrome on Windows XP, your trademark asterisk at the top is coming through as a capital ‘I’ – both in the background and the animated rotating thing. Maybe it’s just the fonts I’ve got on my system though – the star on HTML5boilerplate.com doesn’t work in Chrome on this computer either.

  23. Permalink to comment#

    cool! brighter and more fun.

  24. Natalie
    Permalink to comment#

    Love the comments area. Nicely done!

  25. Permalink to comment#

    Hey Chris,

    My main browser is Chrome and the fonts look quite pixelated/bitty on my Work Laptop which is a Windows XP machine. I’m running Chrome 7.0.517.44

    Here’s a screenie of that click here

    Also opened it up on the same laptop in Firefox (Firefox 4.0b7) and the asterisk on the logo looks like a space invader and doesn’t move.

    Here’s a screenie of that click here

    cheers,
    Steve

    • Permalink to comment#

      Just noticed that if the comments are quite short the gravatar, name and date overlap on the left hand side in Chrome as well.

    • Can you check if you have the font Courier installed? The astrisks are Courier so if that’s not present that makes sense that it looks weird. I’ve heard a few accounts that it looks like a Space Invaders thing though, which is sweet by me =)

      The date/avatar overlap thing should be fixed.

  26. jim
    Permalink to comment#

    Bug report:

    Mac Safari 4.03 – the two ads at the bottom of the blog post (below the purple bar) are way out of position and sitting on top of the text. Also they float about randomly when the page is resized.

    • Jim
      Permalink to comment#

      This is working now and looking good.

      Don’t know if you changed something or it’s my setup.

  27. Matt
    Permalink to comment#

    Hi Chris…

    I quite like the redesign… I just spotted an issue with the “Services I Like” section in the right hand sidebar though…

    When you mouse out of them for them to turn back over into their original state, the font of the link changes. It’s no big deal, but it bothered me.

    Hope that helps!

    Cheers.

  28. Permalink to comment#

    Just a personal preference, but I like knowing at a glance how many comments a post has, on the front page. Sometimes I come back to a post several times to follow the conversation, so it helps when I can see the number right away on the front page. Otherwise, I love it! :)

    • In previous designs I’ve gone so far as to remove that number entirely because I just don’t think it’s very relevant. However, others have brought up the idea that they like to check if there has been more activity on the post. So to compromise the number is shown on the post page itself. Hopefully that works for you.

      You can also (now in this new version) subscribe to comment threads via RSS which was not always an option around here!

    • Permalink to comment#

      what I really liked about the last version was that, on the front page, there were links to the article itself, OR, you could go directly to the comments section. I’d be ecstatic if that feature should come back.

    • Permalink to comment#

      Yay! comments are back on the front page! :)

    • Permalink to comment#

      hey, cool !

  29. Permalink to comment#

    Sorry to double-comment.. another thing I just noticed, on this page for example. The commenter’s pictures overlap the date and name of the previous commenter at times, when the comment is short and in reply. This happens even when I reduce the text-size to something small, or if I increase it too large. Also, you have the name of the commenter, then the date and the word *AT* but no time after the AT..

  30. Wow, this is nice, and a lot more colorful! I love the footer, and the comments are slick. I can’t find any bugs on Chrome (Mac) either.

    I would suggest that you change the cursor when hovering over the “Submit Comment” button to a hand. I think it would make it more tactile, and more of what most visitors are used to. Just a thought.

  31. Renee
    Permalink to comment#

    Like the new design easier to navigate and like the fun colors.

    I like the bottom of the page note. ” * This website may or may not contain any CSS or Tricks. ” A little humour to end a very informative site. nice :)

  32. Permalink to comment#

    I love all the tricks, and it degrades nicely through IE8 too. Still usable in IE7, but starts to get a little jumbled. Overall very nice work!

  33. Permalink to comment#

    The comments section is one of the best designed I have ever seen. I personally like all the changes. I defiantly prefer it to the last re-design, which was a tad boring in comparison. I think you did a great job man.

  34. Love the design. I love all the colour, so many websites seem to be afraid of it these days…

  35. David
    Permalink to comment#

    Everything looks great and with the subtle CSS transitions, it gives the site a lot of personality, I am really enjoying version 8 of css-tricks!

  36. Permalink to comment#

    Hey, the new look is awesome.

    One quick thing.

    If I hover over the small brownish area on the far left of the navbar, all the options shift a bit to the left — maybe that’s intentional, but there are then two shades of green showing on the “snippets” option area.

    Just FYI. Great work though. Were you inspired by the spacelog site? spacelog.org? It kinda reminds of that – typographically I guess.

  37. Permalink to comment#

    Fresh, clean, big, bold, new, modern. Just a few adjectives that describe the re-design. Congratulations.

  38. Hannes
    Permalink to comment#

    Nice website! I’ve learnt much from you. Where I can see the older designs.

  39. Holy balls! Last thing I expected this morning! I like the new look a lot.

  40. jim
    Permalink to comment#

    Bug report:

    Some problems with Camino 2.06 (Mac, latest version ) :

    http://tinyurl.com/32xfegy

    http://tinyurl.com/3xy8322

    • jim
      Permalink to comment#

      Also NetNewsWire looks very similar to screenshots above (except in addition the two adverts below the post are floating out of position). Seems to be some problem with the take-up of fonts.

      These fonts are really nice. Some of the most legible I’ve seen on the web.

    • Yeah I dunno it seems like both of those browsers should be using a rendering engine that can handle web fonts, apparently not though? The same issue affects me with the new Reeder for Mac app. For sure it uses WebKit as an engine, but why no custom fonts? Beats me.

  41. Permalink to comment#

    Awesome design Chris. I love the simplicity and the comment area is pretty sweet.

  42. Permalink to comment#

    There’s some weirdness with the navigation. My Chrome window can easily hold 960px-wide sites yet here the navigation goes into “mobile/small screen resolution” mode and goes to 100% width per link.

  43. Holy cr@p, is this redesign awesome. I love the background images behind the sidebar ads. Everything else about the new design is refreshing, too. Great job.

  44. Hi there ^^

    I usually browse at a <1024 px width screen (even if I've got a 1280 resolution) and firt I was shocked by the main nav (too flashy imho but that's just my personnal tastes), like "where the hell did the sidebar go ?!". Then I remembered the articles about media queries and had the idea to enlarge my browser ^^ . It's shade because the whole navigation would fit on a 1024 px large browser.
    I think that lot of people still browse with 1024px large browser. Just my opinion ^^

    I have to add that I really love the comments layout that makes nested comments very easy to read and the animation on the star in the header is a nice idea too.

  45. Dennis
    Permalink to comment#

    Great new design. Very bold indeed.

    One thing I have noticed are when you resize the comment box and overlap the text on the right the “—THE MANAGEMENT—” is not underneath but shows up on top.

    But overall a great website and design.

  46. Hey Chris I love the new look! Highly refreshing, very simplistic and easy navigate. The colors really pop I don’t understand why some people think they should be toned down. Great work!

  47. thomas
    Permalink to comment#

    after looking at it in IE8, i have to say i think i prefer the square look of the comments over the rounded CSS3 version. the rounding looks a bit “childish” (for lack of a better term) and a bit overused. maybe even decrease the radius of the rounding. i’m also a bit overwhelmed by the overall scale of everything. just my 2 cents. you still rock chris. :)

  48. I dunno… maybe a little too simple for me. Plus the nav fonts???? just not working for me. I do really like the grav bubbles in the comment section. Very cool and creative! But I love you Chris and this site rocks!!! Just throwing my opinion out there.

  49. In general i really enjoy the new design! There’s lots of eye candy and the fonts are well chosen. They all work well without being over the top. However i do agree with many other commenters that everything, especially the body text, is just HUGE. If you made the text smaller you could shrink down some of the elements and fit everything into a 1024px or 960px wide format.

  50. Permalink to comment#

    Chris – I have to say, @ 1st I was a little shocked and then I was like, ‘this is pretty awesome’

    The little details is what sells it. The transparent drop shadows around the ad boxes, genius. I never thought about using a drop shadow and then empty padding. Then, I have to know … how do you do the paper clip? That just has me boggled?

  51. I’m a big fan, but I must say, I’m not really digging this new design. I find it a little harder on the eyes, then the last version. I’ve always loved the clean concept of your sites, but this is a bit too colourful for me, maybe just me though.

    I’d like to know what plugin, if any, you use for your syntax highlighting on your posts. Is it a WordPress plugin, or something custom rolled?

  52. Permalink to comment#

    looks good chris! content is the hardest part of a site well for me it is anyway.

  53. Very unique design and oh! you implemented it in HTML5! Love the comment section also..

  54. The comment form and the footer are honestly the most creative parts of the page.

  55. Darek
    Permalink to comment#

    Top navigation is bit janky, last item seems to breaking to next line, jumps back and forth when hovering – chrome 8 mac

    http://cl.ly/2o03113i1D2R311A1010

  56. Permalink to comment#

    Looking amazing! Simplicity and functionality.

    I don’t know if it’s intentional or not, but the HUUGE asterisk in the textarea I’m typing in just moved out of the textarea.

  57. Nick Malozzi
    Permalink to comment#

    1) love love love the comments area, both the display of them AND the form area.

    2) really like the bright new colors. always a fan of simple bright pages.

    3) not going to lie though… i’ve been a long time reader, and i’ve watched you slowly remove yourself from the designs. i really miss that personal flavor you had in the old footers. the banjo pic, etc. it made it feel more human, and i’ve always enjoyed that. your personality always comes out in your posts and screen casts, and including yourself in the design always went well with that.

    just my two pennies.

  58. I wish I had enough time this morning to tell you all the things I love about this new design! The combo of bright shapes with soft neutral backgrounds really works for me – it’s super readable and super fun too. I agree that the previous design was a little uncharacteristically dull for you.

    I appreciate the generously big text, too. I don’t find it “huge” at all. I wish more sites used larger text. And no, I don’t have a huge display – just a MacBook Pro at 1440×900. You folks who don’t like it, remember, your browser can zoom out. I believe Firefox will even remember your zoom level for particular sites. Set it and forget it.

    Chris, I can’t believe how you whip out these surprises! You never cease to amaze.

  59. Permalink to comment#

    I love this new look! The bold colors are kicking ass. Nicely done. ;)

  60. Permalink to comment#

    Beautiful, colourful yet simple. Everything seems in the right place with the right design. Looks like something new and fresh.

  61. I just want to see how my gravatar looks in a circle… nice work

  62. Bold and beautiful. I particularly like the thought you put into the indentation of the comment replies. A nice approach.

  63. Permalink to comment#

    CSS3 transitions are not working in Opera. Please use -o-transition properties. Their syntax is same as for those -webkit- prefixed.

    Ad also if comment has only one line, it’s post date is covered with the next comment’s avatar.

  64. Beautiful Chris… simply stunning. Thanks for putting all the time and effort into this. I will definitely looking at some of the source to see how you did it.

  65. I like the new design! But it liked the navigation and the serach field better in v7. I think the best things in this version is the contact-form and the littel spinning * at the top :)

    (Is it just me or does the Wufoo box dont show the logo when I hover?)

  66. Permalink to comment#

    I love the new layout! It’s definitely different than standard layouts you see for sites like this.The bright colors look great. My only suggestion would be to make the font size a bit smaller.

  67. Permalink to comment#

    Yay! orange is back! (along with some other colors)

    I really love the new layout. Especially the way you redid the comments section. It’s like nothing I’ve ever seen before.

  68. Ryan T.
    Permalink to comment#

    Chris, in the latest production Firefox, scrolling up to the main content from the comments causes the page to become unusable.

    • Revigto
      Permalink to comment#

      Yeah, the top part seems a bit bugged in firefox.
      Looks nice in other browser though!

    • ralcus
      Permalink to comment#

      I’m having problems in firefox too. Happens to me at work and at home so probably not an edge case.

      Seems to render fine but then after going to a new tab and then coming back to the tab with css-tricks.com on it the rendering for the top of the page goes all wrong with major ghosting (screenshot: http://i22.photobucket.com/albums/b337/qwertycarl/css-tricks-rendering.jpg )

      When this happens the top of the site becomes unusable. Strangely the bottom of the site is fine. I don’t get the problem in chrome on the same computers. Haven’t tested any other browsers.

      Both versions of firefox are 3.6.12 and one computer is running on windows 7, the other on windows xp.

  69. Permalink to comment#

    I like the design Chris, Command + Minus = awesome!

    Your site has helped me out so much, thanks and keep it up!

  70. Permalink to comment#

    Hmmm,

    One or two cents here…

    For the main nav…
    maybe load — ahem — Haettenschweiler in lieu of that serif

    Tandelle set in all caps has a funky up and down thing going. Use League Gothic instead?

  71. It’s definitely original! To be honest at first glance I was like wow, bring back the old design, but it grows on you.

    I think the use of the bright colours is brave and pays off too. Oh also the comments list looks great.

  72. Chris
    Permalink to comment#

    Some of the comment photos and dates seem to overlap each other in Chrome and Firefox.

  73. Permalink to comment#

    Chris,

    Love the new look, it is clean, modern and the typeface choices fit perfectly. The colors are a tad too saturated for my taste but I still think it fits within your design theme.

    If I had to nitpick and choose something I didn’t like it would be the animated menu items. It seems that the animation is there just to be there, it serves no usability functionality that I can see.

    Nice work, gratz!

    TonyP

  74. I noticed that on the home page, the comment counts for posts didn’t make the cut. Just curious why. I always like looking to the counts to see how active discussion for a post may be.

  75. Permalink to comment#

    I had some problems (in fact really did not see anything but the menu) to view the site with firefox. (win7 ff 3.612)
    while everything ok with chrome.
    now it’s ok, rendering etcc

  76. Permalink to comment#

    Overall looks awesome, but as others have mentioned I’m not sure about the width…

    My desktop resolution on my laptop is 1280px, but I keep a Google Gadget sidebar open that eats up about 150px, and now I get a horizontal scroll on your site. Maybe make the layout a bit more fluid?

    And small things, but I found ironic because I remember learning both of them here… the text selection color is default (I think a different cooler is a great CSS Trick), and the 1px bump on a:active that I’ve fallen in love with doesn’t appear anywhere.

    Overall a great design Chris.

  77. Permalink to comment#

    Great design! I love what you have done with the site! The colors flow very well together. The comments section is impeccable . Great use of the right fonts. Accessibility is no issue with this design. Great work!

  78. Uncleserb
    Permalink to comment#

    I **really** like your footer ;)

    Now, I realise that could be misinterpreted but I guess / hope you know what I mean ;)

  79. sereal
    Permalink to comment#

    i love the comment section…looks pretty !

  80. Nick
    Permalink to comment#

    I’m a creature of habit, so to say the least I’m not a huge fan of complete redesigns as it messes with my user memory of websites. I am a little thrown by the extreme contrast in the navigation while the rest of the site is very low contrast. Overall, I think I prefer the previous design. But, I am reading your website because your the man – so do as you will, I’ll be back anyway :)

  81. Encrytt
    Permalink to comment#

    OMG….THIS DESIGN IS SO PRETTYY

    I LOVE YOU HUBBYY CHRIS … <3

  82. Dave
    Permalink to comment#

    Anyone else experiencing severe lag when you try to resize the browser window on this site (with element distortion)? I’ve tested to see if it’s just Safari overall, but sites in other tabs resize fluidly.

    I’m on a MacBook Air 13 with 2.13Ghz processor and 4Gb of RAM, Safari 5.0.3

    • Dave
      Permalink to comment#

      Follow-up: Looks like Safari is having massive redraw issues with the new design (causing huge resource use spikes in Activity Monitor ). Recording over 117% processor usage (with beach ball) and over 1Gb memory usage. I check with other pages and it’s averaging 40% when resizing and 500Mb memory on a page resize.

    • Permalink to comment#

      I’m having severe lag just scrolling in Safari. Even with the latest webkit nightly build. The farther down I scroll, the worse it gets. By the time I’m down to this comment, it’s completely unusable (2-3 seconds of lag for every action).

      It seems to be GPU related, because when I force my Macbook Pro to use the discrete graphics card it improves.

    • Dave
      Permalink to comment#

      Hey Dale,

      After seeing your comment, I checked again… seeing the same thing… further down I scroll the lag increases drastically…

      Not really sure what’s causing it though… there’s nothing here that should even make a 256Mb graphics card have to work at all.

    • Made a few changes to JavaScript efficiency, we’ll see if that helps. I’m not able to reproduce any significant slowdowns on my end yet.

    • Even just trying to type in this comment in Safari slows it down to the point where it can’t even keep up with my typing, and believe me, I’m no speed typist. Behaviour seems largely limited to WebKit, though, since both Firefox and Opera have much less trouble displaying this site. Still heavy’ish on them, but nothing out of the ordinary. Chrome and especially Safari on the other hand, seem to have a very hard time with it.

      Whatever the reason, when a user has to open an external text editor just to be albe to type a comment, something is not right. ;-)

    • Dave
      Permalink to comment#

      Hey Chris,

      Have a feeling it might be related to your script that determines container height. As I’m scrolling down the page, the background container visually seems to be constantly trying to re-calculate it’s height (and expanding it) to fit content. Might solve the lag issue or at least be a starting point.

      The comments box being laggy… I’m experiencing that as well, it’s not to the point of complete halt, but its noticeable.

    • Permalink to comment#

      The scrolling issue seems to be fixed now; even on the lesser, integrated graphics card everything works smoothly and doesn’t use excessive amounts of ram. (but only if my browser window is wider than 1200px; otherwise it’s still horribly slow)

      Window resizing is still fairly laggy on pages with long comment threads, though I don’t think that’s a huge issue as most people aren’t constantly resizing their browser window.

  83. This is the best version css-tricks design so far, nice work

  84. Permalink to comment#

    Love the new design, especially the comments & comment form! Nice use of CSS transitions too.

    Just two things:
    1. If a comment is too small, the next author’s avatar overlaps with the previous comment’s date. (Chrome for OSX)
    2. I the love bright colors in most places but I think the bright purple box for previous article is too distracting from the actual article.

    Cheers

  85. Permalink to comment#

    I tried it on iPhone 4, too. On the frontpage, the code example box in one article pushes the sidebar away. Screenshot: http://cl.ly/3Trb

  86. Permalink to comment#

    Props for inviting feedback on your site tweaks, some people take that as an invitation to play Art Director, which is always amusing.

    Anyways, kudos – i dig the design changes.

  87. Permalink to comment#

    Cool and stuff and I understand the desire the change one’s own website but it might not be a good idea to change so often. Wasn’t v7 introduced around September?

  88. Love it – the comments look excellent, and the area in the footer about your other work is now perfect. Great stuff!

  89. Just noticed a slight issue with some of the comments by the way – happened when I clicked to see buried comments – http://d.pr/LNFz – FF4/OSX

  90. Quentin
    Permalink to comment#

    It’s a nice design but you need to tighten up a fair bit. The logo is pretty pixelated for starters and I’m sure you’d have gotten a better result using pure text rather than an image; using the :before and :after pseudo-classes to add ‘CSS’ and the asterisk perhaps and changing the colors by using unique page identifiers in your CSS.

    And what’s with telling users to manually adjust their browsers so as they can view your design properly? You’re a professional designer, making your design properly viewable is your job. Presumably you don’t supply clients with an instruction manual with every site you build. Do you think that you should, maybe?

    I know I sound a bit acerbic and that isn’t really my intention but as a professional designer you should really pay attention to the details more closely. And definitely not instruct users that see faults in your design to manually adjust everything themselves. Especially things like the font size or screen size that the design seemingly depends on..

    • Quentin
      Permalink to comment#

      Oops. just noticed that the logo thing is all text. Ignore what I said there then =P

    • Chris
      Permalink to comment#

      As Chris stated above, most people are viewing this with 1200px designs. He has also created multiple media stylesheets to adjust the design based on the size of the viewport.

      And the “designers” who state that the font-size is too big CAN manually resize it themselves. 16px font is not “too big,” it’s just become passé to use 10px copy, and it needs to be rectified for the good of the web.

      To state that Chris Coyier hasn’t paid attention to the details? You’re friggin crazy.

    • Quentin
      Permalink to comment#

      Fair enough.

  91. New design.. new experiment.. :) Hopes that its a Wufoo inspired one :)

    <3 your site :)

  92. When you start typing in the comments section, the star disappears. The problem is that when I delete all the text I have typed and stop focusing on the text box where you type the comment, the star doesn’t come back. That could be something that may have been overlooked by mistake since the rest of the website looks super simple and super easy-to-use.

    Also, when you (Chris Coyier) used border-radius on the buttons, the background kind-of bleeds out.

    One last thing, you might want to make the text box (where you type in the comment) resizable only vertically, since resizing it in Webkit browsers vertically messes up the design. You might want to use resize: horizontal; for Webkit browsers (and other browsers that might support it) to eliminate the problem.

    Except those mentioned above, the website is really fun and intuitive to use. I loved it.

  93. Permalink to comment#

    I love love love the design of the comments!! Very refreshing. Feels new and different in a global websites/design sense.

    I’m also pleasantly surprised by the body font. I think it works great. It’s really readable and feels unique but matching the feel of your site and your overall voice.

  94. Dig the comment section Chris, but the nav isn’t for me.

    The thing I find obtrusive are the animations. They’re entirely unnecessary and detract from the usability.

    I’d also like to see the footer grid elements always lit up. I’d be much more likely to notice them and take action than they are right now.

    • We’ll see what happens with the navigation… seems to be a common point of dislike. I don’t care about “unnecessary” there are tons of things on this site that fall under that category, but they are fun CSS tricks and this is the perfect venue for them. You could also make the argument that they increase usability since the link target increases in size as you mouse to it, which makes for a more comfortable clicking experience. I’m not arguing that, I’m saying it could be argued =)

    • Permalink to comment#

      the nav animations feel very outdated… not hating them, but it feels very much like early js accordion scripts. I think it’d be better if they weren’t a solid color background.

      About the footers: maybe have them default to an intermediate state (say, faded) and have the inactive ones fade to gray when another comes into focus?

    • As a Director of User Experience, that’s an argument I’d love to have with you ;)

      I accept your justification though Chris. If ever there was an appropriate venue for such an implementation, it’s this site.

  95. Permalink to comment#

    Using Facebook lingo: LIKE!

  96. Permalink to comment#

    cool… a little large for my taste, but I can fix that with [ ctrl ]+[ – ] : )
    The image rotation is choppy in Fx (the paperclips), though after some research I guess that’s FireFox’s fault. Looks fine in other (good) browsers.

  97. Permalink to comment#

    Yeah I just don’t know about this design. I don’t think I can jump on the bandwagon with the rest. The footer is the only really cool part of the design in my opinion.

    Love the site, and I already miss v7.

  98. Permalink to comment#

    Nice Chris, one more time an update with lot of new features.
    By the way i love the comment form and the footer animations.
    Thanks for giving us always more inspiration.

  99. Daniel
    Permalink to comment#

    I like the design! Just wanted to say though that your asterisk does not look good at all in windows without the courier font installed. Most windows computers (I think) only have courier *new* and now it shows up all jagged

  100. I’ve mentioned in the forums and I think it’s worth mentioning here as well. The rotated triangle that hides the top left of each “article” is not quite ‘up’ enough to cover all of the white (Win7, Chrome 7).

    Using the Inspect tool and changing the top value to ‘top: -11px’ does the trick. Maybe its just the way Chrome renders and rounds up/down values?
    Is anyone else able to see this issue?

    Liking the site more and more. Hat’s off for breaking the normal “work to the lowest common denominator” rules. It may be controversial, but if we all move forward those who lag behind will just miss out – they still get to see the content!!

  101. DJ
    Permalink to comment#

    “Looks bold” = ‘kinda cute in a Simpsons sort of way’

    I may be in minority (at least in the comments) but much preferred the look (and wit) of you last design.

    I do understand the feeling when the bug hits to “redo with fancy new coding” – just the prev seemed much better layed out and more professional.

    (you did ask)

  102. Great job Chris, this is def my favorite version of the website.

    I would just work on the logo a bit more and make the background darker, those are the only two things that bother me because the rest of the design is so solid

  103. Permalink to comment#

    Great job Chris, very colorful and unique layout.

  104. Clint F
    Permalink to comment#

    Sorry but find the design quite bad on my setup (XP)

    Ff3.6 the fontsizes are all over the place. OK so this is an old browser so try something modern…

    Chrome, Safari & Opera (all latest versions) the fonts render very blockily making them hard to read. Anyway I can disable this font-face on my browsers?

    Navigation and lag-time are not the best.

    Have to say I much prefer the previous two designs by far but I guess nothing improves without change.

  105. jsdev
    Permalink to comment#

    Chris I like aspects of your new design., the footer links and “It’s your turn” form specifically. though not sure anyone views this site on their droid phone, but the footer links are only gray, since there is no hover ability, idk have an ipod/iphone to test.

    But one of my favorite things from v7 was ability to hover over the ————– * ————— on new post previews, and see how active a post was before clicking on it.

    Love the experimenting though!

  106. Marco
    Permalink to comment#

    Chris,

    The form to comment hicks up a bit… takes a bit to kick and type, don’t know if it has been mentioned already.

    Don’t forget your super-duper selector eh? It’s back to the blue!!!

  107. Will
    Permalink to comment#

    You should create a subdomain for each version of your site.

    That way I can rollback to ‘version7.css-tricks.com’

  108. Matt
    Permalink to comment#

    BAM

  109. Permalink to comment#

    This design has a really elementary CSS issue. Font stacks (or lack thereof). You ought to deepen yours, because the only fonts you specified didn’t load for some reason when I viewed it in NetNewsWire. And let me tell you, all that hard work looks pretty ugly when everything renders in default serif (Times New Roman).

  110. Permalink to comment#

    I actually quite like how you have chosen to display the comments stream. It looks good and is easy to follow.

  111. Chris
    Permalink to comment#

    hate the hover on the menu with moving text en growing li’s….

  112. Ah!! the Comment sections just too damn fucking amazing!!! You have made me kind of rethink the design of my site just when i was almost done… :D

  113. Awesome Design, im using chrome 9 everything is great… no problems at all.

  114. Awesome work Chris!

    Absolutely love the sheer simplicity and cleanliness of the design, plus all the CSS3 and HTML5 goodness… Oh it’s enough to make any designer and developer fall in love with you 1000 times over :P

    No, but seriously, I feel this design is the apex of the designs of CSS Tricks.

    Keep up the good work!

  115. Harry
    Permalink to comment#

    Hello!
    Love the new layout, great!
    But..

    FireFox 3.6.1.2. ( and new beta also) Makes the fonts not verry nice to read.
    see pic. for Example @: http://www.crazylady.eu/Chrome-Firefox.png

    IE / Chrome does not seem to have these problems,

    Anyone has an idea?

    Grettings Harry

  116. Permalink to comment#

    I find the new design to be fresh, bold and original. I took a few mins to get used to but I like it, especially the comments section.

    The thing I do not like are all the animations. I know that this is a good playground to apply them, yet I think they only hurt usability, not enhance it. It is fine to experiment of course.

  117. Kyle
    Permalink to comment#

    Wufoo called …. they said they want their colors back.

    Just joking !!! I really love the site and the colors. Excellent work !

    • Permalink to comment#

      Hahaha..good point! That’s sooo where the inspiration for this new version came from!

  118. I love the colors but I am in the office and IE7 is their choice of poison.

    The images don’t show up for the post therefore, it pushes that portion of the site off into lala land.

  119. Permalink to comment#

    Looks absolutely rocking in FF4 Chris,

    How long does a redesign like this take you? I spent ages trying to make my blog look half decent recently and it still looks like a pile of crap compared to this!!

    Love the little touches

    Phil

    • Timing wise, I’d say all in all about 3 days, but broken up time-wise over maybe 9 days. Best to keep working sessions short and revisit the ideas later. The more small iterations, the better for me.

      Start with basic ideas in Photoshop, move to static HTML/CSS, flesh out and iterate over that for a while, extend idea to other pages and see how it works, iterate again. Then move to WordPress theme. Then launch it prematurely and fix tons of bugs over a couple days. That’s typically my process =)

  120. Permalink to comment#

    Absolutely wonderful design, Chris. The only problem I can see right now is that my current browser (Google Chrome 9.0.597.0 dev build on Windows) is not loading the fonts in the main nav bar. I may just be that it is the dev version, but I just thought I’d point that out. Again, great design, and the usability is nice.

  121. Permalink to comment#

    Hello Pro!

    Love your design

  122. Dusan
    Permalink to comment#

    Lovely! Footer is just yummy. Main navigation is kind of irritating (hover resizing) but that is just my 0.02$

  123. Clare
    Permalink to comment#

    When I zoomed to 110% there were some random icons that appeared, including the Lynda.com and WP logos. Down the left-hand side of the article. There was also a RSS icon too amongst others. Looks like the ones that slide that were off-screen prior to the hover state.

    Also some of the Gravatars overlap onto the comment area (i.e. the white comment area). Particularly in the nested thread.

    That aside and some random issues with the navigation going onto two+ lines depending on the zoom level and the poll buttons stacking on top of each other (and literally touching), I think the design’s quite good. Very unique and bold.

    Browser: Chrome | OSX [Snow Leopard] | 1280×800 resolution – MacBook Pro

  124. I dig the attempt, but sorry Chris, it’s huge.

  125. Owen
    Permalink to comment#

    The two main issues I see: 1) loading the font is causing the page overall to load very slowly… it takes about 8 seconds for me, and I’m on a pretty fast link, and it doesn’t seem to be cached. and 2) I think other people have mentioned it, but (in Safari) the page becomes unresponsive at times and I can even feel the lag when typing this comment…

  126. Kawohi
    Permalink to comment#

    I just check one of your old articles. When coding is pass the width of the comments, the code overflows.

  127. Nice Job here Chris!

    I wonder if this edition stems from that fact that you (like me) are aging and your more comfortable reading a little larger text.. I love the fact that I do not have to CMD+ to see any of the text :D

    One little suggestion.. seeing that the text is larger and you have added in quite a bit of white space I think it might be a good idea to add a Page Up link at the bottom of the page.. I know they are kind of old fashion but.. you would not want me getting carpal tunnel from my mouse wheel would you?

  128. Permalink to comment#

    Chris,

    I’m having difficulties viewing the entirety of navigation menu. Windows 7 Pro 64 bit on Firefox 3.6.12.

    Hope you have a chance to fix it :D

  129. Kurtis
    Permalink to comment#

    Something that you may have noticed, but my eyes seem to find quite unpleasing is the height of your navigation text. Particularly with Forums, but also on Home, Videos, and Snippets the height of the text changes over the course of the word and gives the text itself a sort of wave effect that is unpleasant, at least to my eyes.

  130. Dude. Fan-friggin-tastic! I love the new comments layout, very progressive. I’m seeing a lot of the comments are mentioning the width – did you do much analytics digging before the redesign to see what the prevalent resolution was? (I just redesigned at 940 wide and I feel cramped, but it was based on visitor statistics.)

  131. Permalink to comment#

    I like the new design. Comment section is great, not sure how I feel about the 1200px size.

    I was never a fan of v7 and found myself visiting the site less often.

    Wish you would have included the Banjo pic again!

  132. I am using FireFox 3.6.12 on a PC and on the contact page the green snippest menu drops to the next line. (Menu)

  133. Permalink to comment#

    Just wanted to pop in and say that this is easily your best design yet. All of the other design’s felt a bit gimmicky (what does a paper/corkboard texture have to do with css?).

    This design is much livelier than the last version, yet retains that nice simplicity you had. Everything feels nicely cohesive and functional. Really love the little subtle jQuery you’ve implemented.

    Hopefully you stick with this one for a while because it’s great.

    Keep up the great work.

  134. Jeremy Freehill
    Permalink to comment#

    Hey props to ye on the design refresh Chris. The colors and subtle animations (with the Wu-Fluence sprinkled throughout) are a nice touch. Personally I liked the previous design a bit better for some reason, but maybe it’s just a process of warming up to it.

    Anyway I have a few small notes incase no one else has mentioned these:

    i. There’s a small but noticable difference in the rendering of the little post corners between Webkit and Firefox. Not a big thing, but interesting anyway. Proof here: https://skitch.com/jfreehill/rn98a/css-tricks-corner

    ii. It’d be nice to still see the color difference in yours (orange) or useful (blue, or whatever other color) comments. Perhaps you could this time limit them to just having a different color for the circle around the name, or a border color.

    iii. Is the huge gap below the text in comments for readability? It seems to add alot of height to the page but maybe I’m just nitpicking.

    iiii. (last one promise). New media queries are awesome and works well great on any of the Android browsers, BUT I am also having performance issues with resizing in Safari only, so something worth looking into.

    Must be nice to have your own army of free UI testers eh? Heheh.

  135. amit
    Permalink to comment#

    Hey chris nice attempt.
    I really liked that meta-date and comment at the top-right corner of post.
    But the top nav-menu animation are looking odd, try to use some different animations that are not common.
    :)

  136. There are problems when switching to some other site and then back to this site’s tab. Also, I can’t scroll back to top navigation.

  137. Hmm...
    Permalink to comment#

    Seriously, you change it too often.

  138. Permalink to comment#

    Chris, i am from India. In mozilla because of too many CSS and slow bandwidth here it takes too much time to process here. So the browser actually hangs. I even tried it with other website but that does not slow the browser.

  139. stephen
    Permalink to comment#

    hi chris,

    design v8… after the last refresh i thought it only can get better, but in fact it got worse. horrible! toys’r’us colors, ugly using of fonts etc.

    a cobbler should stick to his last … do coding, not design.

    regards stephen

  140. Permalink to comment#

    New design is legit! Loving the bold colors.

  141. peter
    Permalink to comment#

    Ik very much like what you did with the comment section (designwise), the buttons at the bottom and the styling of links. The top menu I’m not that fond of.
    I like the idea of what you did with the ads on the rightside, but there’s something that bothers me there, but I’m not sure what exactly.

    Overall it’s a nice and refreshing design, I just think the top-menu kills it a little bit.

  142. Tadzzzio
    Permalink to comment#

    Very vibrant and clean design. Better contrast than the previous design making it easier to read IMO.

    Great site in general, thanks for all your work!

  143. Permalink to comment#

    Comments looks really amazing! I think, this is one of the best design I’ve ever seen.

  144. brad dunbar
    Permalink to comment#

    I love the new tabs, and I agree about the bold colors livening things up.

  145. Anthony
    Permalink to comment#

    Weird thought I had commented yesterday. My favorite thing missing is in v7 you could see the # of comments before clicking on the post. It had a cool hover effect when you hovered at the bottom of the preview for compliant browsers and just showed the #comments and Read On! link for non compliant browsers.

    Favorite part of new section is the It’s Your Turn.

    I have mixed feelings about the bottom totally grayed out unless hovered over the container, because if you are using a touch screen hover is not detected.

  146. Al
    Permalink to comment#

    any plans to fix the display for IE7???

    don’t see any of the posts at all, first thing is the article on video casts, I am an IE guy, usually browse here with IE7, computer won’t load IE8 and I cannot be bothered doing it, run XP so cannot go to IE9

    also, PLEASE PLEASE back the link to the archives

    Al

    • David
      Permalink to comment#

      Not to offend you or anything… but how can you be coming to a site like this and still want to use IE?

  147. David
    Permalink to comment#

    I think the re-design looks great. My resolution is at 1920X1200 and I bumped it down to 1200X800 to see what it would look like and it was still fine.

    I really don’t know anyone with a screen lower than 1200x- anymore. If you still have one lower than that, consider this a reason to upgrade. It’s 2010.

    One issue I noticed on the iphone 4, is that on the home page, there is nothing bellow the google search bar under the nav. Just white space. May be intentional?

    • Permalink to comment#

      Yeah…my old professors and colleagues would always say: “Design for 800×600.” I think they are a bit nuts!

      Is anyone still designing for 800×600 resolution? Craziness…There’s a site (have to find it) that tells you the percentage of people that use certain screen resolutions. 800×600 has fallen by the waist side some time ago. I don’t know many people still designing for 800×600.

  148. Rob
    Permalink to comment#

    Love the way you’ve done the comments and the boxes at the bottom. The “turned corner” stuff is pretty overdone these days, though. Also, I don’t like it when links move, as in the main navigation bar.

    With the exception of the colors used in the header, the site still feels like an evolution rather than something new altogether, which I believe is in line with your philosophy on that sort of thing, so great work.

  149. Bruno
    Permalink to comment#

    I like the design but i hate the font. It is not clear and has a “pixelated” look.
    It´s hard to read.

    It looks like it was done by a printer with low level of ink.

  150. Permalink to comment#

    Hi Chris,

    Great new look; I think the site has a fresh appeal. Plus, I really love the social apps/advertising boxes at the bottom of the site—great roll-overs for those features! :)

    Thanks,
    Rob

  151. Anthony
    Permalink to comment#

    @DAVID I agree, I don’t know why anyone who regularly reads this site would browse it on IE7 and not safari,firefox or chrome or even opera. I didn’t think this site looks that great on my droid phone, but really this is the kind of site where you play with the snippets, and who codes on their phone…

  152. Permalink to comment#

    It’s simply crazy good. Love your work man!

  153. Wow this is a really landmark theme! The different css for browser size is pretty cutting edge! I was all in the middle of resizing the posts meta data div to float right with some margin and I resize to take a screenshot and it pops up to the right with a paperclip…. magnificent.

    The menu is nice but the footer is insane!! Also expect a ton of coments because this is hands down the best and sexiest comment form I have ever seen!

    One thing though, please put cursor:pointer on the submit button!

  154. Permalink to comment#

    Nicely done, really like the new design

  155. Spreng
    Permalink to comment#

    At first I was a bit surprised at the new design, but now I think it’s the best design yet! Keep up the good work!

  156. Permalink to comment#

    wow!! so refreshing. nice grids, typography and cool ad-banners and gravatars!!

  157. Permalink to comment#

    I think it is brilliant! Nice work Chris…

  158. Steve
    Permalink to comment#

    I’m on the fence about the design. It definitely has some nice features, although at times it reminds my of those early flash sites that would do all those fancy effects just because.

    I also don’t like how much content is “below the fold” on the home page. I visit the site on a regular basis and usually don’t make it past the most recent articles, although if I was more aware of the updated screencasts etc. I would probably spend more time in those areas.

    I will admit, I was unsure of the last design as well but over time it grew on me. I’m sure this will be the same

    • I can understand the not liking “those fancy effects just because”, but this website is specifically a site where I feel like an overindulgence of that is OK, in relation to the namesake.

      Here is a good article antiquating the notion of “The Fold” http://iampaddy.com/lifebelow600/

  159. Not into your new design. I really like your work usually but this doesn’t do it for me at all. Looks like some kids website.

    The last version was much better IMO.

    Sorry…

    Ps
    Like the round gravitar icons though

  160. Just been playing with the rollover boxes at the bottom these are cool.

  161. Permalink to comment#

    Super Design Chris

  162. Daniel
    Permalink to comment#

    Chris!

    I love it!… continuous change is evidence of life!…

    Thanks for the Great resources! you have saved my life a lot of times!

    Daniel.

  163. tpr
    Permalink to comment#

    I was shocked at least three times.

    1. WTF?
    2. Why so many positive feedbacks?
    3. If it’s that really that good, should I continue being a designer?

    Sorry Chris, I appreciate your works but this is really not to my taste. I like bits and pieces of the new look but overall I’m not into it. Thankfully blog content still rocks!

  164. Hey Chris,

    There is a lot to like here and I definitely respect your ballsiness on the design. When I’m on my 27″ iMac, it looks great and I can work with it. However, when I’m on a ~1200px wide display (like my laptop) you’re really not leaving any wiggle room for those of us who work in OSX-like environments where we’re not always expanding our browser windows as large as they’ll go. Everything is just a bit too large for anything but very large screens. That’s my take on it, anyway.

    Other than that, I LOVE the way the comments are laid out, best I’ve ever seen, anywhere. The bright colors and animations are not my cup of tea, but they’re very fitting for a site that is based on CSS and the color differentiates it from all the other boring-looking web design-based sites out there.

    -Shane

  165. Alistair
    Permalink to comment#

    Not sure if you know Chris, but the site is wicked messed up in FF3.6.12

  166. Permalink to comment#

    In Google Chrome work not correctly.

  167. Permalink to comment#

    Only with enabled GPU acseleration on new beta version.

  168. Permalink to comment#

    Sorry for double post :)

  169. Another redesign already? Woah, I thought I redesigned a lot. Looks nice though! Love the simple look of it.

  170. Absolutely outstanding redesign Chris. I just love it. Meh, I wish I had more time to follow your tricks and all the work. Great source of knowledge .

  171. Permalink to comment#

    Now this is what I say the best design that suits the site name. Lotsa CSS tricks has been used. Awesome Chris!

  172. mohammed
    Permalink to comment#

    you’re the master of web design

  173. Permalink to comment#

    Like said already, that’s awesome you’re going to something bold and unconventional. Don’t use safari/chrome much, but the animations are fun.

  174. Josh
    Permalink to comment#

    I REALLY like this design compared to the last one – nicely done. I felt like the previous design was kinda forced.

  175. diegocrusius
    Permalink to comment#

    I know thats pretty borderline and Im sorry for the forum disruption in advance but I guess its a really good opportunity.

    There should be a good good way to test sites, crossing over the really most relevant OS’s and Navigators.

    I know this is hard tuff (and prob stupid) to try and test it in just one pc/server, but it would save us a lot of time. Thank you.

  176. Permalink to comment#

    Well.. Sadly to say Chris, but i don’t like the way that site looks now. Its hard for me to find correct word – but first thing that goes in to my mind – it’s to lolipop like. To much of diffrent colours maybe.
    But whatever the design is – I will always visit Yours blog not for design, but for great knowledge I can learn from Yours post.

    Best Regards.
    Martin.

  177. Permalink to comment#

    Hi Chris,

    I don’t know if this is the right place to mention it but everytime I go on your site, it makes this wierd scroll issue and ends up crashing firefox. I wondered if anyone else is having that issue?

  178. Des
    Permalink to comment#

    Hi! Does anyone have any idea why the fonts look so crappy in Chrome (Win XP SP3): http://dl.dropbox.com/u/2919142/scrnshot.jpg ? Thanks in advance!

  179. Permalink to comment#

    Hi Chris,

    Ok here are my two cents. First I think that it is a fun design, still functional and easy to use. But the only thing that I dont like is the navigation, Im not sure if you did that on purpose or not, but your navigation on “hover” moves from side to side, its unusual and it feels like a bug. You may have already looked into this, but if you keep your widths consistent on the “hover” and “a” you will get rid of that problem.. dont know just my two cents. Thanks for all of your hard work… I really appreciate it and have learned tons from you.

    cheers,

    Carlos

  180. amidude
    Permalink to comment#

    Very nice Chris. I loved the simplicity. You’ve inspired me to finish my site. :-)

  181. Permalink to comment#

    I guess i’m the only one that doesn’t like it :)

    Looks like a design more appropriate for Toys ‘R Us or whatever the heck it’s called, so like a website for little kids to play around click stuff and admire the colors.

  182. Chris, it certainly is a vast update from version 7. However there are certain elements that I really like.

    Firstly I like the way the ad section in the right sidebar tie in well with your site as they have the colour scheme behind them, which in my opinion make them look less like random ads. Which is a good thing.

    Secondly the comments section look very unique and I like the way the Gravatars link the comment box. The footer is really nice too, with the colour change as you hover over each.

    My only concern is the design feels perhaps a little ‘stark’. I only say this because there is very little texture or dimension, so this can make it feel a little flat. With the danger of contradicting myself, I am actually a fan of flat colour design layouts but in this case (perhaps compared to your previous designs) it is too much of a jump.

    Great work as always.

  183. Martti Smkök
    Permalink to comment#

    It’s really awesome, love the colours and typography. Though I have weird problems in FF with this design, very weird indeed. I browse to the address, but nothing comes up. Not anything. Only the content of the last open tab. It’s only when I move my cursor around that links, images and those sorts start to pop up. This is very unusual, weird and scary even. Maybe it’s some HTML5 troubles.

    Wndows 7 32-bit Firefox 3.6.8.

    Problems aside I really, really, really like the design. I’m jealous. And I’m going to rip ideas out of this design into my little project, specially when I as well rock the gray scale colours with little splashes of colour.

    • Chris Howlett
      Permalink to comment#

      Except that I have Firefox 3.6.12, I have the same setup and the same problems.

      If I navigate to or refresh the page, the main content “section” renders, but the header (including the nav bar) and the dead areas on each side (since my window is about 1920 wide) show the last-loaded tab. If I hover over where the nav-bar should be, it appears.

      Further, when I scroll up I get a weird artifact where the drawing tiles horizontally; I end up with stripes across the screen of height equal to the scroll-distance, repeating the same content (roughly the bottom half of the first article lead box on the front-page).

      I’m afraid I’m reduced to reading you in Internet Explorer for now…

    • tully
      Permalink to comment#

      I have the same problem too, but it’s only on my XP machine and not my Win 7 box.

  184. Hey Chris,

    I gotta say that you keep improving your site. I like the idea of reinventing yourself. It shows maturity and the risk of trying new stuff. That’s what a web designer and developer is all about. I got say that you have picked up an edge. This has got to be one of the best new redesigns out there. It show cases the power of css and best of all the comment threads just make the site unique.

    Great Job!!! Keep up the good work!!!!

  185. afzal
    Permalink to comment#

    looks cool, flamboyant, inviting… Good Work!

  186. Stefan Matei
    Permalink to comment#

    But isn’t there any way to go to the second (3rd, 4th, etc) page of the blog posts? I can only get to the latest 5 blog posts.

  187. mkoistinen
    Permalink to comment#

    Hi Chris,

    Love your articles. And, while I think your new design is neat, there is something to be said for letting the content shine first. It’s sometimes hard to see the trees for the forest here.

  188. Permalink to comment#

    love the redesign – but why no ‘share’ links at the end of your posts?

  189. Permalink to comment#

    Chris, I couldn’t find any pagination! How can I get to page two?

  190. nice design Chris, the most thing i like comments :D
    i like it too much , any way the change is good from time to time ;)

  191. Permalink to comment#

    i don’t like it

  192. Permalink to comment#

    Wow. Just wow.

    This is the single greatest CSS and HTML5 achievement I have ever seen, hands down. The little touches really drive it home – I’ll definitely be checking out the nooks and crannies of the code for a few hours.

    While I might disagree with some of the design decisions, this an incredibly impressive tech demo for web standards. I still think animations should be invoked by JS at all times, though (if the browser supports CSS transitions, however, then the JS animation engine should invoke them under the hood for performance), for separation of concerns.

  193. Víctor
    Permalink to comment#

    I have to say to you, Congratulations!!! The new look is very very Cool, nice ‘n’ clean. I really like it.

    I was reading some css tutorials about some months ago to mockup a website froms psd 2 xhtml wich help me a lot. Thanks 4 that!

    I think you made a great job on the new look.
    I think that Combining contrasts colors and a nice typogrpahy is the perfect way to make a nice website.
    An simple but very smooth contrast colors with typography, Brilliant!
    Users, coments interface are made with very care.

    Making an simple and nice web is something complicated to achive.
    Sorry about my ugly English I’m improveing it.

  194. Chris
    Permalink to comment#

    This may have been mentioned (don’t have time to read through 260+ comments), but the new design seems really buggy. I’m on Firefox 3.6.12, fairly standard screen resolution.

    When switching browser tabs and returning to this site, the layout messes up. Various elements are repeating and overlap one another. Also, the scrollbar no longer scrolls to the top of the page, it seems as though much of the content is missing.

    Also, everything seems super big.

    Big fan of the comments area though.

    • Permalink to comment#

      What he said. I can no longer view this site in Firefox 3.6 (Windows XP).

      Switching tabs then clicking back to the CSS Tricks tab crashes the browser, and clicking on any article from the homepage also crashes the browser. This is a pretty beastly XP machine, too (3.0GHz quad core with 3GB RAM).

    • Permalink to comment#

      I agree,

      I don’t have time to read through 200+ comments, but this website looks really buggy in Firefox (newest version). The nav bar is completely screwed up, all of the items are overlapped, takes a really long time load, etc etc.

      I tested it with Chrome and it looks fine, and it also looks fine on Firefox on my MAC machine. So, something that has to do with Firefox on PC.

      I’m using Win 7 pro.

  195. Permalink to comment#

    Nice new design :)

  196. amidude
    Permalink to comment#

    I don’t mean this as a slight Chris but I’m curious. Are you happy with the jagged look of the fonts on your page now? Or is there something wrong with my monitor?

    I only mention it because on my monitor it is very hard to read as the smaller print has lighter and darker areas where the titles and tabs have jagged edged fonts.

  197. Permalink to comment#

    BAD DESIGN

  198. Very nice work, Chris. Definitely your best version yet.

    Interesting…I’ve seen a lot of other sites using Tandelle and look-alike fonts. I started using Bebas in my redesign-in-progress, which looks pretty close. The comments and footer design is especially good.

    You continue to be an inspiration, sir. Cheers.

  199. Víctor
    Permalink to comment#

    Guys, do you mean It is buggy in Firefox 3.6 or a newer versión?

    It’s weird ’cause It seems to work properly in Firefox 3.6 (Mac OSX)
    At last in my case.

    well, allways there is some problems with the black sheep browser…(IE)
    did u try that browser?

    • Permalink to comment#

      Victor —

      The problem is with Firefox 3.6+ on Windows XP/Vista/7. It works on OSX.

  200. Víctor
    Permalink to comment#

    I didn’t notice the footer part of this web!

    Nice man, I’ve never seen this kind of footer.

    It’s really pretty.

  201. Permalink to comment#

    Hey Chris,

    it’s not of importance what my impression of your new design is, but it reminded at first of the Windows Phone UI – which is quite good and simplistic (surprisingly ^^).

    Regards,
    – Alex

  202. amidude
    Permalink to comment#

    Found out the problem with the fonts only exists on PC’s. On my MacBook Pro there is absolutely no problem with the fonts. (Mac’s rule) :-)

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