Each 'redesign' is a step backwards for me. Three versions before this worked the best. Now it feels like the design I getting in the way of the content.
It pains me to say that because I think what Chris offers is fantastic.
Do you think that's because a there are a lot of gimmicks throughout the design? Animations, code functionalities?
And then some.
I've never been a huge fan of Chris' design. CSS Tricks, and Codepen looks kinda fugly, IMO.
I think it's worth remembering that Chris is not a designer, nor does he claim to be. He's a CSS guru, for lack of a better term.
If it means anything, his website says "Designer at Codepen"
Interesting...as far as I can remember he actually hired someone to design Codepen?
True, but did he not commission a designer with kickstarter funds then only to change it a year later? If Chris is not a designer then Chris should not be doing redesigns every 12 months.
Why not, it's his site he can do what he wants. It's not like his redesigns look awful. He experiments with different looks and constantly iterates...that's more than most do.
Even if you don't like the visual style, you have to admit there's a lot of really cool ideas and details in there. I love the way the cards stack up on mobile for example.
If you want every article you read to be perfectly laid out, stick to Medium. Personally I think it's cool when people try something new, even if that means missing the target on some fronts.
I'm glad you've posted this viewpoint. I also think it's very beneficial to see a well-known industry site experimenting on the fringes like this. Personally, it's always good for me to analyze a design that is a bit more novel than the norm. It often piques my own imagination, and for that, I'm always appreciative.
I think Chris Coyier is a genius when it comes to CSS but I am not too sure about these redesigns he does. This might be just me but it feels web 2.0 and the menu at smaller screen sizes is either a bug or needs some margin in between menu items.
Things do get a little cramped. I would assume he is doing some progressive things to where some elements do not play nicely/very intentional design choices.
He kind of addresses that here: https://css-tricks.com/redesign-v15-notes/
Genius is generous. Chris is simply the messenger. The majority of "tricks" come from other people, however, that's not to say the content isn't interesting or helpful — it is. But, the site design has always been poor, in my opinion. That's what you get when a dev attempts design.
I agree to that to some extent. The site is so accessible to gain information quickly and that reads well though; It might not be a trendy/modern design aesthetic, but I don't think that is necessary for the subject matter and tone of Chris' site.
What's poor about it?
Information Architecture: It's very difficult to decide what to read. There is no hierarchy of content. Should I read the left column, or right? Very overwhelming.
Typography: The text is too large and in-your-face. Text is meant to be read, not looked at. This makes it hard to quickly scan the content and focus.
Spacing: The site feels very cramped resulting from the layout and text size. It could benefit from some white-space.
Aesthetic: Harsh gradients, weird header and footer "angular" thing, non-harmonious colors, etc. There's a difference between "intentional ugly" and poor visual taste. This is the second.
I could go on, but it's not very important as this is purely my opinion. Chris does a fine job managing the site and this has nothing to do with him personally. Simply, my observation and feeling.
All good points, I mostly agree.
I rarely spend time on the home page, though, so the typography and layout of the article pages is most important to me. I didn't immediately notice, but I do think the articles feel more cramped (I wonder if the line-heights are actually smaller).
This looks more like a footer for the new South Park video game then it does a footer for a popular web development resource site.
What if Chris is pulling a South Park? Pushing an envelope aggressively?
The mobile navigation does that, too, but the text is centered. Very hard to read.
And to click. The touch targets should be padded better.
Regardless of what people like and don't about the design, what Chris (and now his team) brings to the community is undoubtedly more valuable than most modern resources today. I especially love that he hasn't gone to the dark side (a.k.a. medium). Keep real blogs alive!
I think Chris is a kind of genius, because each redesign, urgly or not, make people talk about it :)
He should've worked with a badass designer like he did on CodePen which looks amazing.
This looks very busy. The previews of the articles are way too long. I feel like I have a very small screen, and I'm typing from a rMBP 15'' :/
I actually really like the stacked cards on mobile, it's a really simple and fun way to show excerpts.
Aw yeah! I was like "no way!" when I saw what he did there.
I like the style of it, but I'm not crazy about the UX. The card stack cuts off the content, and I would expect there to be some way to view the rest of the content without leaving the page. I clicked the title of one of the cards, and it took me to a completely different/external site, when I just wanted to read the rest of the post.
I'm not a fan of the redesign. I think it's a step backward from the previous iteration. My biggest issue with CSS-Tricks has been related to the connection/loading speed; not sure if anyone else experienced issues with this, but there were numerous times I could not access CSS-Tricks because the site would never load -- that was about a year or two ago, though.
While I can totally commend and appreciate that hasn't followed typical trends and thrashed out another website that looks like every other website, this new redesign completely misses the mark for me.
Chris his great at what he does - but I've got to be honest - I've never really liked the design of CSS Tricks or earlier designs of Code Pen.
The new design is odd in so many ways, I'm going to stick my neck out and say the design is unfinished or really rushed.
The search field with really strong inset shadow, disappears on focus to reveal a dramatic box-shadow.
Just do a search leaving the field empty.. You notice a flash in the left column but the content disappeared. You don't get any indication of no results, just a jobs board and lots of empty containers. Performing a search with text isn't much better. The page numbering links lack spacing when slipping on to more than one line.
The randomly generated header shape looks really bad on occasion it is generated to strike through the logo. which makes it look like a CSS error (i.e. no clearfix around a floated item) this is massively Ironic.
The colour choices aren't doing it for me. But this is personal preference.
The touching menu items, why?
Moving on to mobile the card view is great. However I have stumbled across some other poor UX decisions.
Clicking on the hamburger will drop the menu. Click the same menu button, expected to be the hamburger.. It's actually the user avatar. The hamburger has dropped down with the menu.
The bold font with all menu items touching is borderline unreadable.
Gradient from yellow/oranges to pink just doesn't do it for me.
On the flip side, this website is called CSS Tricks.. it does an amazing job of showcasing what CSS can do.