Grow your CSS skills. Land your dream job.

Design v7

Published by Chris Coyier

I rolled out a new design this weekend! As usual it's a bit of an aesthetic overhaul (blue!). I'm going to cover the why, the new aspects, and some of the new technology involved. RSS readers, you'll have to make the jump and look around =).

And now, a note about critiquing: I love critiques! If you want to rip this design to shreds, please do so. I have my bachelors in Art and part of that was getting torn apart in critiques when deserved. It makes us better. I am accepting all criticism, and I am also open to changes if I see a trend in comments or something is said that resonates with me. That said, I'm not open to generically negative comments like "I liked the old design better." I've even already heard nonsense from people who have "lost respect" for me. All that does is hurt my feelings and in turn, make me lose respect for them. Comments like these are often fear-induced who-moved-my-cheese reactions, not careful considerations. Like all comment threads on this site, this one will be moderated. I spend a lot of time with this site and this design reflects what I consider to be improvements across many aspects. Please take the time you need to let the design sink in and consider it, and comment below with your thoughts. Thanks =)

Why?

This isn't the type of design that ends up in CSS galleries. It has ads on it. It's very utilitarian. It just delivers the type of content that this site has in a (hopefully) very findable and easily digestible way. The font size of body text in articles in this new design is up to a fairly large 16px. My eyesight is fine and I I haven't heard any big complaints about readability before, but lately I've been finding myself bumping up webpages a few notches because I find large type easier to read quickly with higher comprehension. Or maybe it's in my head, I dunno.

I also felt the need to rejigger some of the advertising on the site. I dropped some of the zones I felt were awkwardly placed. I added a few new ones and adjusted others. There is about the same amount as there ever was, I just feel like it's integrated nicer. If anyone is interested, there are zones still open on BuySellAds.

Speed is also a factor. There are less images in this theme which helps speed things up a tad. I tried to sprite things as much as I could of course. I'm rocking about a 2 second page load time on average, which isn't amazing but I think is decent for a site with this much stuff on it. Some of the slowest stuff is external, so we'll see what happens there...

History

For longevity's sake, I'm keeping my archive of old embarrassing designs on a new Design History page.

New Stuff

  • Linkage has returned!
  • Site is running WordPress 3.0.1
  • The site now fluid width for the first time ever. It fits into 1024px screens with no horizontal scroll and spreads up to 1200px. Not a huge spread. One of the things I like the least about fluid width designs is when all that changes is the line length of text. There are line length changes here, but they are fairly reigned in and there are subtle layout adjustments where needed.
  • There are the new official twitter buttons on posts. I've always been a little sour on social media buttons. For example, if you are a Delicious user, you know the tools added to your browser are 10x better than a link on a website. However, 1) I kind of like how these buttons work 2) Twitter is my favorite social site and 3) I can now feel like I'm not throwing away potential traffic from some ideological stand.

Removed Stuff

  • The latest tweet bubble is gone. That was in the last two or three designs and I'm now over it. I feel like many times just seeing my latest tweet was weirdly out of place. More importantly, it was slow to load (I never did any caching). There are still social media links in the footer (including some new ones!)
  • A long time ago I used to allow people to "register" for the site through WordPress. It was short lived as it ended up having very little purpose. There were about 1,000 registered users, half or more of them spam. I have always wanted to get rid of those users to clean up the database. The problem is, deleting a user in WordPress means you need to attribute their comments to someone else or delete them. I didn't want to delete potentially valuable comments. So... there is one generic user left called "Old Registered User" to which those comments are attributed. Kinda sucks, but it's all stuff that is years old and there isn't all that much of it.

Technology Notes

What would a redesign be on a site like this without newfangled technology?

CSS3

  • There are CSS Triangles in use. The main navigation uses them to help indicate current location and the voting question bubble uses them as well. The voting bubble even uses two of them on top of each other to achieve a sort of triangle-with-border effect.

  • The VOTE section features a question bubble which uses a gradient background as well as rounded corners (as do many other elements).

  • The various list-of-links in the sidebar for helping explore this site and others have a link nudge effect done with CSS3.

  • The PROPS section features little cards which perform a 3D flipping effect in WebKit browsers.

  • The boxes in the right of the footer also have an animation effect where information about that subject will slide up from below when moused over.

    If you don't have access to a WebKit browser, you can see a screencast. Safari 5 users, are you seeing lots of "blinking" and awkward flashing when using some of the interactive things in the footer? Chrome is fine. Weird.

  • There is a small use of CSS media queries where the footer rearranges slightly if the design is at it's widest.

    The 125x125 ads in the sidebar also do a bit of a shuffle via @media queries. When the design is at it's widest they are arranged 3x2 and any narrower, 2x3.

  • Part of dealing with fluid width meant making multi-column designs utilize percentages. That means the images in those columns need to use img { max-width: 100%; } so they can shrink/grow with the column as needed.

All of these effects I would consider progressive enhancement in that browsers that don't support any particular feature fall back to a plainer but acceptable experience. For instance, the 3D flip cards just instantly show their "backs" upon rollover.

HTML5

  • New DOCTYPE, use of new elements, etc. Basically it just feels good to be using the simplification that HTML5 offers and the more semantic elements. I probably didn't do a totally perfect job on using all the new elements. This will likely evolve over time.
  • The video pages (example) now use HTML5 <video> tags to display video. They will play natively in WebKit browsers which support H.264. Browsers which don't will fall back to Silverlight first, then to Flash using mediaelement.js. The UI controls remain consistent no matter which technology is in use. I would have liked to go fluid width with the video but there were many problems with that (which I may post about). Particularly nice is the jump-forward abilities of these new players (without requiring preload) that the old player could never do.
  • The search form is now literally just a styled input, meaning there isn't the weird line-height issues I had with the old designs image based background. HTML5 helps out in WebKit browsers with <input type=search results=5 placeholder=Search... name=s> allowing this look and functionality:

    What's with that awkward outline highlight? Might be a WebKit bug.

  • The comment form features additional HTML5 form features. The fields have placeholder values and also use the "required" attribute meaning modern browsers won't even attempt to submit the comment without the required values (which can lead to an ugly WordPress error page).

jQuery

  • Anything that jQuery does that it used to do in the old design (organic tabs, toggling the search limiter, etc) it still does, but has been rewritten to be more efficient. For example the code now handles both organic tabs sections with one block of code instead of having it split up like it was before.
  • The homepage does "fadeouts" on the recent articles. I hoped it would help remove some repetitive page clutter while adding some visual interest. I had it working by using an :after pseudo element absolutely positioned to the bottom of each post, which would disappear on hover. I wanted the fading effect though, and CSS does not yet allow transitions/animations on pseudo elements. So I went with jQuery.

  • I'm having jQuery look for buttons on the page that contain the text "View Demo" or "Download Files" and do a little HTML manipulation and styling. Perhaps not an ideal method, but this makes it backwards compatible with my whole backlog of posts while keeping the button markup really simple.

  • Notice the sidebar has a background color to it that stretches from bottom to top of the white main content area. In early iterations of this design, I made the sidebar of a static width and used faux columns to fake the equal heights. But ultimately I decided that a fluid width sidebar would be cooler, which makes faux columns not possible. So to accomplish the equal heights, I have a simple resizing function which tests the height of the main content and if it's larger than the height of the sidebar, grow the sidebar to match. It's a bit janky... it has to run the resizer 2 seconds after the page load to account for third party content in the sidebar which may not be there on DOM ready or window load. It also runs it on window resize in case reflow affects the situation. It doesn't work perfectly and it warrents a re-think at some point.

To Come

I'm working through some ideas for the forums to make them more awesome than they already are, so watch for that in maybe the next few months.

