Opinions on the CSS-Tricks new layout

[noahgelman]

I wanted to know what everyone else thought about the new layout.

[TheDoc]

It’ll definitely take me a while to get used to! A drastic change indeed!

I love how clean it looks. A couple things are a little sluggish on the home page, but I’m sure he’s working on that.

[noahgelman]

I feel almost like it was downgraded.

Feels a bit more ‘purchased theme’ and less original.

Also the blue and gray is a little blinding.

[Chris Coyier]

My esteem for Chris was getting higher and higher with every article and every snippet posted. However, it has just taken a rather good beating with the redesign. I understand the impusle to go with something cleaner-looking, but I agree with noah that it feels purchased and not yet refined. Also, there’s some wierdness with the front page; the meta div is covered with some white stuff in FF until you hover over it but it looks like a gradient black in IE8 for me, but in both cases it’s distracting and wierd (especialy since the white or black gradient partly covers the last line of the article above it; needs a bit more margin).

So though I am NOT a designer and have said so in the past (any designers want to team up with me for occasional contracts? ) I am disappointed with the new look. Hopefully the kinks will be worked out soon!

[mshort]

I am a little disappointed with the new redesign also. the first thing that caught my attention was the Navigation bar, which is a good thing although I don’t think that it looks as good as it used too.

that being said, I do love the roll over effect of the article previews that fading in of the lower text is really nice.

[Kestral]

What I don’t like is that everything feels cramped. Everything feels crammed in, larger than it should, and seems like it’s having difficulty fitting.

I like the navigation, I’ll say that. Blue/Orange does go well with each other, but I liked the other theme better.

I know Chris probably spent a lot of work on it, and credit to him for making one that doesn’t look terrible, but it just doesn’t look entirely as I would expect from him, and it doesn’t feel that this is CSS-Tricks for me.

[Surrender911]

I like the new design, as it is very minimalistic and I like that it is designed for larger screens . The sidebar and footer I like most. The navigation on the old one was more to my taste.

[philipallenphoto]

I like it.

I think what is best about it is not just the aesthetics, but the functionality. It seems exceptionally well thought out. Look at how the layout will stretch all the way out to 1200 pixels wide! When you scale the window down, the layout scales down with it. Conventional wisdom is you don’t make a page wider than 960px. This layout allows for more screen space for folks with higher res monitors while still accommodating fogies with 1024×768.

I also like the fades over the article excerpts. This is not only a cool looking effect, but seems especially appropriate for a blog which, a few years back, first gained popularity from an article about making fades over the bottom of articles.

Nice job, Chris.

[Chris Coyier]

Quick note: The forums, as a part of this redesign, got the short end of the stick. The reason there is that I plan to do a full revamp of these within the next few months and give them the real treatment they need.

[Untitled #3]

Sorry for this one Chris, but I don’t like the layout either…

In fact, I’ve just created an account here (maybe I am crazy, who knows? ) just to tell you that the buttons and boxes on the site in WebKit (Google Chrome, actually – didn’t test in Safari) have these weird backgrounds on them – like you can see screen-captured on http://prntscr.com/q93a

Overall, the layout isn’t bad – but it just seems a step back from your previous style… Maybe because I’ve been used to the old CSS-tricks; but definitely – the current design is just not "my cup of tea."

[sliver37]

Hey Chris, as always with change people take time to adjust.

Since this is one the sites I frequent the most, I believe changing things up every year, or even after every x amount of months is a great idea. I like the new design personally, sidebar looks great and the jquery effects are getting better (as expected)

Keep on rockin’ ..or fidlin’!

[Kestral]

I do think it is pretty neat how Chris does some of the animations without jQuery. Like the items in the blog roll or the Wufoo/DintWP/Quotes on Design links at the bottom, or the icons to the left of those.

[swissdude]

Uff, this is a big step backwards. I liked the previous design with all its details and warm colors. This looks too "undercooled" for me.

[hal8]

Well i am no designer, but i quite like it. When there is a re design on here, it always takes me a couple of days to get used to it, then i love it.

Saying that though, i did used to like the personal effect on the other designs, and loved the old nav. But think the blue on this one does look good too.

Plus I always love the footers and this design hasn’t let me down

So yeah guess i like it

[Hutch]

I’ve got to admit, I also wanted to sign up on the forums to give some input. I’ve been following the site daily for the last two months, and this seemed like a good opportunity to jump into the mix. The design has definitely lost its previous feel with this new design, and maybe that was the goal? Either way, I think all the design lacks is a bit of refinement. Here’s what would improve it in my eyes:

Colour (ignore the Canadian spelling)
• The new colours look okay together, but I think the warm colours made the site before.

Navigation
• The blue extension after "SNIPPETS" looks like something is missing. I would remove the extension entirely or create more definition between the navigation and whatever you choose to put beside it.
• Tabs need more distinction. I wouldn’t do anything too predictable like a basic gradient, but a simple texture, divider, or border could help. How about a textured border/fill to go with the background’s look?

Layout
• The content area is too wide. It creates long lines of content text/descriptions that spread out too far (like this post). Cutting the blank blue nav gap to the right of "SNIPPETS" by 50% would help. Also, below each header I would consider indenting the text by creating a left/right margin of at least 10px.
•The "LATEST SCREENCAST" section is a good example of making the width work. The image creates better balance.

After saying all that, I hope Chris is happy with his site’s look. I would like to know what he felt about his own design prior to uploading it for the world to see. What reactions were you looking for? What stronger/weak points do you think existed prior to uploading? What do you think about our feedback? The response to those questions could make a cool site review video.

Anyway, thanks for the great coding resource! That is why I come here most importantly.

[Author]

Posts