treehouse : what would you like to learn today?
Web Design Web Development iOS Development

CSS-Tricks Design (v9)

  • @corey Browsers support zooming but what if I only want to enlarge the text?

    Also, with ems/rems you can increase font size on large screens very easily using media queries (change html: font-size; and it cascades down).
  • @sl1dr - users have an option to select to zoom a whole page or text only within their browsers. I have been pretty pro-pixel for a while and now that I can (in 99% of cases) completely write off IE6, I see no reason to not go back to using them.

    I know where you're coming from though, I think it's a designer preference. I like having very specific control over how fonts are displayed on websites that I make.
  • I DON'T LIKE IT

    don't get me wrong folks
    I love the work Chris is doing, all the endeavour in educating people
    wast amount of time he puts in it

    I saw all his screencasts, learnt lost of stuff so I managed to get a job
    I owe him

    but I do not believe in so frequent redesigns
    why not to keep one design longer when it works and improve it

    instead of several ones, that each time need to fix

    long story short
    * like = the design
    * dislike = frequency of new designs

    HOWGH
  • @TheDoc Learn something new everyday! Couldn't find it in Chrome 12 though, where should I be looking?

    I also use pixels mainly (I was playing devil's advocate), but have been thinking about increasing the font-size for screens larger than 1440px wide (or there about) using media queries. Using ems makes this task much easier (if you understand the math) as you can simply change the percentage font-size set on the root and voilà; cascade magic.

    Pretty excited about rems too, then you have the same flexibility without have to worry about the tricky math as it is always relative to the root.
  • @chriscoyier http://css-tricks.com/video-sitemap/ I'm not sure if that's due to the new design, but it doesn't seem to be working.
  • Great changes, Chris! I like the color palette and these gradient rollovers in the sidebar look nice :)
  • Hey Chris,

    You talked about the H&FJ web font service, which I didn't know about, and I went over to their website to check it out but I can't find anything about it. They have very nice fonts so I would like to find out more, could you tell us more about it?

    Also, I like your redesign. Cool how you made those square sponsor images in the sidebar decrease in size when decreasing of the browser window width. I feel like the header image could use some colour though, like the rest of the colourful stuff on your frontpage.

    Cheers!
  • My favorite one so far... Much better than the last! You always seem to inspire Chris! Thank you!
  • My favorite design in some time... I really like all the things that are working/happening here.
  • LOVE the new design!

    I spent 30 mins yesterday trying to figure out your animations. I did not know you could put transitions on media queries. That's soooo cool!
  • Gotta admit, the fluid "browser window size sensitive" thing on the whole website is awesome! Like seriously.... it's got to be one of the best features of this site. Love it!!!!
  • @sl1dr - interesting, it looks like Chrome has taken that option out.
  • He Chris,

    You're back! I love the new design. Its great. My all time favorite was v6, but this one might kick it off the throne!

    Grtz
  • at first I didnt like it because It s not like it used to be.. and then I realized that like most of us you're an artist and when you have an idea and visualize it , it's not only to show off but because you really think it would fit. It s your vision. Imagine going to an art exhibit and telling the artist that she should put more red in her "shadows of heart" painting! That would be stupid. Same here. Unless CSS-tricks is supposed to be a collective site . I guess that s what it is and I m full of it. Have a good day...
  • @sl1dr - I've just never done a site using EM's. I know they are all hip and stuff but it's just never been that big of a deal to me.

    @corey - Uhm I can't remember now. I can't think of a good reason it's not just a border.

    @krysak4ever - I feel like 8 months is long enough for a redesign, but I like your point about continually improving the design during that time. I do that. I feel like frequent redesigns are even more acceptable on sites ABOUT web design, so showcasing the fast-moving techniques of modern web design.

    @Jelmer - it's not out yet.
  • lol. I love the contact feature in the footer.
    What is in your hand Chris ? I hope not an energy drink but a nice chilled can of lager :).
    All the best. Great design BTW.
  • Hi Chris, Love everything except the gray header. I must say that I really love the orange header that was submitted above. It just makes the header "pop out" of the page, and adds a very neat color contrast.
    I love the transitions on the media-querys, could you do an article on it?
    -Cliff
  • Looks horrible in IE8....Unfortunately that's what I'm forced to use at work... :-(

    Looking forward to viewing on modern browsers at home. :-)
  • @Despondo - looks like it's just the Forums that are bonked in IE8, cc @chriscoyier
  • I hope to do all the IE work tonight.
  • I just checked and on IE8 it looks okay. Certainly not as good as modern browsers, but not "horrible".

    About the frequent redesigns, I would say that if the site is about CSS, is about tricks, is about Web Design, then it's a must that the boundaries need to be pushed even further. I think that everybody, if they truly are in to Web design, must pursue this. In fact, I think CSS-Tricks is the only major site that actually redesigns frequently. Most don't.

    So with that said, I think it's a great job overall. I am not going to bitch about colors and layouts. I love the site for what it offers me, content and information and it looks great, even if they aren't my colors of choice.

    Give Caesar what is Caesar's and god what is god's.
  • Cool design, I really like it. My only gripe is that it takes too long to download on my smart phone. I really don't need to see a full desktop version on my phone, scrolling forever. I'm guessing that this is the CSS media queries being applied to a desktop browser version? If so, I think this has to be the Achilles Heel of "Responsive Web Design"...
  • Absolutely loving the redesign so far.

    I do feel I should ask if there was any reason that the time elements were dropped from your articles, choosing to use a div instead?

    I'm more curious from a technical side of things, as I can't see any particular reason for removing something that seemed to be beneficial to the site.

    My main reason for asking is that I recently launched a service for referencing/citing websites and books and, previously, your site was one of the very few capable of producing perfect references 100% of the time, to the point that I used your site in the promotional video for the service.

    Again, love the design, just mourn some of the technical aspects of it. Keep up the great work.
  • I don't like it.
  • Greetings from Denmark ;) - love the new design and the articles in here! keep up the good work.
  • Btw, I don't know if its a mistake or not but i don't have the search bar and button (the one at the top with the nice nth-of-type google ish look) only the text: Or...Browse Archives
  • Love the new look
  • @scofield Care to be constructive with that criticism?
  • Great update Chris - after looking through the history of updates, this one is by far my favorite!

    Thanks for your dedication to this site and helping people learn CSS. I can honestly say that you've made me want to become a web developer.

    Thanks again!
    JS
  • I really like this version. I think you also nailed the browser adjustment transitions much better. The last one kept resizing and losing toolbars at inopportune times.

    Only criticism I can think of is I kind of feel like the drop shadow on the top cut out with the logo is a little too pronounced. Mainly just a preference.. I bet the opinions will differ quite a bit on that :P
  • effing love the hover effects. and all the transitions. so mad hot.

    you can drop the html5shiv ref now that you got modernizr doing that for you.

    and i think you should serve univIE6stylesheet to ie7 as well. eff them.

  • It is pretty fubar in IE, but OK in 9.

    Personally, I think we should all adopt a new tactic and display all our websites as plain text documents to those using old browsers. Remove the styling altogether. They don't deserve it.
  • @sl1dr Yes, I can. I don't like the main image(#logo), I thing its looks not very good.
    And the navigation menu is looks like it's make the 12 years old guy. :)
    Do not be offended, I just explain why this new design worse from the previously.
  • @scofield How does the navigation look like it was designed by a "12 years old guy"?


    Because it uses more than one colour?
  • Macosx 10.7 Safari5.1 7534.48.3 mouse plugged in:
    http://cl.ly/3D46160N0Y1R3V180k1T
    auto-fill not working on login widow

    great work overall :-)

  • @scofield I'm not offended at all, I was merely prompting you to be less lazy with your feedback. Simply saying 'I don't like it' is in no way helpful, do you agree?
  • @sl1dr haha.
    Care to be constructive with that criticism?

    That reminds me of Flight of the Conchords:
    Other rappers dis me
    Say my rhymes are sissy.
    Why? Why? Why?
    What?
    Why exactly?
    What? Why?
    Be more constructive with your feedback, please. Why?
    Why?
  • Awesome... The color scheme is nice too
  • @jamy_za Ha! Love that show, thanks for making me laugh.
  • @paul_irish done and done. I think I might combine modernizr and respond into moderizrespond or respondernizer. Just to save an HTTP request. I heard that's important.
  • I love the new design, keeps people interested in it instead of looking at the same thing all the time.
  • Think it looks pretty nice! The only thing I dislike is the amount of white space on the home page, feels like there's too much between posts. But the rest of the site looks tight!
  • @Chris Coyier, I've never done a site with em's either. Never bothered to learn them. I hated when they multiplied inside elements of each other.

    That said, the design is awesome.

    There was a reason the "Post Comment" button in the forum couldn't be styled right? I think there was a discussion about it a while back and there was some reason, I forget though.

    On the Home page, in the hot links section, the Green in the rainbow is out of order.
  • Absoultely love it. A lot easier to see what is going on and very easy on the eyes. Nice work!!
  • I like the new design better than the last. I do agree about the longevity of each design. I would like to see each design stick around longer.

    If I can throw in a constructive critique… I have been reading up a lot about HTML5 and screen readers etc… When I select the code and place it into the HTML5 outliner, it doesn't seem to follow a logical outline. Is this something that you are working on?
  • This comment can be reused for all new CSS-Tricks site designs. "I liked the old one better!"

    When you changed from v6 to v7 it was like drinking Sprite when I was expecting water. Why the change to v7 when v6 was awesome. v7 to v8... "What what playa....v7 was like wine with cheese..what the hell man. v8 to v9...What!?!? Did I just get pwned? I opened the front door and my house looks like a hotel. Why v9 when v8 was the best ever? I am in awe of your skills always.
  • it seems that media queries don't work in IE (via respond.js)
  • Everyday the new design grows on me more and more. Really great work with the usage of screen space too Chris!
  • You have done a great work!,
    and we all know that change rejoice
  • @chriscoyier I found two problems with the fancy source button:

    image

    When I click on it (mousedown state), it looks like this (fills the vertical window):

    image

    And second problem is that it doesn't work at all in Chrome (fine in Firefox, but I didn't test other browsers).