CSS-Tricks Design (v9)

[amerigo]

it seems that media queries don’t work in IE (via respond.js)

[joshuanhibbert]

Everyday the new design grows on me more and more. Really great work with the usage of screen space too Chris!

[Fiuni]

You have done a great work!,
and we all know that change rejoice

[Mottie]

@chriscoyier I found two problems with the fancy source button:

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

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

[snillor]

After waiting a while to get accustomed to the new look, I gotta say that I love it.

I actually prefer the muted logo to the more colorful example provided above – seems less arrogant than making the site logo the most obvious part of the page, and it allows the more important content (headings, advertising, etc.) to be prominent. Less is often more, and for me downplaying the visual impact of the logo works very well.

I find that the neutral background creates a muted color scheme that is very easy on the eyes. At the same time, restrained use of stronger colors on selected items makes them stand out without being “in your face.”

[Kevin01926]

I would say that this is easily the years best overall CSS design out of any site. Absolutely stunning. It is crazy to look at the first design. It is like you are becoming TOO powerful at CSS Chris! haha amazing

[Despondo]

@OniLinkCR Yes, it DOES look horrible in IE8…At least there are some serious problems. See PDF here of some examples. Should be easy enough to fix for older browsers.Screenshots

[jamygolden]

I don’t know where I stand on this whole IE support thing in our industry. I think the times where IE would matter are the demo pages. Other than that, if someone is using IE, they should be making use of chromeframe or at least using IE 9.

Maybe I’m not thinking of something. What other situations would it be “accepted” to use LTE IE 8? (In the last month, 8% of my blog’s traffic has used IE. 50% of that has been IE9. So basically 4% total using IE6, 7 and 8)

[joshuanhibbert]

@jamy_za It really is situational. I have to agree with you in regards to traffic to sites like this and yours.

[D2WebDesigns]

Chris,

You do great work, no doubt about it. This is light years better than the previous version (IMO)… I just wasn’t a fan of the last one…. my apologies.

BUT, with that out of the way. Using Firefox 6.0 I have an issue with your main index page. Just since the CSS-Tricks update and ONLY on the main index page. I can view the forums and any other sub-pages without error.

But what happens on the main index page load is I get a beautiful background and the CSS-Tricks banner… and nothing else. A totally blank page.
When I scroll down the page content starts to appear in chunks but only after I start to scroll back up. At times these “chunks” disappear only to reappear farther down. It’s almost as if there is a modal box with no content in the way.

I would chalk it up to a video card render problem but it quite literally only happens on CSS-Tricks.com and only since your latest design change and again, only on the index page.

You can view the screenshots here:
http://www.d2webdesigns.com/public/css-tricks.png
http://www.d2webdesigns.com/public/css-tricks2.png

Dennis

[j123]

First of all, I think this is the best design yet; love the way the site has evolved and always feels like CSS-Tricks.

Maybe a layout bug (all browsers, as far as I can test): On wide browser widths the right-hand column ‘aside’ hangs off the edge of the #main-content section (see your own screen shot at the beginning of the article).

Can be fixed by altering the negative right-margin of the aside, but the percentage widths of the columns will also need to be tweaked to prevent a float drop of the hot-links div.

Second point: If javascript is turned off, the search box disappears.

And finally, on Mac Firefox at small browser widths the nav tabs don’t move up far enough:
http://imageshack.us/photo/my-images/233/macfirefoxbug.png/

Minor points.
Great design, Chris.

[joshuanhibbert]

@j123 The ‘overhang’ is intentional and looks great in my opinion!

[j123]

Oops! In that case ignore my comments.

I first saw the overhang with an old version of Safari which didn’t show the transparency around the edge. Thought something must have popped out.

I agree, it looks great.

[joshuanhibbert]

@chriscoyier Are you planning on bringing back the little notification that shows up next to our profile link when we are mentioned?

[noahgelman]

The search bar on the left is really throwing me off.

[Author]

Posts