Comments

  1. Mr Lol
    Permalink to comment#

    Not bad, but lose the fade out on listing page.

    • The theory behind the fade-out, besides being being of possible visual intrigue and an enticement to click what is revealed, is that it removes repetitive design elements from displaying at once.

      Read more →
      Read more →
      Read more →
      Read more →
      Read more →

      …all stacked on top of one another can be cluttery-feeling. I got the idea from listening to an iPhone app design talk at a conference where one of the principals presented was not using repetitive UI controls like that. Perhaps on the web we have more room to get away with it, but I’m just giving it a go for now. If enough people hate it (after some time), it can be rethought.

    • Permalink to comment#

      I see your reasoning for the fades, and I think it works. What I think would make it better, would be if it wasn’t fade out to nothing, but rather fade out to almost nothing (say 8 or 10% opacity). That way it remains low in the hierarchy while browsing over the page, but having it fade in from nothing over and over is more noticeable than having them not fade at all (possibly because the eye is drawn to motion, so less motion (less fading) should be less distracting). Sorry if that didn’t make any sense.

      …all the transitions mesmerizing when I fist saw them, I wasted like 5 minutes playing with all the new animation.

    • Although I get the idea, and I guess it could fit in some websites, I find the fade to be just annoying.

      With that said, I have a good first impression of your new design, though it will take some getting used to (was thinking I’d clicked the wrong bookmark the first time I saw it).

    • Permalink to comment#

      I like the fades visually, and for me they seem to reference some CSS Tricks ‘history’…isn’t this kind of a modified version of the fading text effect that first made css-tricks pretty popular?

    • I agree with Steven that a fade to 15-10% could be interesting even if when not faded they were only around 80%, the fact that they pop in and out from no where is a little distracting but nothing to write home about. I really love the new design much better than v6. Although v5 was pretty awesome as well. Great job!

    • Permalink to comment#

      I second that.

  2. Dusan
    Permalink to comment#

    I like it. Much cleaner. One thing I’d lose is the fading article footer on the home page. Just my .02$

  3. suprsidr
    Permalink to comment#

    Degrades well in crappy ‘ol IE8
    Nice and clean – don’t care much for the fade either.

  4. I’m not one to critique your design or website. It is original, as long as you like it, that is all that matters.

  5. suprsidr
    Permalink to comment#

    Poll question bubble does not present well in chrome.

    Re-visiting the fade. What’s the point? It does not save any space.
    Maybe if I hovered there long enough it should open the rest of the story’s content or something. Otherwise it lends nothing to the page.

    • sliver37
      Permalink to comment#

      As suprsidr mentioned, the poll bubble in chrome appears to have it’s box shadow ignoring the border-radius which sticks out quite significantly.

      Other than that, loving the new look Chris, at first I thought all those cool animations were Jquery, can’t wait to start playing around with CSS3 at this level!

    • sliver37
      Permalink to comment#

      The “submit comment” button is also a victim, albeit much less noticeable. Didn’t see it until posting that last comment.

    • The same problem with a colored background is present on the star that slides to the right when you hover over the posts on the main page.

      Only a problem in Chrome so far, both on Mac and PC.

    • agreed. The poll bubble could use some tidying up.

  6. Permalink to comment#

    The new design is very clean and spacious. The grays are very soft on the eyes which is great for readability and surely meets the goal of focusing on content.

    If there was a con, in my opinion, I feel that the site has lost a bit of personality. I’ve been an avid reader of your site since its inception. Every version had a clear brand and expressed your style. This one just feels a little too minimal.

    Either way, I still love your content. Congrats on the new design!

    ^__^

  7. Permalink to comment#

    It feels clean, I’m a big fan. The only thing I noticed is I feel like it’s a little harder to ‘scan’. Can’t figure out what to attribute that to, but I often get a short break to check the site and it just seems like I have to invest a bit more time in searching through copy to find items of interest. Maybe that was intentional on your part :)

    • There is actually more on the homepage now, so your drop scan-ability is likely only temporary as you adjust to a new layout. Let me know how that goes for you over time. Thanks for the feedback!

    • Permalink to comment#

      My only criticism is that the type feels a little bit tight, there’s not a lot of white space around it. Version 5 felt the most open and un-cluttered in that respect, imo.

      Respect on the 16px too!
      This, now rather old, article on web typography is a favourite of mine: 100e2r

    • Permalink to comment#

      To clarify that, I think the tight type affects the “scan-ability”.

  8. Permalink to comment#

    I like it as the rest of the commenter before me. It’s clean and easy to read.
    As some of the commenter above, i am also not big fan of that fade effect, but tastes are different.
    On win7+chrome there is issue with the “Vote” bubble, it has grey edges and Post Headings look somehow choppy also win7+chrome.

  9. Stephen
    Permalink to comment#

    Hey man!

    Love the new layout – looks great. Super clean..and the new approach on IA is definitely an improvement (last layout was great too, this is just so much better)

    As far as critique goes (and I realize this is nitpicky)…I would agree with those above who say drop the fade. It’s an interesting effect, but overall more distracting than helpful.

    Aside from that…love it!

    (Oh, and the css3 transitions on the footer…super pimp. Feels so much more responsive than a JS animation by far)

  10. Youssou
    Permalink to comment#

    I like the new design, there are some issues with the text lengt though.

    The first few paragraphs continue for a bit under the grey sidebar. That could be caused by Adblock, but since it also happens under the “Explore” section, I probably isn’t. Also, it happens in the comments.

    Anyway, a picture is worth a lot of words:
    picture, picture

  11. Hey nice update Chris!

    Liking the overall design, and in particular the ‘I work for..’ etc boxes in the footer work very well.

    The only small issue I see (might be related to the post above mentioning that its hard to ‘scan’ the page) is that the heading levels are all the same size, would be nicer to have the subheadings a little smaller to be able to “scan to subparts”, I may be crazy, its just what my eyes are telling me!

    Great site, love reading the articles here, thanks man!

  12. I like it feels less cluttered.

    The search submit and poll question buttons doesn’t render well in Chrome–ubuntu. There’s a background thing going on in the corners.

  13. Bert de Vries
    Permalink to comment#

    Another vote to loose the fade-out… Overall a very clean design.
    Some minor points:
    In the ‘leave a comment’ section there are some alignment issues (using Chrome on Win7).
    The use of orange color seems a bit out of place. Somehow it doesn’t fit in in my opinion.
    I realy love the footer, just i would find another picture.
    Never missed it before, but i’m looking for a way to see previous articles. I know i can get to the archive, but just stepping back in time would be nice.
    The text-balloon in the vote section is eh… Just take a look. Something not right with the rounded corners. Same goes for the blue buttons in the main area.

    Just my opinions…
    Greetings

  14. Eamonn
    Permalink to comment#

    Liking this version much more than the last, but I must add my vote against the fade out effect on the articles list – I think it actually takes away from the clarity of the list items, and (as you’ve gone for light greys and blues) it’s washed-out effect takes away from the strength of the overall theme. I’d contrast it to the sidebar, where things are big, bold, and clearly defined.

    Love the footer – and those webkit effects are groovy. Maybe throw a little TLC at the header too? Things are kinda just floating around up there…

    Anyhoo, that’s my two cents. Kicks the arse of anything I’d manage, so you’ve always got that! ;)

  15. All the animations and the “fadeouts on the recent articles” are excellent but the Go and Submit Comment buttons’ style is reminiscent of the pre-web 2.0 style, in short: you could have done better, especially with some subtle gradients. Also the tabs’ style is a little too flat for my liking.

  16. brad dunbar
    Permalink to comment#

    Feels squeaky clean and very polished. Love the details like the flips and animations and I like the fade-in on the home page for what its worth. The only thing that catches my eye is the tabs. The rounded corner on the left and not on the right makes me squint a bit as does the last notch (seems like there’s a tab where there isn’t).

  17. Chris,

    I actually like the fade effect. I never really liked (even on my site) the “Read More” link sort of marking the end of every post on the listing page.

    Good stuff – I’m diggin the new design and the little CSS3 enhancements!

  18. Jonathan Wade
    Permalink to comment#

    When i first glanced at the website I really didn’t care for the look, it was to boxy and hospital looking with the blue and grey. I then realized that I was looking at it in IE… so i booted up Chrome and omg. Great look, I instantly loved it. It was like I was looking at a whole different design.

    For the whole fade article thing everyone is going mother-in-law on you about, leave it. It gives a wow factor and a sense of fun, I agree that it may be confusing and a little pointless but everyone that comes to the site are either developers/designers and knows how to navigate a website.

    Keep up the good work.

  19. John
    Permalink to comment#

    I would say its a clean layout but for me it perhaps lacks the depth & ‘WOW’ factor of your last few designs……..sorry :( This design is quite flat feeling with too much of a feel of simplicity. The text in the tabs at the top looks a little stretched. Footer is awesome though and love some of the cool techniques you are using in this version.

    For me regardless of what this site looks like I will keep coming back because your content is awesome and you’ve really helped me with my own design projects, particularly WordPress ones. Keep up the great work!!!

    • Permalink to comment#

      I agree, the design didn’t have the same reaction I had with the last two design change. It seems a bit too …flat, for lack of better terms.

  20. All in all a great new look and feel. Only thing I’ve noticed is a problem with the comments when viewing with IE7. The comment author information seems to be pushed left under a layer. Took some SS for you:

    IE7:

    http://pd.alphaready.com/ie7.jpg

    IE8:

    http://pd.alphaready.com/ie8.jpg

  21. Jill
    Permalink to comment#

    I like the fade out. I agree with your theory that it keeps the page from being too repetitive. White space is your friend! The white space around each article also helps to separate them visually and generally give a clean look to the page. It also looks good on the iphone. Good work Chris.

    • Eamonn
      Permalink to comment#

      The whitespace argument is good – but try knocking off the whiteout PNG in Firebug and bumping the ‘post’ div margin up to 35 or 40. Same whitespace, but don’t you find it a stronger, clearer impression and easier to read?

  22. Permalink to comment#

    Chris,

    I really like the new design. I hear what a few are saying about the loss of some of the “brand” (I do like orange), but I think your true brand is in the quality of content and the accessibility of your content regardless of skill level. And, I think this new design lends itself to both of those bits. It’s clean, simple, utilitarian (as you say), and well thought out (as usual). Well done.

  23. I like the new design and look forward to getting comfortable with the new look and layout.

    I notice the ad for BuySellAds.com seems to be duplicated.

    Keep up the good work.

  24. Miguel
    Permalink to comment#

    I discovered your site just recently, two months ago or so. I was used to your old design so the other day when i was making my daily visit to CSS-Tricks i was surprised. My first thought was that your site was offline.

    Then I saw that all the fantastic content was there. I´ve been visiting your site the since then and now, i can say, that i´m used to your new design. I have learned lots of things with your articles and your screencasts, so hear one thing, NEVER, NEVER I’ll lose my respect for you.

    Congrats for your site, for your new design and for be a good mate for all us.

    Excuse my bad english.

    P.S. Why i can´t maximize your videos clicking the maximize icon? I must click on the “Go fullscreen” text.
    I´m using the last version of Firefox.

  25. Permalink to comment#

    It actually looks more organized and clean, i like it.

    Regarding the sidebar, you said is not possible, i made a website a few years ago, fluid with faux column (www.icad.com.ve) using % to position the background, maybe that will do the trick for you.

    The flaws i see, below the search field, the sidebar has a square corner on top of the round blue corner, looks weird to me (it even makes a 1px separation on other pages). Your pic at the bottom, shouldn’t have bottom margin, and the triangle of the vote bubble, its out of the bubble. (FF Mac).

    My first impression was like “OMG, what happened!!!”, but a few seconds later i noticed the improvements, now i don’t even remember the old one :P.

    Nice work.

  26. I’ve got to say I love it, I think the header font is absolutely gorgeous and the overall feel of the site feels relaxing and clean. I have got to agree about the fade on the homepage though, I don’t know what it is about it but I just dont feel like it goes with the rest of the site.

  27. I can’t seem to submit a comment using the latest version of Safari. Had to fire up Firefox, which I don’t usually like to do at home.

    And the comment I wanted to make:

    Love it! One misspelling distracts me: it’s “quandary,” not “quandry.” Sorry, I can never seem to subdue my inner proofreader!

  28. Permalink to comment#

    I’m going to go the cheesy route and just, say you’re the man :) Love the site and the new design. The fade is a little weird but it does make me notice more stuff. Thanks again!

  29. Hi, I’m not commenting graphics since it’s the matter of personal taste. But:
    1/ the page is invalid, yes, there is no point in masturbating because of validity, but some issues here are just unnecessary (http://validator.nu/?doc=http://css-tricks.com/design-v7/&showsource=yes)
    2/ you can do more with HTML5, I’d suggest to use article element for article, header and footer elements for specifying those parts inside an article (in listing and in single article display). Section element for sections of page (comments section, sections of side bar, etc.). There’s still too much div elements here :)

    • 1) I fixed most of those validation errors, thanks! The only ones left are regarding the results attribute which I don’t care about. Although I have noticed that it isn’t working particularly well on the latest builds of WebKit, so I may end up ditching it.

      2) Agreed on HTML5. I’ve done a good amount of transitioning but more semantic elements need to go out. This will happen over time as I mentioned above.

    • José Pedro
      Permalink to comment#

      You could replace the “results” attributes with “data-results” attributes, which are valid HTML5: http://html5doctor.com/html5-custom-data-attributes/

  30. Thomas
    Permalink to comment#

    I recently started reading your articles through RSS, so I never really saw the old design, but I think this one works well for the type of content you offer. Looks great!

    I’ve noticed myself using larger fonts as well, and I think it’s because screen resolutions are constantly growing, resulting in smaller text. A 16px font may have been far too large for your primary text five years ago, but on today’s monitors, larger fonts are expected.

  31. This is not horrible, but I think every design in the archive page was better.

  32. Permalink to comment#

    When I first came to the new style I thought it looked kind of odd, now that I have been on it a few times it has already sunken in. The increased font size helps with me because my eye sight is quite poor, really liking the simplicity too!

  33. Permalink to comment#

    Great job Chris, I think the new design is a big improvement and I really like the fade. I think it does a good job of reducing the clutter and repetition and looks really sharp.

    If anything, I’d say the only problem with latest articles is that the hover on the headlines is very subtle, I have a hard time telling the difference on my screen.

    The “Roll” widget is awesome, now that WordPress is starting to strip out the references to blogging, they should totally cut Blogroll down like this.

  34. Permalink to comment#

    there still seems to be an issue on the buttons rounded corners : there are straight corners around the speech bubble and blue buttons
    otherwise, I love the progressive enhancements and HTML5/CSS3 stuff!

  35. Eric
    Permalink to comment#

    Negatives:
    Although the site looks great in FF, and has awesome transitions in chrome, it looks better in FF than chrome.
    The search box, buttons, and rounded corners are all messed up in Chrome. They all have a background color that makes them look like IE6 using PNG’s without IEPNGFix.
    I’m also of the group that thinks that when you hover over a button, you should have a pointer mouse icon to indicate that you can click it. Your mouse cursor is an arrow on hover.
    on the props section, I think that the entire block should be clickable, rather than just the link text. you can do that quickly with jQuery: .click(function(){ window.location = $(this).find(‘a’).attr(‘href’);
    Positives:
    I love the blue color and minimalist design of the header, it really gets you to the content faster, less scrolling = more content above the “fold”.
    I love the new pixelated logo.
    I love that the footer is the same BG as the sides and header.
    the asterix now indicates: “This website may or may not contain any actual CSS or Tricks.” this is brilliant. I think I like it more than I should.

  36. Permalink to comment#

    wow. You’re really taking a hit on the fade. I personally like it. It does accomplish what you were trying to do. Less clutter and it intrigues me enough to want to hover and click.

    My favorite update though is the fluid layout. And I’d love to learn more about how you adjusted the sidebar height.

  37. Danny Valle
    Permalink to comment#

    At first, my reaction was like oh no, he changed it? Why?? But, a few things that I have learned as a web designer, is to walk away from a design for a day and revisit and see if you still like it. Well I did, and I do like it.

    Very clean, well thought out as usual. I would definitely loose the fade effect in the text. Not sure if there are behind the scene reasons for it, but visually I found it annoying.

    Last thoughts… I like the cleanliness of it, but I feel it’s missing some pop. I miss the little airbrushed touches, the slight dimension, and the warm blocks of color from the earlier sites.

    Overall though, I’ve always liked your work on this site and careful consideration to detail. I like this version, just think it needs a little more tweaking.

  38. Permalink to comment#

    Not the type of design for CSS galleries? Maybe… but i really like this new design, my favorite of all versions. Clean like i love!

    Just one thing : Why there isn’t a link “older articles” after the articles’ list?

  39. As I echoed in a tweet, I love the bottom and hate the top.

    The footer is perfect, much better than the last change. The CSS hover effect is very nice on the right.

    However, the top of the site looks plain and bland. There is a massive grey area. The tabs are my main sticking point. IMO, they look horrible. Bland blue, that just washes into the next tab.

    The rest of the site looks great, but there is a bug on Chrome with the Vote bubble – the corner transparency isn’t working.

    I hope you understand what I mean. Do ask for further clarification if needs be – I know this is a little “note-ish”.

    Overall, thankyou for continually refreshing CSS-Tricks’s design – it freshens the experience. And the “* This website may or may not contain any actual CSS or Tricks” made me chuckle.

    Thanks,

  40. Paul
    Permalink to comment#

    After reading your reasons I can understand some of the changes that have been made.

    My only real issue now is.. when I look to websites for help in coding etc my 1st impression is always how the site looks as with any site to be fair. The guy behind the site could be a coding genius (which over my time reading this blog you do fit that bill) but if his site isn’t aesthetically pleasing to me I will totally disregard it without a 2nd thought. I would be interested find out whether your new design may decrease the amount of new readers signing up to your RSS feeds. You won’t lose any I wouldn’t have thought but you could gain less.

    Hope that meets your critique guidelines – don’t want to get on your bad side.

    Keep up the good work with your posts though!
    Paul

  41. Toni Kukurin
    Permalink to comment#

    Hey Chris,

    I’m of the ones which didn’t like your site at the first look, and feel free to wave a disapproving finger in my direction if you feel any of this criticism isn’t fair, but I have a few remarks on the site:

    1. First things first, the footer (yup, first in deed) is pretty awesome and it’s great you’ve decided on using them “Html 5″ and “CSS 3″ new effects for all us cool WebKit/Gecko users. Also love the banjo (is it?), and the message in the footer.

    Kudos for the media queries!

    2. Chrome has this weird issue with some of the CSS 3 stuff, and it lacks a lot behind Safari in terms of display. It’s Google’s fault, really – but I thought you should know.

    3. My personal opinion is that the text is too big (maybe a serif font would look more suitable for the size?) and that there’s maybe too much space for the main content. Again, since this is only my opinion, maybe others find it better this way.

    And that’s what it’s all about!

  42. Hey Chris,

    I love the new design, the only small thing that bugs me is the faded text on each post preview on the home page.

    I dont know why, but it dont look like it works well with the site. It is also never a good idea to have the user have to hover over something to read more.

    Just my 2 cents.

  43. Nick Malozzi
    Permalink to comment#

    I know you’ve gotten a lot of grief for the listing page fade, but I really like it. All the WordPress/other “blog” sites I follow always end up in my RSS reader because I find the real sites hard to read. I can’t stand the “read more” after every single article and all the clutter. I think you did an excellent job incorporating the fade on the listing page. It allows the user to easily read the opening of each article. I may start coming right to the site now in order to read your posts.

    Same thing can be said for the rest of the site. You said it yourself… it’s very utilitarian, and there is nothing wrong with that here. We come here for your great content, no need to have out gaze pulled away from said content with tons of distractions. I think you worked in all the advertising and other content in a nice organized way that keeps the user focused on what’s important. Bravo.

  44. Dennis
    Permalink to comment#

    I seem to be the only one so far, but I really like the fading of the article listings! It does break it up a bit, making it easier for me to scan the articles. Clever! :)

    The new design really grows on me, and I like it more the more I look at it. The only thing I don’t like so far, are the blue buttons and the search input. They don’t feel up to par with the rest of the site.

  45. Hi Chris,

    The footer is fun. And thanks for bumping up the text size! For those of us online all day, it really helps!

    My only critique is that I’m not loving the blue. It’s given the overall site a much colder feel, almost a bit clinical. Which I think is at odds with your personality and down-to-earth style. The blue in links is also hard to read on the soft grey. I think a slightly darker shade with a touch of orange will make it easier to read and more compatible with your signature orange.

    (Sorry about my color-mixing…I still think of mixing colors as actual pigments…you know, throw in the complementary color to reduce saturation, etc.!)

  46. I was just thinking, instead of using two div’s for the vote speech bubble couldnt you just use

    box-shadow: 1px 1px 0 #yourcolour

    I havent tested it but I would think it would acheive the same effect

  47. Permalink to comment#

    Hey Chris….I like where the redesign is going. I think the previous versions felt like a personal website and this feels bigger (and is I guess) and more aligned to smashing magazine…feels pro.

    As a critique, the design feels a little unfinished. I know you want to cut down on images and I agree. The navigation however I think could be thought out more. It kinda feels like a prototype or a bit unfinished. I always find it hardest to design navigation bars myself but I think yours could do with a bit more presence?, know what I mean?

    Personally, I like the fade out on the posts and agree it hides unnecessary text until you engage with that article. I would like to see thumbnails of images relating to that article just to spice it up a bit but like you said, you want it to be quick.

  48. Overall, I like it. Cleaner, faster, smarter, more productive. I can only imagine how hard it is to incorporate all the information that you have here so that it is displayed nice and consistently.

    I think the blue contrasts with the orange a bit too much. Visually, the contrast feels like a brain freeze from an iced slurpy. I think there is too much blue because it really pops. Perhaps use some more of the fire colors such as a yellow. The gray (grey?) mellows it out a bit more and I really like the banjo pic.

    But this could all be because I’m listening to your grooveshark page and I like the orange-yellow-day-at-the-beach theme.

    I miss the links to your other sites in the footer, DigWP and Script & Style.

    The new js is just fawesome for the UI. I’m very curious about the 3D flipping effect.
    Is there a reason my HD revs up every-time I visit CSS tricks?

    Thanks for listening to my opinion.

  49. New design breaks pretty bad in IE6 (at least via IETester). Did you make a conscious decision to abandon IE6? What do your stats show for IE6 users? I imagine you get a fair amount of international traffic and I believe IE6 is still pretty big in SE Asia.

    • Yep I have completely ignored IE6 for now. The only stats that matter are the stats for this site and I’m at under 1% for IE 6, and I bet some percentage of that is people visiting the site on purpose with that old browser just to see =)

      On the last design I used the Universal IE 6 CSS, and I may go back to that, haven’t gotten that far yet.

    • Permalink to comment#

      I wouldn’t bother with IE6. After all, your articles discuss modern approaches to design. IE6 should have died out years ago but it’s just stuck around dragging everyone down with it. And I think you’re right; most of your IE6 users are probably just nosy designers wondering if you’re still offering an IE6 functional experience.

  50. I love it all, happily can live with one mans design especially when he puts as much thought into it as yourself.

    The fonts being 16px fits perfectly, it reads lovely doesn’t look dis-proportioned and just makes sense.

    The colour scheme is light and airy, there have been no strains when digesting the content.

    Advertisements are clear and concise, if i was ever going to click an advert it would be here at css-tricks.com

    I’m glad you re-jiggled the footer, it was always the part that was most crowded in my mind.

    The new smaller excerpts on the home page are much more suitable. In comparison to the previous design seemed like you were trying to squeeze a lot in. For me at least the breathing space is perfect.

    Comments are tidy.

    That’s about all i got right now.

  51. Bart
    Permalink to comment#

    About the fade, in the latest articles section:
    Nice effect, well done, like it.

    Though, it might give the impression that the article headings are part of the same article.
    It misses maybe, in my opinion, an orange “hr” Chris Coyier style, a border of some kind or whatever may help distinguish the articles’ blocks, in a blink of an eye.

    Plus, I’d like an over effect on the headings, please. Or an active one?

    Thank you, awesome 2010 design.Huge footer picture, totally beats previous one, so web.now!
    Can’t wait for v8! :p (just kidding)

  52. Permalink to comment#

    Nice redesign, Chris!

    The transitions in the sidebar and the footer are great! (nice details)
    I like the colors and the grid/(fluid)layout in general – and your new picture in the footer. :-D

    I’m just not sure about the background pattern.

    But regardless of the new design – your content and your support/help is great!
    You really helped me out a couple of times – thanks!

  53. Permalink to comment#

    I feel like the navigation and the CSS-Tricks brand is much more pronounced in this new design.

    The new design seems less like a web developers blog and more like a community of CSS enthusiasts. For example I always read the articles at this site but never bothered looking into the forums, but since this redesign I registered.

  54. Dave
    Permalink to comment#

    The whole page just feels lighter as a whole. Even the ads don’t really feel like they clutter up the page. I like how you broke out of a more monochromatic color scheme and went complimentary with the orange and blue. Really flexes some design muscle because that’s not always easy to pull off. Comments blend into the page, nice and clean.

    Great work and very nice of you to share some of the inner workings of your site and what you did where.

    • Dave
      Permalink to comment#

      Just a subtle thing I noticed and I watched your “Pet Peeve” screencast not long ago, but on your videos page your links shift 1px. Not sure if you intended this “button press” effect or not.

  55. Permalink to comment#

    It looks good. I don’t think is a big deal, but I discovered that when I resize the window and make it smaller, when you make it bigger again,you get a huge white space at the bottom.

  56. TheDoc
    Permalink to comment#

    I really like the new layout – especially on the single article pages. I think the bigger font is a good choice.

    My only beef comes on the home page with the fading. I find it actually detracts from my ability to quickly scan over the articles. For whatever reason it makes the home page a lot more cluttered to my eyes.

  57. Some first impressions: maybe a bit too gray, indeed. Not entirely convinced by the opacity effect on some divisions. I like the font chosen for the header lines and the style of the class .meta .read-more.

  58. Blue
    Permalink to comment#

    Chris,

    I enjoy the lighter feel to this design, it is less bold than previous versions, but I don;t feel that you’ve lost any character. I haven’t noticed anything that doesn’t sit well with me.

    I do particularly like the interesting shape of the tabs, I like how they are asymmetrical.

    I also enjoy the clever footnote that you made with the logo, and the “This website may or may not contain any actual CSS or Tricks.” statement above the footer. I think it presents your stance on the long fought battle of the name of the site and relevance of it’s topics.

  59. Permalink to comment#

    That outline highlight? Try

    input { outline:none; }

  60. Jason
    Permalink to comment#

    I love the new design. I like how it’s clean and simple. To me, it’s much easier to read than the last version.

    I’m not sure why people aren’t digging the fade out on the main page, but I love it!

  61. someguy
    Permalink to comment#

    I must say I’m disappointed…

    I love css-tricks and all your work you’ve doing, but this update just isn’t good for my taste.

    It needs more white space areas, it has way too much blue IMHO. I had already associated css-tricks to orange and even that blue is a complemetary color I think it should be less blue and more orange. I know the blues also tend to be associated with technologies and that’s good. What I mean is that McDonalds just can’t get rid of the red color for ANY reason/ideia someone may come up with. That’s way too much deep-seated to be changed.

    So, i like the blue, i just don’t like the way you used it. CSS-Tricks is now a colder place.

    Just my 2 cents, but i still love you Chris and still love this place!

  62. someguy
    Permalink to comment#

    …also, the sidebar gets useless at some point and eats something like 1/3 of the total width.

  63. I agree that it does seem cleaner and easier to view and find info at the cost of a little of the aesthetics. It is a fine line that we walk in web design and I think that you have hit the mark here. After all, if your average reader is like me they do not come here to be wow’ed by your layout.. they are here to be wow’ed by your content which I am on a daily basis..

    And I will second the small bug/issue with the large quantity of white space below the comments area.. I did not measure it but I would guess that there is well over 1000px of space below the “leave a comment” and the footer. This only happens if you re-size your browser so it is not a huge issue but it is a head-scratcher…

    Good luck and keep up the great content.. it is why I come.

  64. Batfan
    Permalink to comment#

    Nice work, Chris :)

    Looks good, love the blue.

    My only critique would be to darken the background a little. I wouldn’t mind a little more contrast between the background and the content area.

  65. DJ
    Permalink to comment#

    I just noticed the enhanced boxes you give to yourself and “favorite posters” in the comments – that is neat. Am I just now noticing it or have you always done that? A request for a future post – how do you do that?

  66. Alexia
    Permalink to comment#

    I always look forward to your site tweaks and overhauls. It keeps me on my toes. :)

    Admittedly, it’ll take some getting used to this latest one. I do like the attention to little details that you do so well, but overall it seems lacking in the color “pop” of your previous versions. It feels kinda dreary and almost corporate-ly non-design-y, if that makes any sense.

    Just my $0.02 :)

  67. Aaron
    Permalink to comment#

    From an “Art” stand, I like the previous version better, this one is kidna boring, but from an “Informational Site” point of view, its a lot cleaner and easier to read (for me anyway), but hey! Its your site. I still like it, and will continue to come here for learning css and other things. (I have learned a lot)
    Keep up the good work!
    Thanks,
    Aaron

  68. Actually its beautiful….

    Love the fade effect

  69. Henri Jeret
    Permalink to comment#

    At first the new design really scared me… I’ve been a reader of this blog for several years now and that redesign was the most surpraising one :D

    I looks really fresh and I think the colors are better :)

    At the second visit I started to like it :D

    I dont’t really like the logo though.. I like the text after it but not the CSS-TRICKS thing.. it looks cheap..

  70. Permalink to comment#

    There’s some pros and some cons to this layout I think…
    Firstly, the footer is excellent. The little rollover things are great, as are the ones in the sidebar.
    You’ve managed to cram a lot in without load times being too bad, which is also great. I like the comments section too – it all makes sense with the shades of grey and the orange/blue borders drawing attention to specific comments.
    However I do agree with a lot of people here – the tabs at the top are a bit dull and I don’t like how there is an extra one on the far right when viewing the site at its widest. Perhaps change them to make them more like the lovely “submit comment” button I can see right here?
    The fadeout thing makes sense, but if you’re going to do that maybe AJAXify the read more button so it loads in the page rather than reloading the page?
    It’s surprising to find a Tweet button but no Like button, but understandable and I’d be more likely to tweet an article from here than Facebook it.
    And finally, I’ve been having a little trouble with the search bar – when I start typing it shows searches from my history but these don’t change depending on what I type, they stay the same. Of course it might be a Chrome glitch.
    As always, it’s great. Keep up the good work Chris (and maybe do a screencast on all the little details people might not notice?) :)

  71. Permalink to comment#

    Chris–

    Brillaint job (:

    Really liking “This website may or may not contain any actual CSS or Tricks.” (( I don’t ever remember seeing that before, so if it was around.. ))

    Also, nice Forrst badge ;)

  72. I think it’s the best CSS-Tricks design to date.
    BUT the fade-out effect is wrong, it goes against the general ‘easy to read’ approach of the site. It makes it more difficult to read and creates some confusion.

  73. Victor Oliveira
    Permalink to comment#

    Dude Love the Cleaner look, in my non professional opinion I would expect a little more on the header but besides that love the footer and main content area!

    Good Job!! Once day I just might get this good !!! LOL

    • Victor Oliveira
      Permalink to comment#

      Oh one more thing Love the disclaimer!!!!!
      “This website may or may not contain any actual CSS or Tricks.” LOL

  74. Permalink to comment#

    on IE7, the commenters name and picture are not visble, they are off to the left somehwere. looks ok in FF, have not tried Chrome yet.

    usually use IE7 for general web surfing here, PC is not updated to IE8 yet. I guess I have always used IE since I started with Windows 95 and continue to do so, use FF and Chrome too, but not for the majority of my surfing.

    Al

    • The IE7 comment problem is definitely real and definitely needs to be fixed. Sorry about the trouble there and that should be fixed within a week or two at worst.

  75. Permalink to comment#

    Interesting stuff. Not really digging much of it though. I feel like some things were crowbarred in just to use a certain technique. Like the main nav for example. The last 2 versions had nice looking and functioning main navigations. I feel like this navigation lost the artistic look in favor of round borders just for the purpose of using CSS to create them.

    Not sure why you changed your main logo, and I’m find the homepage a little confusing to read quickly. The animations in the footer are pretty sick though.

    Just my opinions..and I do give you mad props for the amount of time you spend on putting out new versions of the theme design..never an easy thing to find time to work on your own website.

    • The logo hasn’t changed.

      I can see where you are coming with with the barrage of different techniques in use. For example the flipcards. It’s not like there is a theme going on that compliments that particular animation/interaction. However, it’s a full fledged CSS-Trick! So I kind of like the idea that there are all these little nuggets of CSS trickery scattered throughout, even if they are a bit unrelated or “crowbarred.”

    • Toni Kukurin
      Permalink to comment#

      Hehe, it’s interesting to see how the logo without your recognizable asterisk (“star”) seems different to some – when in fact you only removed the “tag” that used to be there. :)

      I think it’s because people didn’t notice the actual “CSS-tricks” part of the logo in the previous design – it was kind of hidden and small in the upper left corner.

  76. Cerium
    Permalink to comment#

    It seems to be a really nice design, the only problem is doesn’t work very well with Chromium (v5.0.375.99 (51029) Ubuntu 10.04) :’(

    • yann
      Permalink to comment#

      mediaelement.js doesn’t display the video under Chromium Ubuntu :(

    • yann
      Permalink to comment#

      I reply to myself :

      sudo apt-get install chromium-codecs-ffmpeg-nonfree

      solve the video issue…

  77. Permalink to comment#

    For what it’s worth, and I know you’ve had a number of these, but I’m just not liking the recent posts fadeout on the home page. It’s the first thing my eye went to when I saw the new design for the first time, and it didn’t leave me with a good impression. I usually like to see how many comments a post has or when it was published, and having to hover over the post to get that information is an unnecessary extra step. I also feel as if it somehow ‘weakens’ the design on the home page in that specific area. Aside from this, I much prefer this new design to the previous one. I like this one a lot and think it’s a great improvement. Maybe add a hover effect on the 125×125 ads. Great job and thanks for all that you do.

  78. Permalink to comment#

    Looks really neat and clean. Also nice use of CSS3. But maybe you should replace phpBB with FluxBB. ;)

    • I think the plan is Vanilla Forums. I’m working with them on another product and like how clean and simple the software is. I think it’s going to be a huge upgrade if I can pull it off.

    • Permalink to comment#

      Ok, I only tried Vanilla for a bit and looked around in the code, but I didn’t like it. FluxBB is much lighter and the codebase is also simpler. I ahve to say that I’m also in the development team of FluxBB so I’m probably biased ;), but it is much lighter/faster than Vanilla.

  79. Permalink to comment#

    I’m not a fan of this design, but that’s just my opinion. My least favorite part is probably the nav bar. One thing that might work a little better would be to curve the top right corner so that its uniform with all of the links. I also the think a light gradient might make it stand out and make it a little more “clickable”, but I’m not sure. Just my two cents, but in the end it’s your design, do what ya’ want.

  80. Mike
    Permalink to comment#

    Overall the design looks okay, not something that really hits home for me but not awful by no means.

    The one thing I absolutely hate is that jQuery fading. I hate the fact that instead of loading the site and reading it I now have to hover over each individual post to see the post snippet. Regardless if it’s just the date when posted, and number of comments, but it’s also the last lines of the article snippet as well, for example: “shreds, please do so. I have my bachelors in Art and part of that was getting torn…” does not show for me unless I hover over the article on the front page – this in my opinion is bad design and anything but accessible.

    To me design should not only be about making content look good but also making it easier for the user to find what they are looking for – forcing them to hover over each article isn’t doing either.

  81. Permalink to comment#

    Chris,

    This design is actually growing on me with the days. I see you fixed a few things like the submit comment form (which was breaking in Firefox).

    I’m glad you made this post. It was interesting and I wasn’t at all aware of the cool animations in WebKit browsers! I quickly opened up my Chrome and was shocked, an entirely different world!

    With regards to the fading…I don’t mind it. It does open up some space.

    And one thing that wasn’t mentioned that much was that I do love the 16px font, definitely eases up on readability, which is of extreme value to this site, since it’s primarily used for tutorials and/or helpful information.

    Anyway, keep up the good work!

    • Permalink to comment#

      One last thing –

      I tried your site in IE7, and it degrades quite nicely except the comments (like already mentioned) as well as the screencasts. Can’t play the videos :(

      Just wanted to point that out.

  82. I for one really dig the new design. I agree with you on the font-size choice. I constantly find myself increasing the font size on my browser so I’m not leaning in so much. Maybe i have bad eyesight,i do wear glasses. But I also think that reading stuff on a screen can be straining so I don’t want to make things worse.

    There’s also something more streamlined and more organized looking about it now. I liked that you got rid of the homepage layout where you had 1 (or 2?) posts and then these 4 blocks of posts. It was cool, but now that’s it gone, I kinda like your new homepage better.

    I do love blue, color choices are great.

  83. Permalink to comment#

    Chris, Did you start this using the blank theme from DIW? I have been hoping for a 3.0 upgrade of the blank theme…

  84. Permalink to comment#

    Ok, few things:

    1) The fadeout effect in the listing. I don’t mind the idea, just put the fadeout a little lower so the whole excerpt can be seen without the need to hover over the container. Remember, we’re lazy and the extra mouse movement is a NO NO.

    2) On articles page the sidebar a bit higher positioned then it should be (about 5px).

    3) What’s up with that font, “crete-rounded-web-1″? It looks smudged.

    4) Add a bit of bottom padding to “content-wrap” (20px is enough), it’ll look better, at least in my opinion.

    5) The “submit comment” button and the “poll question” bubble aren’t looking nice in Chrome, either lose the box-shadow or the rounded borders, because the box-shadow doesn’t care about the rounded corners, don’t know why, i used them together in my projects, they worked fine.

    6) The poll question results, “(8%, 621 Votes)”, don’t look nice at all in Safari, they look like they’re made from dots. Maybe it’s because of the “text-rendering”.

    7) Lose the outline on the inputs, dunno who the heck thought it’s smart to add a default outline style to inputs.

    Other then that everything is great :)

    And i’m glad to see you finally added the “tweet” button :) Never understood why you ware making us do a few clicks more to tweet your articles when you could add the tweet button.

    That’s all.

  85. Hey Chris love the new design, one little bug in safari I found is when you roll over the social media icons on the bottom of the page it makes the sidebar flash white for a second. Other than that I love it,

  86. Permalink to comment#

    Pretty design but not orange ;)

  87. Ilhan
    Permalink to comment#

    Maybe you should have a poll about the fading effect?
    I’m on the negative side.

    Too bad the effects in the footer dont work right now in Safari,
    checked it out on Chrome and they’re nice. Hope you manage to solve the problem.

    I think the general design is a evolution on the right path,
    although I think its little to much grey/blue. The overall impact gets blurred, my eyes have to search around more and not in the sense that I discover more but see less.

    Hope you understand what I mean, I do have problems in my native language to explain what I mean normally:)
    I would like some more contrast, if not more orange then more contrast in the colors you work with or maybe other effects to separate stuff.

    Just my opinion, maybe I’m wrong.
    Keep up the good stuff, belive it’s the first time I commented but have been visiting regularly for a long time.

  88. I like it. The line length at 1200px isn’t too long at 1200px so bumping up the font size was worth it.

    I’m not keen on rolling over headings to get content in the footer – I think the content should be on screen at all times – but this falls under difference of opinion rather than right/wrong.

    Anything else, I’ll reserve judgment until I’ve spent some time with the new layout to avoid the instinctive reaction to change. Human condition yada, yada, yada.

  89. I didn’t feel strongly enough about the article-fadeout technique on the homepage to overrule the mostly-negative feedback on it, so I’ve removed it in favor of different CSS trickery. I’m sure many folks will hate it just as much. C’est la vie.

    Thanks to Matthew Davis for helping find a (weird) solution for the flickering issue caused by the “things I do” boxes in the footer.

    Various other fixes are out.

    • Permalink to comment#

      I rather prefer the new method! Had a divider with a bit of brand personality, *and* the required elements appear on hover. A winning solution if you ask me.

    • This whole issue with elements appearing on hover in relation to touch-devices (like the iPhone) is pretty heated, but I think the accepted solution as of today is to use something to detect the device and then show the items permanently on touch devices.

      Maybe you should consider this?

  90. Permalink to comment#

    I have to admit. When I first saw the new design, I hated it. But after a few visits to the site, it’s grown on me. I really like the blue, and how much less bloated the site feels now.

    And now that I’ve read this and I’m beginning to see the subtle intricacies that one might not notice on first inspection, I’m quite impressed.

    You’ve put a lot of work into this design. Good job!

  91. Hey Chris, cool new design! I just noticed a weird bug with the search bar at the top and the sidebar. I’m on OS X 10.6.4 with Safari 5.0.1.

    After loading a page (any page) on your site, if I click inside the search bar, the whole sidebar moves (maybe 3-4 pixels to the left and up) and then it goes back in its spot. If I click outside the search field and try again it doesn’t do it. But if I visit another page and try it again, it does it again (seems to be doing it every time you try the search bar for the first time after loading a page). Not too sure what’s up with that, might be a Safari weirdness. I don’t find it annoying or anything, but I figured you might wanna look into it. ;)

    Cheers

  92. Michael Short
    Permalink to comment#

    after a new days of looking at the site, I am still not a fan of the navigation bar, I am not sure what it is, it just doesn’t look right to me. although the rest of the site as others have said is nice and readable which on a site like this is what is most important.

    unlike what a lot of others have said I do really like the fade out part of the article previews i and I also like alot of the rollovers you have for various things (in particular the “I work for.. “book i co0authored..” and “words I collect”.

    all round i have to say you’ve done a wonderful job as usual. and the Nav bar is a small thing so I can easily get over it and i’m sure with even more time i’ll get used to it.

    • Michael Short
      Permalink to comment#

      just wanted to add a quick note. i’ve just been rolling over the navigation buttons, and I personally would put that darker blue as the normal state and the lighter blue as the rollover state. just my 2c

  93. Wow, looking back, I remember V2. So Cool!

  94. Permalink to comment#

    Personally, I liked the old design better. But that’s just me.

  95. Chris, for the most part, I love it. The footer is a HUGE improvement. Don’t know if I am diggin’ the navigation tabs, but its not anything major. The cleanness of it is inspiring. I am on the fence with the blue. Someone above said it is almost clinical…I don’t agree with that, but something about that shade is bothering me for sure. Too…sky blue for me. I think you can jot that down though as I was just used to the colors previously. I’ll get over that.

    One thing is bugging the crap out of me, only because you pointed it out in an image. The bubble used for the Vote section, I swear the triangle is off by 1%. If I change it to 97% in Firebug it looks great. Using FF 3.6.8. I know it is a nothing thing to pick out, but if you hadn’t put an image describing what you did (which made me look), I wouldn’t have noticed.

    Gonna go grab the new tweet buttons myself now!

  96. Permalink to comment#

    New list item on sidebar. I do love it.
    New Footer. Absolutely cleaner and brighter.
    New Bubel question on vote section. Cool.. (little isue with safari 5 http://skitch.com/ebiansyah1402/d1jmm/design-v7-css-tricks)

  97. As someone in the process of working on a new design for my site (as the current one is more just a placeholder for the concept), your redesign couldn’t have come at a better time for me. Although I was partial to your previous iteration, I can totally see the minimalistic feel of the new site.
    Unlike some of the comments, I don’t feel that the colors come off as dry and cold, but more calming and focusing. This design appears to lend itself more to emphasizing the content than the design itself.
    Alternately, the only thing that doesn’t quite resonate with me is the navigation at the top. There is something about the tabs running into each other that makes me slightly uneasy, for lack of a better word. That all being said, I am interested in your reasoning for choosing that design element, and can’t wait to see what else you decide to add/change in the future.

  98. Permalink to comment#

    This is definitely the best version yet. I love the bigger fonts, lighter/cleaner layout, HTML5 additions like the search field, WebKit transitions, etc. The fade effect on the articles is cool, but it’s also a little distracting. Otherwise, a definite improvement all around.

  99. Permalink to comment#

    I don’t know, man. This one seems a bit … lifeless and not that sexy. There are too many things happening and jumping around when I scroll and move the mouse. You sort of want some calm areas where nothing happens sometimes.

    You don’t want to hear this, but I like the feeling of the previous designs better. This metal/blue theme isn’t the cozy, funny CSS Tricks I hung out at. This design’s header isn’t that prominent, which is weird. Feels a bit empty.

    And I don’t know exactly what fluid stuff you’ve put in here, put it lags enormously when I resize the page (with Safari 5.0.1). I would guess there’s some performance stuff associated with the redrawing of fluid images, ads and such, but I don’t know.

  100. Permalink to comment#

    My immediate impression when I saw the new redesign was the blue. Blue everywhere! Where is the black and orange I cried! Aside from that, there was only one thing that didn’t seem to fit. The asterisk on the top right looks rather incomplete. It would be better if it had color.

    I love how you wrote on the very bottom how this site may not contain actuall CSS or Tricks.

    Overall, a great redesign.

  101. Permalink to comment#

    Nice I like it. So far I’ve agreed with you. Every new design has been an improvement over the other one. Now about this line:

    “This website may or may not contain any actual CSS or Tricks.”

  102. I don’t understand the fades at all. I mean, it’s not like the fades are collapsing and providing some sort of space-saving functionality. You’re just hiding information from the reader, IMO, for no apparent reason. I liken this to Google deciding to do the fade-in links on their search page. Aesthetically, their search page is already the cleanest website out there, so hiding links [initially] is just a small annoyance that really accomplishes nothing.

    As for the general look/feel of the new design, I prefer the old one better. Why? I’m not a fan of the blue color choice or the “boxy” layout, it’s just too stale, IMO.

    Of course, I appreciate your site and what you do for the web dev community and these are just personal opinions.

    • The fades were gone as of a few hours ago. So if you are still seeing that, flush your cache. It’s funny you are thinking this design is more boxy. Literally the old design was compromised entirely of boxes, and this departs from that. Read my first comment in this thread about “why hide” the information. The idea is to reduce visual clutter/intensity by not repeating identical page elements.

  103. Permalink to comment#

    Is there any way to see this fadeout thing everyone was complaining about?
    I know you removed it but it would be cool to get a better idea of what all the fuss is about.

  104. Great overall look and feel. I think you are giving up too much territory on the right though. I’d try reducing it by about 15% (and the search bar as well), and see how that plays out. Also, the text size is great, but what about adding another 2px to line height? To me, it might make reading even easier.

  105. First off, the design is a whole new beginning for this site that I didn’t expect. CSS-Tricks is more than a web design blog (at least imo) and I’m glad you got that message through with this new design. The blue definitely feels better and I like all the little details, especially the footer message with the “may not contain css/tricks” part.

    Some things that feel weird for me though are the buttons and the search box. The inset feels very old and outdated, rather than modern. Also the “blue outline” effect is only for Safari/Chrome users or Firefox on Mac, leaving me with nothing and would be great if you could add the effect in CSS instead which is fairly simple (http://forr.st/~uQJ).

    Sorry for the long comment, just a habit but again awesome design =)

  106. Chris, love the design and I love how clearly you explain the whys and hows of your choices. My only critique is that your demos still have the orange feel of the old design. Maybe a simple css change along with new images? Maybe a complicated jQuery solution? Either way keep up the great work!

  107. I think you are giving up too much territory on the right though.

  108. Fredrik Rossland
    Permalink to comment#

    It crash Safari on the iPad if you zoom in on a article.
    Other then that I like it!

  109. Oliver
    Permalink to comment#

    I would love this site even if it was designed in frontpage with no css using green to yellow gradient in background :-) the content is what matters the most and the content is perfect…

    Only one thing that really grinds my eyes is the logo or header the kerning is pushed to hard or I would consider to use different font style not the condensed one..

  110. DeannRie
    Permalink to comment#

    Video Please! (>_<)

  111. Permalink to comment#

    I think it looks great, love the typography. btw, nice Deering Goodtime in the footer ;-) I play and have a Deering Sierra.

  112. Permalink to comment#

    There are some really beautiful elements to the new design. But there is an impression that it was rushed ? I could be completely wrong however

  113. Permalink to comment#

    Aside from a few css tweaks to be done here and there i like it. It think it comes across more businesslike due to the minimalist design, but the grey’s are great.
    Design-wise tho, I’d put some (more) ‘white-space’ on the bottom of the rss links in the footer.

  114. Permalink to comment#

    I love the new frontpage, much more attractive IMHO.

  115. Permalink to comment#

    I like the redesign, but:
    Both footer links effect (I work for, Book I co-authored, etc.) and new “fade-in” effect on frontpage don’t work in Opera 10.5+, but they can. Just copy all -webkit-transition and -webkit-transform properties and rename them to -o-transition and -o-transform. I’ve tried it, it works for me (Opera 10.61, the same engine as 10.5).

  116. I love the redesign. Love the colors and the overall feel of the site. In v6 I felt that it was harder to find the most recent posts, but now it looks much better.
    Love your work, and I have learnd so much from you. Keep up the awesome work you do!

  117. Permalink to comment#

    Aw, no longer works in my old friend Firefox 2 now you’ve switched to HTML5 (-_-)

    I like the transition effects the most, some very nice and clever things going on here and there. The rest, I have to say I preferred the old CSS2 design I’m afraid! It does feel a bit less lively and colourful now. I’ll look forward to what comes next, though. :)

  118. Permalink to comment#

    great on functionality

    but not so good on the color

  119. pbear
    Permalink to comment#

    Good. Much better than that boxy crap you had frontpage of the last version.

  120. Permalink to comment#

    Looks awesome man!! Really dig it and the photo at the bottom is 100 times better. Rock on!

  121. Design is looking fresh as ever Chris, only one thing I’ve noticed in Firefox 3.6.3, your sidebar background doesnt line up on the left. I’ve provided a screenshot below.

    Screenshot

    Again, really like the new design, love the blue.

    FDL.

  122. Permalink to comment#

    I like the new design, and thanks for sharing all the new enhancements to your site!

  123. Permalink to comment#

    I like it, nice and clean. Always a fan of the minimal stuff.

    Really like how you reveal the read more bits on the articles

    If this hasn’t already been mentioned you can get rid of that blue outline in webkit by using this css. If you want you can then add other effects to the focus.

    .your-form-class:focus
    {
    outline: 0;
    }

    Regards
    Thomas

  124. Permalink to comment#

    In FF and IE at 1900×1200 resolution your sidebar floats over the content. I have to zoom out one click to view properly.

    Screen: http://imgur.com/FmIqr.jpg

  125. u know how to knock it off..very clean and nice!

  126. Permalink to comment#

    Love the new design Chris, chopped out a lot of stuff but the site just feels so much more informative.

    I was with a lot of other folks against the fade thing but the new slide in animation you replaced this with rocks my socks off.

    Winner winner. Fried Chicken Dinner.

  127. Permalink to comment#

    Hey Chris,

    Should the grey background of the “Go” button next to the search field not be removed/transparent?
    It looks kinda wrong now…

    Jelmer

  128. Love v7! Very clean look with plenty of room to breath!

    I would you a slightly darker gray for the background.

    The pattern on the top and bottom background cause the text to look funky…

    Can’t wait to see v8.

  129. Permalink to comment#

    Very clean design, i love that “crete-rounded” font and your footer. The picture with you and your banjo is awesome and the page speed score is 89/100 that`s great !

    Just my two cents

  130. I think it turned out nice. Light and clean. I wasn’t sure about the background texture first, but now I think I like it as well. Nice jQuery thingies at the bottom right.
    Keep up the good work!

    (Safari 5.0.1, OSX Snow Leopard)

  131. Very nice, love the simplification and there’s very little clutter with a nice amount of white space. :) Light and cloudy….I really dig this design. I’m sure there are ways to make it better, but at least for me “it works” as of now.

  132. Generally, I don’t mind this design. It is very utilitarian, but that seems to be an intentional choice.

    I will say that I miss the tag. I always thought that was a cute little image/representation. CSS Tagging and all.

    Also, I’ve never left a comment before, but your comments scroll FOREVER!! I almost gave up reaching the bottom to see the CSS tricks you put in the footer.

  133. Permalink to comment#

    Very nice Chris. Another masterpiece!

  134. It’s a very clean design, and I like the larger font size for the main text. However, the background pattern behind the header area makes it seemed blurry. There’s also some readability issues with the text on the darker gray when you reply.

    I really like the footer.

    - Lori

  135. Permalink to comment#

    “Content is king”, and having been around since v3 I think it’s clear that content “digestibility” has been a driving force in these redesigns – I find it easier to consume your articles with each iteration.

    One thing that really affects digestibility that is often overlooked is words per line. The increased font size helps quite a bit there, but by limiting the maximum width of the liquid components you actually prevent too many words per line for widescreen users – great attention to detail!

    My only complaint is that I think you should always tie the theme of the site into the theme of your identity, so the lack of orange is a bit of a curveball. Those light blue links aren’t catching my eye.

  136. I liked the old look fine, but this is a good look too!

  137. Giorgo Paizanis
    Permalink to comment#

    I am like many others that took a first look at the new design and thought, “where did CSS-tricks go”. However, it has grown on me since then. One thing I really like is allow of the css3 and HTML5 features you incorporated.

    Everyone has pointed out most of my thoughts, but I do have one new thing to contribute. I have an iPad and find myself reading blogs on here more and more. That means that, for the most part,the awesome roll over effects are gone and the active states take over for interactivity. In most cases, this is no problem. However the new sliding (previously the fade) effect at the bottom of the article summaries is non existent, leaving me to figure out on my own that I can click the article headline to read more. This isn’t very intuitive, especially considering the headlines are grey and the roll over effects don’t work on iPad.I’m not suggesting that you go and optimize for iPad users, but that one effect might be doing more harm than good since it is purely aesthetic.

    Overall a great redesign though.

  138. One more thing about the hover effects on the article footers. I think I finally pinpointed what makes them distracting to me.

    My mouse is often toward the center of the page while I scroll which means that the roll over effect keeps being triggered on an article summary that is below the one I’m trying to read. It distracts me from what I’m trying to focus on which is the opposite of it’s intention.

    Not sure if anyone else feels that way.

  139. John Yoder
    Permalink to comment#

    I like the redesign. It totally fits the purpose of the site and is nice and fresh. And, I agree with you, Chris… The jQuery fade was much too awesome for this world. : )

    On a side note, I must say I am quite appalled at how people are expressing their opinions more like commands..
    i.e. ‘do this, do that. k thanks’

    Pretty disrespectful and tasteless if you ask me.

  140. Permalink to comment#

    People that uses Firefox will love v7
    People that uses IE8 will hate v7
    I use IE8, so…

  141. Tabs hit me. Looks REALLY weird, IMO.

  142. JohnM
    Permalink to comment#

    I’m confused about the change to HTML5 (H.264) video. Doesn’t this suggest that they should be viewable on an iPad? Did you re-encode the videos in your archive/catalog? Since I’m not able to view them on my iPad, I’m clearly missing something. Can someone help me understand where I’m going off the rails?

    Chris, thanks for a fantastic learning site. I’m so new to the design side of the craft that I just don’t know what I don’t know and I find CSS-Tricks to be an amazing resource. Thank you!

    • I’m currently confused by it too. I would think they would play fine on the iPad. It’s using the video tag properly and the videos are encoded in H.264. But yet, they don’t play. I heard a rumor that setting the poster attribute will break them from playing, which I am doing, but I have tried it with and without and they don’t play either way so I left it in.

      I’ve also heard they videos don’t play on other random combinations of browser and platform.

      As time goes on, I’ll be sorting all this out. For now, of course you can always subscribe in iTunes or directly download them and play them with something like the VLC player.

    • Permalink to comment#

      Are you using any extra javascript to enhance the UI ?

  143. Ok, I am a CSS-Tricks old-timer and I have to admit at first I was a little skeptical about design v7, but you did make tons of performance improvements. And it’s definitively growing on me over time.

    Visually, I particularly enjoy the new way code snippets looks within posts now. They are just a crazy bold statement with their black backgrounds and I love how they stand out.

    Bottom line, it is your website man! Do as you feel like doing, as long as the quality of your content doesn’t change, I’ll keep coming back!

    All said, kudos.

  144. Eamonn
    Permalink to comment#

    I don’t think I was nice enough before. Now that the fade is gone (due to being ‘too awesome for this world’, apparently! lol!) and I’m not distracted by it, I think the site rocks. You should be seriously happy with it. I love the fonts, the font sizes, and the whitespace. In retrospective, I think this might just be your most coherent theme yet, and I’m liking it more and more.

    There’s funny things happenin with rounded corners and such, but kinks like that will work their way out. Be happy!

    P.S. Is your new disclaimer for when someone inevitably calls you out for discussing JQuery? :P

  145. Jeff
    Permalink to comment#

    Great evolution of your site…I like this because it’s a bit modern and minimal while still keeping within the theme of your previous designs. Notice you got rid of the fade, wasn’t working and a little annoying. Only con for me is your snippets section all the way at the bottom. I think it be better on the sidebar.

  146. Permalink to comment#

    Overall I think this design works well. I have been kind of paying attention to how everything has been evolving with this recent change and I wasn’t a huge fan of the fade either, but it was still a sweet idea. I dig the pic on the bottom too. Banjos rule. Keep up the good work and thanks for running one of the best sites out there.

  147. Teri
    Permalink to comment#

    The new design looks great. The only issue I have is with the navigation. I think the padding may be too excessive. It takes away from the main CSS-Tricks title. Other than that, I’m a fan. Glad you went fluid.

  148. hi Chris, in reply to the new v7 i really like it, more focus on the actual content. which is great. just a bit of a shock when first saw it and normaly you just change things for the better where is this one is pretty much a complete change. Also as others mentioned i didnt like the fade alot on the posts but just noticed to have put some jquery magic on them instead. Thats quality! love the work. long may it continue!

  149. hi me again, also just noticed the flickering bug in webkit has gone from the hover of the “I work for…” etc. what was the problem??

  150. Permalink to comment#

    Wow, i love this design, is so much eye-friendly, is much more fun to read, and like another user said, it’s original. So ya, i love the new design, and if i will have to explain my feeling about this new look, i will have to write a very big post, and i’m not so good at english, but overall is simply amazing. You have my congrats on this one!

  151. Permalink to comment#

    It’s nice!Simple ,clean but affective it’s more friendly then before. I like the comments.

    Good Job.

  152. I have been with you since V3. Very nice work Chris. It always throws me a little bit when you do a theme swap, but once I get used to where everything is again, it always seems a change for the better. Thanks for continuing to push forward and keeping me interested in web design!

  153. Great work. One thing which amazes me is how you find so much time to manage work, write mind blowing articles and also give a make over to your blog in such an effective way. Bravo! :) Visiting your design archive reminded me the first time I came to your site haha..It was v1 or v2 I think..

  154. Good work. I think this new design improves readability. And I really appreciate the time and effort you put into styling the comments section. I find I’m 50/50 about the Ad section overlapping over the Nav area. I do think that it’s a clever way to fill that dead space though.

    I think that the content background should be the same as the body background. I think that this would make the content look less cramped.

    Overall, great attention to detail. This was a major redesign.

  155. Felix
    Permalink to comment#

    Sorry mate. It lost some of its character. All the blue and clean stuff takes away that personal touch that I liked in the previous design. Makes it rather cheap.
    It really looks like some standard template instead of custom quality…

    Keep it up anyway. Content matters and since most people seem to like it… ;)

  156. Permalink to comment#

    I like your article footers on the homepage, the sliding logo to reveal the read more and the date, I’d like to see how you did that. Guess i could snoop around in the source^^

  157. Permalink to comment#

    I think it has lost a lot of the detail which made it nice to visit. Also the light theme is not a personal choice of mine especially after seeing the nice blend of orange, blue and grey scale on the previous design.

    Also, the menu elements and header up top do seem very basic and amateur, almost like it was just taken from a free basic template and not a custom design.

  158. Permalink to comment#

    Personally, I liked the compartmentalization better in V6. I think v7 reads like a scroll.

  159. Jimmy
    Permalink to comment#

    The slight changes that have been made to V7 since release are really making a difference. Every refinement helps. Great job.

  160. Permalink to comment#

    Nice and excellent work,hoping i can do like that one some day,thanks for shared

  161. Karin
    Permalink to comment#

    It’s more content focused which is good because I love your content! I reference it all the time. Thanks and keep up the good work!

  162. The old look better, but I like it, bec is original!
    keep up the good work!

  163. Permalink to comment#

    Thanks for taking the time to list the changes, Great! LT

  164. Andy Smart
    Permalink to comment#

    Overall, a very nice design!

    One thing that I’ve noticed (I think it’s been mentioned in the comments before) is that there’s no “Next Page” or “Previous Articles” link below the articles on the front page. It’s a bit of a nuisance to have to go back to the top and click “Archive” – a link like in v6 would be perfect!

  165. Permalink to comment#

    Oh by the way, in Chrome, your homepage slide in effect of that “Read On” thingy looks awesome. But not in firefox. The ease-in only available for web-kit only?

  166. Permalink to comment#

    I like the new clean design a lot!

    But i cant see your video’s on my iPad, the play button is disabled. (please make THE video’s .mp4 h264)

  167. Just a small idea for your snippets page:

    I noticed in the forums that you have the search on the forums “tab” by default. I thought it might also be a good idea to do this in the snippets section. Just a suggestion. You might also be able to remove the search from the actual snippets page then as well.

  168. Permalink to comment#

    Hi Chirs,
    Blue is my fav color and you website is so cool and nice.

    Can you write one article related your Heading fonts? how to use Custom fonts?

  169. TeMc
    Permalink to comment#

    Just a few notes:
    * The first thing I noticed is that the sidebar (or the article-content-column, dont know which, but one of them) is somehow behaving kinda lagging. It’s as if it’s rerendered when I scroll. One moves first and the other later (a bit like the 1990s javascript things that would onresize change the position of an element).
    * In the comment section the round corners seem not right in my opinion. They dont fit the rest of the design. Round buttons are nice though, but the rest is mostly rectangle oriented. Its more over-the-top-show-off then graphical enhancement imho.
    * The date barely has contrast with the background of the comment balloon depending on the level-deepness
    * Some forum bugs (see the comment on the other article about that)
    * I liked the breathness of the previous designs. While writing the comment and being scrolled all the way down I see a very narrow edge between the textarea and the left-edge of the content-column. Also the footer could use a bit more bottom margin.

    For the rest I really like it, and as usual, maybe it just needs getting used to but I’m saying it here :-)

  170. Permalink to comment#

    Like another commenter, the first time I navigated here after the change, I thought that this was a generic template. Which sounds more cruel than it is. After a few days, I am more comfortable with the new design (and it always takes me a little while to settle in with radical design changes), and I’m enjoying seeing how things are different and how you handled them.

    I really like the background image top to bottom; I like the pixelated asterisk in particular, because I think it does a nice job of carrying through that mark in a unique way without being confusing. It’s large without being overpowering, and that sort of subtlety lets users know to keep an eye open for other bits of subtlety (like the disclaimer – a nice touch).

    I think what’s so interesting about the site is how you went from one design that held a lot of “obvious” Chris Coyier-like touches to one that feels almost empty – yet upon a closer inspection reveals just as many hidden in plain sight (I’m thinking in particular about your use of advanced techniques and advocation of exploring options and trying things out – the fade out that no one liked and I never saw, the bevel/emboss effect, the nice fonts, the layout width).

    Even though the initial shock of the change was relatively strong, once I began reading articles, I sort of forgot about it. I’m really here for the content, and when it’s served up well, the design is invisible anyway. I like the font size and that the page spreads across my entire screen (the line length doesn’t bother me, personally), because it’s easier to sit back in my chair and browse articles – making for a more comfortable experience.

    I spent longer than I wanted to trying to find out how to read articles that weren’t on the homepage anymore (embarrassingly, I didn’t immediately realize that browsing the archive would get me what I wanted).

    I look forward to poking around a bit more and seeing firsthand what sorts of css tricks you’ve employed in the redesign.

  171. I spent longer than I wanted to trying to find out how to read articles that weren’t on the homepage anymore (embarrassingly, I didn’t immediately realize that browsing the archive would get me what I wanted).

  172. Chris White
    Permalink to comment#

    I love the wider design. Feels much better. Good job!

  173. ckn
    Permalink to comment#

    I like the new design! I am extremely myopic (even with corrective contact lenses) and I’m constantly magnifying sites to make everything bigger and therefore, easier to read but with the larger font and wider content area it’s not a must like on so many other websites.

    However, I find that the light gray on gray text is difficult to read like in the case of the date in the comment area (commentmetadata). There is just not enough contrast. I also find the default link color (#50A3E5) too neon at times especially when in smaller font sizes and on certain gray backgrounds (for example, in the footer). Again, I’m sure it has to do with my vision, but it’s just “loud” and hard for me to read (same font-size in black on same background isn’t a real issue), but the good news is that I definitely can locate the links on the page.

    Also, I think that you remove the older post link from home page content area. I finally found the link to browser older posts under the search button. Now that I know where to look it is not a huge deal but it was frustrating at the time. The other thing I miss is that with your browsing list there is no preview of the post only the post title so I’ve lost the opportunity to read a bit of the posts before deciding to clicking to read more.

    Overall, great job and keep up the cool work, Chris!

  174. Permalink to comment#

    Nice work Chris! I find the new design not only has better functionality but also the change in colors is very refreshing! You managed to pull the blue and orange off very well. Keep up the good work.

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