It’s been just about a year since the v9 design. You know what that means! Redesign time! This is, most definitely, the biggest overhaul yet. Not that you won’t recognize it. There is a fresh coat of paint, but all the old stuff is there.
The Kickstarter Made It Happen
When I struck off on my own, I knew I wanted to make a go at making CSS-Tricks more of a full time gig. Right away, redesigning the site toward that goal seemed like a good idea. But why do that hidden away in my room? I love the idea of working in public and that’s exactly the kind of work CSS-Tricks is made from. So I thought I’d turn on my microphone and screencast the whole process. Then I’d make those videos available to purchase or subscribe to. To validate it was a good idea, I put up a Kickstarter.
It went pretty well :).
Now I’m coming through with my promise to the backers. The videos are available in a new area of the site called The Lodge of which Kickstarters will get access to and everyone else can purchase access to if you’d like.
Screenshot
If you’re reading this anywhere other than css-tricks.com, I encourage you to jump over and look around. But here’s a screenshot of the homepage for the feed readers:
This design and all previous ones are screenshot for posterity here.
See a problem with the design?
I’m going to try something new. I’d like it if you could open a new issue on an otherwise-blank GitHub repo when you find a bug or any other problem with the new design. The GitHub issue tracker is awesome and perfect for publicly tracking bugs.
Comments
For a long time I’ve had a system here of curating comments. It’s a simple thing. Spam I delete. Not-very-useful comments I bury. Awesome comments I feature. You can read more about it.
In the v9 design, I never got around to a good style for buried comments. Featured comments got a gold star. In this new design buried comments are more obvious (they are squat and fade out). Featured comments have a yellow stripe across the top.
I’m not trying to be mean to people who’s comments I bury, I’m trying to be respectful to everyone else who’s time is being spent on my website. Comments like “Nice post!” often aren’t actually spam, but also aren’t useful to anyone. If I discourage those kind of posts by doing this, I’m OK with that.
New Stuff
The Lodge is the biggest new thing.
There are a few new Deals on the Deals page (if you have one to offer, hit me up). Not a lot of brand new stuff really. New content will be coming a lot faster now that the redesign is “done.” I’ll be finishing the Almanac for real, posting tons to the Gallery, shooting new screencasts, and blogging up a storm.
Illustrations
I think the new design is worth exploring just to see the custom header illustrations. Lovely work all around by Reagan Ray, Meg Hunt, John Neiner, Giovanni DiFeterici, Erica Sirotich, Nick Sirotich, and Alyssa Nassner.
Little Easter egg: hover over any custom header for about 5 seconds and a link to the illustrator will pop up.
It’s Not Over
One of the beautiful parts about the web is that it’s ever-changing. It doesn’t have the finality of print design. I have a huge list of things I want to do on this site, from the tiny to the huge. Look forward to this design morphing over time. I’m sure it will be quite a bit different than it is today by the time v11 is a sparkle in my eye.
I love the new look. The functionality on my phone is great too. The way you conserve space by using a navigation button is very clean. I look forward to seeing what this becomes and also greatful for all the useful info you send everyone’s way
I think you did great with the flat, greyscale scheme with the modules, it really separates them and makes the content really stand out.
The font choices are similar to and make me nostalgic about design v8, when I first found this cool website. ;)
Nice redesign, very readable and clean.
One observation I have is that, to my eye at least, at the breakpoint where your three column layout becomes a single column with hidden topnav, the webfonts become rather blurry. The smaller headlines down the page are quite hard to read.
And a question: How did you determine the breakpoints? Were they based on device sizes, or did you let the design and line length decide when you broke to a new layout?
I’m now inspired to go redesign my site which has been a very piecemeal process over the years but is sorely in need a a complete overhaul.
What did you do with the website design??? Im so sorry if this is gonna sound harsh, but it looks like old designs! Not beautiful at all.. horrible. The previous one was so much better
I don’t want to browse it anymore :(
To answer your question, you could sign up for the Lodge and watch the videos to see what Chris did with the design. ;)
Wow, i don’t know what to say…
it’s just like love247 said. Sorry for that, but you were always my personal god when i came to website design. I don’t know what i should call this new design, it’s not really ugly but it’s totally boring. It gives me the feeling that you get when visiting friends in a hospital: everything is too clean and dead. Totally unpersonal :(
If i could return to v9, i’d switch back immediately :S
The old theme was soo wonderful…
And, most horrible thing: you killed the frog :'((
… Horrible? You don’t want to browse it anymore? Someone is being quite dramatic! Even if it isn’t your taste it is still palatable. I personally think it is nice, but even if I didn’t, there is no way this design is ‘bad’ enough to not want to browse. And ‘killing the frog’ (poster above) – You’re joking, right?
I’m quite happy with the redesign and look forward to drawing inspiration from it!
I have to agree that the new design is boring, and kind of looks like a css template you’d get for free 5 years ago.
I agree fully with what you are saying – the previous version of this site was amazing! now it really is not great at all. Why was this change made at all? :(
sorry I have to agree
Concretement…
The buttons look really cool with the 3d. Works fantastically on Safari 6. That’s an improvement in my opinion – maybe a fallback for slower browsers wouldn’t be bad.
The graphics on top in every section are cool as well. That’s the personal and appealing part.
Other than those I have to agree to this comment I’m answering. The v10 appears dull and not very “css-ish”.
I’m sure there’s professional work behind this and it’s working great. However, I recommend releasing v10.1 really soon with improvements that give the user more personal connections with your site like the frog you had on v9.
It’s soooo grey ;-(
Sorry, but I’ll have to join this thread….
The new homepage is not nearly as nice and inspiring as the previous one.
Although, I have to say that the single article pages look better. especially the comments area.
I thought exactly the same, no offense to the author :/
Hi Chris,
You are always my guru, whenever I am looking for web design, CSS and WordPress solutions. But I think you are trying too hard for this new design. Font is the biggest issue here, I think. Thus, I have to agree with some of the guys’ comments here.
@Brian Temecula, you read my mind (O.o)
Chris, this is a complete let down. I was getting really excited to see what bad-assery you’d come up with next, but I guess I have to wait another 8 months…
My face when I first saw this new design:
ಠ_ಠ
Chris, you killed baby Moses and made baby Jesus cry, I just don’t know how to say it any other way. Tongue in cheek but I enjoyed the previous design more. And your rss feed is always what I look forward to the most when I open google reader. And just for the hell of it I’ll throw in this comment: you should learn expeessionengine, that’d make you at least 5 inches cooler…. At least. Everyone knows the girls dig the guys with expressionengine…
People think I’m trolling or spamming, but I’m saying this because i was so sad to see the difference between the old website and this one, I loved the old one so much, I was happy browsing through it.
And in general when I don’t feel comfortable with a website design or functionality I close the tab immediately.
Anyway, I’m waiting for v11 ;)
Great Design….. I love this theme
Where’s the frog ? :)
It’s interesting to see how this site evolves. So, keep it up Chris!
Kind of Metro + 3d
The new website is great! Although on Chrome here, it’s a bit slow, and the ‘3D’ effect with the text boxes is not so three-dimensional. Was it meant to be like that? Border really don’t make for a good 3D effect, you know.
But the website is a pleasant refresh nonetheless, but it’s really slow (typing this comment especially!)
Great work! I love the notification in the footer best.
Wow, this is different. It feels a hell of a lot more cleaner. I like the asterisk at the bottom with your photo in it.
I like it, but it may take some time to readjust. lol.
How do we purchase access to The Lodge if we didn’t pay during the kickstart project?
Thanks!
https://css-tricks.com/lodge/signup/
Love the new design, looks amazing well done!
only comment is the snippets section (which I love by the way) the menu on the left should float down the page with you as you scroll so its always on the screen as without it the page looks a little empty.
This is great! I like all the subtle details.
I would just remove the grey border top / left / right from around the navigation tabs. Personally. Otherwise it is growing on me.
That’s a thought. I’ll give it a test locally and see if I like it more. It would be slightly larger click/tap targets which is always good. I kinda like now how it lines up with the edge of the modules.
Like that too! I tried it in google chrome’s “inspect element”-feature and looks much better to me without the margin/top-padding. Other option would be to reduce it to ~3px. Looks cool also.
I really don’t like this new theme :(
It’s a bit too plain and basic and the blur/shadow that separates the buttons on the main nav is a bit cheap looking.
The previous design was far more adventurous and fun to browse, which made it stick out from other sites. Now it seems bland and boring.
I don’t want to come across harshly but this is more of a downgrade than an upgrade.
Version 9 design is still found on article demos. The header that says “CSS-Tricks Example” is still v9 styled.
Shit just gone real !
You did an amazing job there Chris. I don’t like every single thing, but it’s new for sure, and it pleases me. I can’t tell now if I prefere the new or the old design, but I’m sure you improved many many things in this one.
I can’t wait to see the lodge, really.
Anyway, keep up the good (awesome ?) work Chris. :)
Sorry, but in my Firefox 15 this site looks awfull… Will post the issues to the github… Anyway I liked the V9 much more!
The nav doesn’t show up for me in FF 15. “k, 9, Q,p” shows up in the top row. It’s definitely a redesign. I’m not sure what to think of it just yet.
For some reason, in Firefox 15 (pt-PT localization) the words in both the posts and comments are being broken at unusual points. They don’t have dashes indicating they continue on the next line, and the point where they are broken does not stick with proper grammatical rules.
Though the comment textbox is breaking them correctly and using dashes to indicate the word continues in the next line.
Yeah…there’s definitely an issue with the icon-font if FF15
I just found the same thing on a site I’m building last night. Seems FFOX is now doing something bizarre with break-word:break-all; If you remove it, it hyphenates all over. I’m still working on it.
(I think my issue may be related to display:table-cell; along with the break-word. A buggy interaction of some sort. FFOX – the new IE!)
KInd of a bummer since it works great in WebKit right now. I’m gonna pull it out though, lots of reports of this being a problem.
Isn’t there a JavaScript library, Hyphenate.js or similar, that does the intended goal without breaking other browsers? That would be a feasible alternative.
Actually, this design really looks weird. the “logo” on orange square is just horrible.. 3D buttons are not that horrible, but still ugly. V9.2 was awesome
wowowoowowow amazing design chris keep up :D
Congratulations on the new site design. I think it looks great!
Really nice, great work Chris! I just have 1 quick question (forgive me if im jumping the gun, I know this just launched today) I backed your Kickstarter, and just wanted to know how to get Lodge login info.
Somehow i liked the previous version of the site more.. seeing that version it felt like i m visiting a website from css genius!
I’m sorry, I don’t mean to cause offence, but the blue you’re using for the hyperlinks and the buttons? It’s the shade of blue used for those things you dry your hands with in lavatories, please change!
Also the bars with categorisations on the homepage feel wrong, theyre too small, lack sufficient padding and they don’t align with anything.
I do love the little animation on the footer links though
Looks great Chris! I do miss the bright colors on the nav rollover, but that’s just me, awesome job man – b
Sorry Chris,
this site looks horrible. That pseudo “3D” effect is ugly – especially the form fields.
Readability/Reading experience -> fail.
CSS-Tricks was one of my favorite site, but now …
Yeah! Tom you are right, when i first looked at it, I found that some put a fire onto css-tricks.com, because everything is grey, even navigation are with grey dark gradients.
Stunning! Love it.
Awesome design chris,
you have done awesome
but few things i really don’t like new forms and legecy syntax for unprefixed linear gradients.
:-)
but the design is more then awesome so you have to take care because it may cause over exposure to pure awesomeness
The icon font isn’t showing up properly on every page. Seems inconsistent and odd, but it definitely isn’t showing up here or on the home page. Shows up properly on the forum page though.
There was a bug with this that should be fixed now. Definitely let me know if it crops up again.
Nice work! Always inspiring.
I’ll admit that version 9.2 (the former) was my favorite but I’m sure this one will grow on me too.
First time I saw this design also thought I was on Treehouse, that banner is too big.
Sorry but I didn’t like the v10.
Hi, i visit css tricks every day for new posts and tutorials. I don’t like new design, V9 was much better, please back it :)
NICE work Chris, congrats on the launch, it looks awesome.
Wasn’t sure how the illustrated header banners for the different sections would fit in but they definitely do, works really well, and I for one dig the faux-3D effect across the site :)
Looking forward to the screencasts!
DAYYYUMMMMMMMM!!!!
Hey Chris – did you say the Kickstarter peeps will have access to the lodge? If so how do we get hold of the login details?
Cheers,
Matt
You should have gotten a couple of emails about it through Kickstarter by now. If not, hit me up from contact link in the footer.
No one likes change, but this is retro (in a bad way)
– Not easy to navigate home page
– Posts are not inviting at all
– It leaves a lot to be desired
I fully understand needing advertising to pay for stuff but do not like the ads back on the side at all.
Will i come back – yeah – you’re Chris & cool!
Which ads? ;-)
I dont’ see anything. Happy with “AdBlock Plus” (http://adblockplus.org/). Works on (I believe almost)any browser.
So many different opinions…Or, better said – three opinions. Ones that love the new look, ones that are too kind to say it is not the one to love and ones that loved the previous look.
Honestly, the buttons, the input fields, the “play” buttons make me feel I will throw up…
And the logo is kinda poor. As somebody said here: “At previous design (V9) I felt like I am visitting a CSS genius website.” – that was so true!!! I do not have that feeling right away…
Sorry Chris, I hope You would make everybody happy in next few days…
The Search icon not working to me D:”
cl.ly/image/0T0d023w3E1E
I really like the redesign, especially the fancy hover-effect of the CSS-Tricks box.
I miss the colorful menus of the previous design.
Chris,
Nice evolution to the css-tricks style. Obviously a new iteration, but still very recognisable at the same time.
My only criticism is that there appears to be way too many post/hot link/video boxes, which looks a little cluttered and not great to navigate.. Love the top navigation as the 320 breakpoint though. Will definitely be making a visit to the lodge to check that one (and others too) out.
The footer is amazing; I didn’t think anything could be better than the last one, but it is.
The illustrations are great too (although I think the later ones don’t fit the layered/single-colour feel of the site). However I find that the nav is slightly weird, and that the header is missing the logo.
Otherwise: great work, and I never thought you’d do it so fast. I love the site.
@Chris
hi,
backed you up on KickStarter for $25
when we backers will get email / update with login credentials ?
I want to sign up :)
https://css-tricks.com/lodge/signup/
but go directly in the Lodge without new payment
You should have gotten emails about access from Kickstarter by now. If you haven’t hit me up from the contact link in the footer.
I have FF 15.0 and I immedialt noticed two things:
-The font icons in the main menu aren’t working: I see the characters k, 9, Q, p and so on…
-Words are broken in the middle!
Imagine my surprise when I’m looking through my RSS feeds in the morning, and I see myself being quoted. XD
That aside, I’m liking this redesign. One thing that really caught my attention is the navigation bar at the top. It shows off doing something correctly that’s very easy to get wrong: the timing on the hover animation. This is fast enough that it still feels immediate, but slow enough that you can still see that it’s animated. One common mistake I see is making it too slow, so that the animation is the center of attention. A 3-second fade may seem cool at first, but can make it difficult to see what’s selected when you move your mouse from one item to another. So good work on that.
Interesting how the world of web design is moving away from Apple-style realistic lighting to MS-inspired flat colour. The former is beginning to look really quite passe. Interesting times.
I really don’t like it the old design was so much better. Not sure what you were thinking when you redesigned it. Can’t wait for version 11
Im sorry but this redesign is a complete disaster…. anyone that contributed any money to this through kickstarter should be refunded immediately
For anyone feeling this way (who isn’t just a troll but a real person with real feelings):
1. Give it a little time. There is a LOT going on in this design. True feelings about (anything) often take a little time to develop. The fact that Gerry here was able to find the comment box and easily voice his opinion is testament to the design not being a “disaster.” Disastrous designs don’t allow users to easily accomplish their goals.
2. In The Lodge area of the site, there are over 150 screencasts detailing the redesign process of this site. There are real, empirical, numbers-based goals for this site. Some of them will take time to prove and some of them are already proven. Design is more than gut feelings about aesthetics, it’s about accomplishing real goals. All that is laid out in those videos.
Gerry, you’re talking rubbish. Like anything new it takes a little bit of getting used to, but nobody can deny the amount of work, planning, thoughts and considerations that have clearly gone into the design.
Additionally – the Kickstarter wasn’t really for the redesign, I signed up to the Kickstart and donated $100 bucks to say thanks to Chris for making me a better front end developer and also because of the upcoming learning materials that will be worth 10 fold what I donated.
In summation – don’t disparage and write off someone else’s work – especially if you’re not going to pinpoint a problem specifically or offer a viable alternative.
40 hours of tutorials to explain how one website is done is a all lot. I think it’s great that you are doing all that but I think you should focus more in what you use to do like explaining new ways of coding specially with html5 and css3 that are now been used . What about canvas??? i have learn a lot reading your posts and even watched the tutorial you did on lynda.com which was great. I also like your boo about WordPress. Bottom line I think most of us were expecting something completely different than what you did I think that’s why we are so disappointed. I just hope you’ll go back to teaching us about the latest out there. Thanks for working so hard for us.
I think technically the website is fantastic, but from a design point of view its a fairly substantial step backwards in my opinion.
On larger screens its a little cluttered to be honest on the home page and although the illustartations are great, I’m not entirly sure why they are on the website, they just don’t fit with the look and feel of everything else. Each individual section almost feels like a new website.
I agree change isn’t always easy, but I think on this occasion the design is off and could do with a little work to be honest. It kind of has a feel of a developer who designed the website, if you get what I mean.
WHERE’S THE FROG?!
Hi,
I attempted to login to the lodge using my Kickstarter email and password with no success.
So I signed up using my Kickstarter email and received a new password for the lodge, however, that did not work.
Is the lodge ready or are you just giving a heads up intro?
Thanks,
Liz
Hey Liz
AND ALL KICKSTARTER FOLKS,
You’ll get information on how to get access today =)
Through and email from Kickstarter.
Oh boy, Safari on iOS5 crashed twice when loading the page.
There is an issue on IOS, it keeps bombing out
The site loaded fine for me in Safari and Chrome for IOS5, but when I loaded this post in Chrome it crashed twice and Safari crashed 3 times.
I didn’t try any other posts, but there is definitely something strange going on with that.
Regarding the design, I actually quite like it, the subtle attention to detail and the little animations etc are a nice touch. Good job Chris.
well, 3 different experiences, first, sure don’t work in IE8 (my system is XP with IE8), weird looks in FF15 (in menu bar), Chrome looks normal, I guess, cause I don’t really know what it should look like. afraid to try it in IE7 on my other PC, never know what I might see. other than that, I don’t come here to check out the design anyway, the content is what is important to me and as long as I can see that, I am OK, regardless of the design.
checking again in FF15, loks like Chrome screen now, now looks more like Chrome screen
The design is great! I love how you packed so much cool stuff in what little space is there. The only caveat I have is the logo looks kind of bare but Im sure this was done to reduce bandwidth, still though, it just seems a little empty. Great job. One question though, I was a supporter of the kickstarter, how do I check out the lodge section? I didnt receive any kind of email like I have been for the updates.
Sorry, I dont’ have a Github account and really didn’t feel like signing up ATM, but I did want to mention an issue I found on my iPhone 4 in Safari (iOS 5.1.1 – not sure of Safari version).
When loading the site (or refreshing the page), I can see the blog post titles during the FOUST, but once it does it’s thing (and the styled CSS-Tricks logo is loaded) the blog title is either white or not there (although I can click on it), this seems to be an issue with other, if not all headlines. I’m also going to mirror the “slow in Chrome” comments, typing this and loading of pages in general is noticeably slow (Win7, (v.21.0.1180.83).
As for my opinions of the design, honestly, I think there have been better versions. I hope this design didn’t feel “forced” to you because of the Kickstarter thing.
I’m mixed on this redesign. It feels cleaner but too “blocky”. I liked the older color scheme better. That was my initial impression. It may change as I play around with the site.
Sorry Chris,
I’m a little disappointed. You really have to re-think you tablet version of your website. This screenshot just says it all: http://www.flickr.com/photos/designbird_nl/7944249486/
That’s a valid critique for sure. I’m sure there are some things I can do to cinch up some things and bring more into view on that particular screen size.
Amazing work with the new site! Browsing away on it on every device I can get my hands on… :)
Hi Chris,
your Redesign is nice, because it’s clean and focused. Unfortunatly I love your old Webdesign, because of the many lovely details. One thing I appreciate specially was the typo. The new font looks arbitrarly and FF15 display strange line breaks.
Great work Chris, very clear and clean.
Come on now Chris, it just sounds like you’re making poor excuses now.
It’s really not that hard to find the comment box on ANY site, even my mum could find it.
There is absolutley no consistency throughout the site, poor typography and the overall feel of the site is shambolic.
The fact you used the term ‘Troll’ just proves that you dont take cristism very well, its an easy way to reflect the critism buy calling someone a troll…Im a web designer myself and id like to think i know what im taking about when it comes to design websites and how they should look
The blog posts on the homepage are completely lost, if i was a newcomer to the site i wouldnt have a clue where to go, and to be honest id leave with about 3 seconds
There’s no denying there’s good conent on the site but the bottom is that its got to work the people using it, and right now its not doing so.
You sound like you are just starting in web design. You learned some stuff and came here to try to prove yourself.
well, I quite like it now. I come to the site and it’s clearly marked where you can find what you actually want to find. Blog Posts have an orange badge with “Blog Posts” written on them, Hot Links have a red badge, latest video a green one, and Polls are violet. I think it’s presented very clearly! How can you say, you’re completely lost when visiting the site the first time? You even have the navigation on the top… (I would remove the margins on the navigation as well – someone posted that already, can’t find it now.)
The TreeHouse ad in the header might be confused by some as a tagline for your site. What caught my eye was the fact it says iOS Development event though I know your site has more.
Great job as always though, hope you don’t mind if I leverage some of your techniques… ;-)
I viewed the site on IE9. The words in the text are getting broken up at strange places between lines. Also, the watermarks are not showing in the “leave a comment” text boxes. So I didn’t know how to fill them out. I switched to Chrome and the site looks awesome.
I haven’t been to the Lodge yet, and I’ve already learned something important. “Never ask the world to critique my web design”. Another great lesson from the master. Thanks Chris.
Hey Chris –
Just noticed you don’t have any sharing capabilities on your site. Not sure if I just missed anything, but wanted to tweet out your new design and a few of the examples!
:-(
Thanks Michael, that’s nice of you to do. You can tweet from Twitter.com or any number of Twitter apps (as I’m sure you know). Social media buttons can be extremely slow and IMHO a little distracting. I think tweets mean a bit more when you write them yourself rather than click a button and get a pre-crafted tweet. You know?
Prosterity?
Also, probably been commented on already, but whats with the word wrapping – makes it a tad tricky to read.
I visit this site and or come across it all the time, not really feeling the redesign at all and the homepage is not very effective at focusing on the content, the primary purpose of this site which should be the focus. The footer is kind of interesting, haven’t see anything like it.
Couple of other things –
Whatever you are using to break the text (maybe break word etc.) makes it very difficult to read, whole words are getting chopped at random segments, I think this really needs to be changed for readability. The v9 was so nice and easy to read and I loved the break up by color, very effective but now gone.
The comments are laggy on Chrome.
IE9 does not show the gray text to know what to fill in and where in the “leave a comment” boxes.
I would agree with the tablet comment, a good percentage of valuable page real-estate is wasted in the tablet version. The content becomes secondary.
Thanks, no one can say you aren’t experimenting regularly. Keep up the great tips etc. and here’s hoping to a rethinking of your redesign.
PS – How did you do the layered page effect on the body/main content just before the footer? Pretty cool and useful.
I love the previous design so much more :/ this one looks kinda “dry” and not fun to browse through, the last one was more like you Chris and more like css-tricks, I miss the frog, the colors and everything about it..
one more thing, I’m on Firefox, and when I resize the browser to around 700px the navigation just disappears and so does the search box..
I’m feeling kinda blue looking at this design :( I vote for bringing the previous one back!!
I think people need to chill on their criticism of the design. It seems a lot of people have grown attached to CSS-Tricks almost as a religious experience or something.
The design is great. And I’m not just saying that to be nice. There’s no reason for a site like this to be overly colorful and full of … well, CSS tricks. :) Really. I think as Chris starts to push out new blog posts, people will get used to it and realize it’s effective for what it’s trying to accomplish. Also, I think some people are reacting to what seems to be a typography glitch on some versions FF, although I don’t see that myself.
The *only* big criticism I have (which others have mentioned) is the main nav. Those shadows on the inner part of the tabs just don’t look right. The shadows are too big, IMO. Currently, the box-shadow for that is set to:
box-shadow: 8px 0 25px 2px rgba(0, 0, 0, 0.3);I think this would improve it:
box-shadow: 1px 0 20px 2px rgba(0, 0, 0, 0.3)Here’s a screenshot:
http://twitpic.com/arqy5n/full
Of course, I did no research into this, and had no involvement in the process, so I’m going on pure aesthetics here. So, move along, nothing to see here. Just my one and a half cents. :)
That’s what I thought. Some people need to get used to the design, since it’s a complete overhaul.
I don’t think there’s anything religious about it, and saying that people have grown attached to css tricks as a religious experience is kinda patronizing.
There’s just design that is appealing and design that’s not. Simple as that. This design, IMO, falls into the latter category.
And I’m sorry but your “improvement” on the navigation shadows is not better, it kinda makes the navigation items look flat, which is something I think Chris didn’t want to achieve in the first place.
Like others, I very much preferred the previous design. I’m looking forward to checking out the 150 videos outlining the process, though…perhaps it will change my opinion.
But, as it stands now, the whole site feels very cold, disjointed, and very much unfinished. The logo is awkward, the TeamTreeHouse ads are easily confused as navigation links or sections of *this* site, the home page looks like a bunch of “modules”…too much going on and not enough separation, the colors…not my thing I guess, the form input fields have top and left borders that don’t really make sense…looks broken, and I’ve never been a fan of these type of gradient navigation tabs (they look very tacky). You’ve used the background and a similar tab setup that CodePen uses which is the two things about that otherwise phenomenal site that look, well, tacky.
The page headers, however, are awesome. And really, the inner pages look great…it’s everything that is surrounding them that I don’t get. It looks as if it’s an iframe on top of a really old, broken/unfinished site.
Others have mentioned the cool links in the footer but I’m not seeing it. In Firefox, they’re just links, nothing special. In Chrome the have faint underlines and when hovered over a white line shoots across underneath the link…looks broken to me.
Anyway, looking forward to the vids.
SIDE NOTE: I’m logged in right now to “The Lodge” and the link to edit my profile just redirects back to the login page and the comment preview below shows my name as my email address. So, I guess I’ll logout to leave this comment.
I’m loving the Lodge content. Best money I’ve spent on Kickstarter yet:) Great new design as well. Thanks Chris!
Cool redesign, looks great on iMac, but I’m writing this on my Galaxy Note with Dolphin browser and the menu up at the top looks rather horrible. I cannot even select a menu item (there are 4) and the nice mobile menu someone commented on above is not showing for me either way (horizontal or vertical mode). You might want to look into that…
Not much good redesign.
a). The line breaking of paragraph is bad on FF. ex: ‘The content’ text is showing here like ‘The co’ and the next line is starts with ‘ntent’ .
b). Text boxes seems to uncompleted border.
c). Is the menu bar seem dull gray color?
But very good ux
So, I took some time to go on and there on the site, looking at almost every section more or less closely in order to have a more precise idea on this whole redesign thing.
The header looks pretty poor in my opinion. This orange square on the top left corner is a bit flat, and the menu is too simple I guess (ironically, the shadow on the nav links is a bit rough). It misses the eternal * logo on the top part of the site. The v9 header was awesome, this one looks kind of cheap in comparison.
The footer is awesome, really. This centered pictured is absolutely great, and the hover effect on links is amazing. The bottom part of the footer with links to CodePen and ShopTalk is very sweet as well : dark and discret. Really nice work on the footer.
The main page is quiet good, but the blog posts are not attractive enough. Or maybe the Hot links blocks are too disturbing, I don’t know. Swapping colors (orange and red) could do the trick, it could worth a try.
Bad thing in my opinion : no more comments counter / link to comments on blog post blocks. I liked the comments counter on the previous design to :
– know if there is a new comment
– directly go to comments section
Speaking of comments, I think they look way better now. They are clean and nice, I like it very much this way.
The forum looks particularly good on v10. The old version was kind of messy. But now this is great, with the exception of a few minor bugs (which will probably be fixed in a few days).
The snippets page is very beautiful, so colorful. The v9 design for the snippets was a total mess. We can now find everything we want, it’s clean and well ordered.
The gallery is like super heavy. It takes almost 2 or 3 seconds to load some content. At least, it looks great ! I think it’s just a matter of performance, so I’m sure you will figure out how to deal with it.
Videos are pretty much the same as in v9, so not much to say about it. There is a little order bug in page 4 (Delta), but no big deal.
Same for Demos, it’s quite the same. It looks really well ordered, so I guess it’s very nice this way. I have never been much in this section of the site anyway.
The new design for the almaniac is really funny and innovative, I like it. But what the hell is this font for the letters ? It looks really odd in this retro design to see a handwritten font.
About the “3D effect”, I don’t know what to think. It looks retro, and it does it well, so I guess it is good. But in comparison to the old design, it looks a bit elementary, especially on buttons.
Plus, I don’t think it goes very well with the footer which is pretty awesome (texture, realistic shadows, slight gradients, etc.). However I think it relies on small details, so maybe a few lines of CSS could probably fix/improve the whole 3D thing.
In conclusion, I’d say there are good and bad things in all this stuff. The redesign is clean, for sure (no ugly gaps, beautiful images, nice color chart, etc.), but some things do not fit well in it.
Anyway, we find everything we want, the nav is clear and intuitive, so I guess this is the most important thing. As far as I can tell, I don’t come here for the design but for the blog posts / snippets / screencasts, and I think it’s the same for 95% of the folks out there.
So please, to all of you who can’t stand the new design, give it some time, it will probably get better, and if not, whatever, we can get used of everything. ;)
By the way, congratulations on the whole design process Chris, we will help you making it better. :)
Looks like there is a little bug with name / email on comments. It happens to display the email instead of the name, without any link to the provided website URL.
Odd.
Nailed it, Hugo. Also, the typography still needs a fair whack of work. But I have confidence that it will improve with time. This is a huge load of work, and Chris can’t get it all done straight away! I’m pleased that he shipped, even though there are some people being very negative about it.
Interesting fact: I had to scroll back up the page to reply to your comment (maybe that could get fixed)!
I’m still undecided on the header illustrations. Every single one of them looks awesome, but I’m not sure how they tie in with everything else. It’s too early to make a decision, as with anything, I’m sure they will grow on me with time :)
“Level Based Learning”
Seems like this module should be a top-level priority instead of 1/2 way down the page buried next to ads…
I agree… once more time can be spent making browsing those areas more compelling. Right now it’s just a list of articles in random-ish order. While a little useful, it’s not something I want to promote heavily yet.
i think someone mentioned this already but i;ll say it again… the icon fonts not working in FF (i’m still on 14). navigation links looking very odd…
sorry, one more thing, the links in the footer are super bland in FF. just checked it out now in chrome and they are very cool…
other than that… i’m sure there’s lots to learn about the process, but i’m not so fond of this design…
Criticism comes easier than craftsmanship…Gerry
Dope site! Some people will love it, some people will hate it, but in the end everyone is learning something. Thanks Chris.
congrats on your redesign. I am wondering what were your initial goals, except for making it a full time job? I am very happy to see the new design, now will go browsing around if you dont mind.
I find the retro look very interesting. The font you’re using, though, reminds me a bit too much about what Notepad looks like on a wine installation.
Are there supposed to be random letters/numbers as icons for the menu? I don’t object to them, but if there is not, it’s broken on Chrome/Ubuntu 10.04.
Also, it appears that the menu just… doesn’t work when the window is smaller, IE when it turns into the Navigation ‘n’ Search.
…and since I think I might’ve buried the positive bits (which wasn’t my intention), I like the look =)
I prefer the v9 style, it was more original, i find this a bit messy
and i loved the frog D:
Good job, dawg. Looking at it fullscreen on an imac and its like pshoooooooooo
Dang. Chris, where’s the frog? Gotta say, I prefer v9. Sorry.
That looks great. I kinda like page’s behavior when zooming. As someone already said it’s readable and clean, btw pretty much more than the v9. So i prefer this version. Good design is less design.
Love the illustrations and the 3-d buttons and pretty much everything else because your attention to the details is so great.
I might have to agree with the comment about the bathroom napkins (link color) you cant argue with truth. Not necessarily a bad color choice until you read that comment.
One problem I noticed:
I was a little confused with the strange letters and numbers showing up next to the navigation menu items and elsewhere, but then when I looked at the forums page the correct icons were being displayed – BUT only to me on that page!! Using FF 15 win 7
Love the footer and the form, it fits with the design.
Buuuut I’m not so sure about the overall feel of the site. I think others have pointed out the flaws better than I could so I won’t waste anyones time putting more critisism here. Just wanted to compliment on the footer.
The little X for closing panes needs some love. It is to small for my thumb.
I think the new site as a whole feels more like a complete resource, not just a blog. The illustrations are great, and I’m looking forward to making my way through the lodge screencasts. Change is tough on people, but the new design is good.
Great Design@chris. But I love the old theme
Hi Chris! I must say that I’m not really impressed with this new design. For me, the previous one was better. But it’s still cool!
I just want to tell you that I don’t really like that top left orange rectangle, it’s weird.. And I’m having the same issue, that some people have already reported, with the icon font with Firefox 15 pt-pt.
I’m looking forward for the new content and tutorials!
I haven’t decided yet. The first look did not impress me. V9 was awesome. This looks like some highschool project?
I know for sure that the videos will be awesome.
I’ll stick around and maybe it will grow on me.
Looks better than any HS project I ever saw….
The new design has some very interesting points. Something to consider, at the very least. :)
Unfortunately, the menu is broken in Opera Mobile, which I happen to love dearly. :) On 480×800 the “Navigation ‘N’ Search” button does not appear, and menu items remain partially hidden. You can check it with Opera Mobile Emulator (http://www.opera.com/developer/tools/mobile/).
Oh, sorry. :) Looks like I’ve missed the GitHub part. :)
So how long has this redesign been released to the public so far? About 8 hours? I think it’s safe to say that from a functionality and design standpoint, the version you see before Chris revamps css-tricks again will definitely see some improvements. And those changes are based on the feedback that we can provide him in the days/weeks to come.
I personally think the design won’t win any awards and is not my cup of tea, but I can still find the information I need for the most part, which is what counts, right? The surface has barely, “barely” been scratched here.
That being said, I have found some functionality issues. Aside from posting here, is there a repository where this can be posted?
Edit: Found the Issue Tracker. Will fire off an email tonight.
Hey Chris,
great job!
I wasn’t impressed when I first saw it, but now I’ve been browsing the site (some sections I haven’t visited for ages: I need to watch some of your videos!), checking out the lodge and going over the screen-shots on the Design History-page. I have to say: I like it!
I did really like v9.2, but this is something completely different and I’m enjoying using it. I like the header illustrations and the typography.
Can’t wait to get into all of the Lodge videos, though I wonder where I’m supposed to find the time …
Anyway: Thank you very much and keep up the good work!
Is nice and beautiful!!!
Will I be able to download videos after I subscribe? I’m going on a vacation to a place without internet connection, so I would like to bring those screencasts with me…
Hate to sound like a douchebagel but… it’s a butterface site!
LOVE CSS-Tricks as a resource, but it’s just kinda ugly man.
I can see designers (whom would have some time on their hands) designing a v10b for you already… The horizontal gradients in the main-nav, the upper-left orange box, and the surrounding dark background (makes the page feel semi-claustrophobic) — these and other styles and treatments make for a funky combination.
I’ll be back though b/c resource wise, CSST is it.
I would look at redoing the text boxes, they don’t work well at all. Other then that I like most parts of the site. The fonts are nice and overall its a solid design.
Thanks for this new Design Chris. I enjoy and appreciate your progressive approach to the Web.
Some feedback from a desktop user:
The treehouse ad feels a bit too competitive with your main logo – it’s higher contrast, vertically higher, and has an illustration. Maybe it’s intentional, but my eye skips right over to the treehouse ad every time.
It would be nice if after clicking the search box it would focus me on the actual input, just saves me one click.
I know most of the previous designs have had nice bold colors, but I think this design is a little too intense. The jet black sub nav underneath the (beautiful) illustrations is pretty harsh on the eyes when set against white (like on gallery page). I find that it’s a relief on my eyes when I scroll down to the footer. Maybe some more spacing on desktop or less pure white/black combos would solve it.
Anywhoo – certainly an ambitious redesign. This isn’t a design website, it’s a CSS website and I think you’ve showcased some practical and fancy techniques. Just make sure to keep the experience and content as #1. We don’t need to be super impressed with flashy interface elements, let the content speak for itself.
Chris, first of all, I love your site for the plethora of knowledge you provide. You are my go-to source for everything CSS and have taught me so much. I hate to say that this new design is not as appealing as the old one. The previous one was excellent and I referred to it for design inspiration. I feel that this one falls a little flat. I am also not crazy about the different designs per section. I think it’s cool to do that, but not sure it works well here. This site seems more programmer-designed versus designer-designed. The last one was great because it was designed and programmed nicely, which is the ultimate success. I will still be visiting it religiously and look forward to the screen casting.
Interesting choices throughout the redesign. I am just wondering about how you arrived at your choice to sunset support for IE8 and IE7? Did you base this upon your user stats? I imagine a design blog doesn’t receive a whole lot if IE traffic
What happen? Sorry, you taught me lot of things and I’ve learned a lot, then got my job. But for me, the design didn’t get better or maybe the v9 was just so futuristic. However, I like some part of this new look :)
Hmmm, it feels a little … drab. It has potential though, will be interesting to see how it’s refined. ;-)
Really like the new comments though, they make actually reading through the comments very nice. The new ones do a good job of visually defining some space for each comment, which makes them easy to read through.
Some ideas … ;-)
1: .commentlist .children { width : 102.5% }
This pushes the children comments out a little on the right, to match the distance they’re pushed (padded) in from the left. And also makes it so they the same amount of space for text!
2. .commentlist .children li { background: #F8F8F8; }
Give the childen comments an in-between grey value. Again, to help with visual distinction from the parent comment.
Also, not about the changes, but I love how easy it is to mess around with a site in the dev tools these days to figure out values for adjusting things!
Something simple to add, a “back to the top” link would be beneficial for long comments pages such as this.
So much scroll/sliding….
He keeps sending new web standards. In a few months, every trendy sight will be using inset border radiuses and other things Chris incorporated into this design.
Always enjoy a good redesign. Its really different from v9 but still, i enjoy it.
What font are we working with for comment posts?
Awesome job, Chris! I’m actually in the middle of redesigning my own website. I have to hand it to you, stylistically, this is quite the upgrade from v9. I absolutely love how you did the stacked color fades and the cool animations on the footer. Still trying to figure out how you do your search queries via custom search though… :D
Wow nice redesign defiantly prefer it to the previous one. easy to read, simple and of course beautiful. The only thing I dont like is the box-shadow on the main nav bar. I think if you changed it to the code bellow it would look much better.
box-shadow: inset -2px 0 0 #CCC;So many comments.
That said, I really don’t like it, sorry. The old one although a bit busy was a much nicer look.
I will give you props on the comments thread and the mobile version, both look nice with a good amount of spacing. I really like the open menu for the mobile size.
I think the desktop version just has too much gray, the mobile version hides a lot of it so it looks nicer. I also don’t like the header seems like a lot of wasted space.
Gave my two cents, have a nice day.
Also, you seem to have some really weird line breaks in the middle of words, and not valid hyphenations, just line breaks in words, is that an editing issue, or a coding one?
I liked new design. Made perfectly! Great work Chris, your work creates new awesome inspirations.
@chris great job man you have always been an inspiration, i guess it will take time getting use to the new design.
Where is the frog gone?.. Kind of missing the frog :P
The illustrative headers are by far the sweetest part of the new redesign, though the comment preview I’m seeing as I type this comment is pretty sweet too.
My one suggestion is to increase the type size of the body copy. After reading and accepting the ideas found in this article about 16px type, your articles seem to be hard to read.
Hi Chris! Congrats on a great redesign. Looking forward to long hours watching videos in the Lodge :-)
I really like the clean look of the site. It’s hip to be square, especially when everyone else is suffering from the mysterious border-radius epidemic.
A question about the the Snippets-section: On wide screen you use some kind of vertical tab-panel interface, with the snippet-categories on the left and a corresponding list of links in the main area. This transforms into a nice vertical category-list on mobile, with the corresponding list of links beneath the list of categories.
Have you considered transforming the tab-panel into an accordion-widget on mobile? I think this might connect the selected category to the corresponding link-list in a slightly better way. I’ve been thinking about using this approach myself on a project I’m working on, but haven’t found any good examples on this pattern yet.
Once again – great job!
Why didn’t you include the microdata format in redesign, whereas you have done in Shoptalk?
At the end of the day, Chris can’t please everyone with the re-design, everyone has different opinions and tastes, and although I love the re-design it will take me time to adjust to the new user experience.
The thing I don’t like is the negative feedback, some of it is damn-right rude!
Most people don’t like change and that’s probably the main reason everyone is freaking out. Just like when Facebook changed to Timeline, you’ll get used to it and you’ll probably find that you’ll love it.
Give it a chance and well done Chris and everyone involved!
Wow! The new design looks awesome : )
I’ll also be looking forward to all the upcoming screencasts and articles…keep up the great work Chris!
It’s good design, but i love V.
Awesome look, honestly I never really liked any of your previous designs, mostly due to their static widths, but loving the dynamic width going on here.
I’ve been following css-tricks since the early beginning. I’m going to give v10 a bit of time before saying anything although i have to say that colors and typography are definitely not an upgrade. You can’t expect us to belive that this is your best shot Chris. Sorry.
And here’s the $89,698 question. Why didn’t u hire someone to do the design? I mean, i know css-tricks.com it’s a personal blog but we are here because of your great techniques related to the front-end world, not your design skills.
I mean, come on, take a step back and look at the homepage. Want to tell me that’s the best way to introduce new visitors to your library that includes a gazillion of amazing things?
Nah.
Going to have to disagree here.
The aesthetics are subjective, however the actual design of the site is vastly improved. It’s more consistant, has better organization, clearer visual communication and seems to have accomplished the goals Chris set for the content.
This site is about css tricks not how to make the most visually appealing artwork.
I think the new design is ok, it’s good on pages with the banners. I find the homepage a bit boring to look at… but I’m all for change, let’s see where this design goes next.
Personally my favourites are v6 > v7 > v9.2.
I got a bit of a shock when I first opened the site to the new design. My 1st impression was I didn’t like it. Then in a few minutes it actually grew on me haha
There are only 2 things I don’t like and it’s:
1) Everything is too big on 1920×1080. I like the sizing when the resolution is around 1366×768.
2) The input field 3D effect looks cool but only on a white background. Like the member log-in box on the right, but not so much the grey background like this comment box I’m typing in right now. Kind of reminds of the Windows 98 days haha
Other than that good job! :)
Awesome new design Cheers :)
To be honest, I don’t like the new designs at all. The old website looked much more powerful in terms of designs. Like most of the people who has posted here, the header is a bit boring and the whole website could have come out a lot better if you would have asked for people’s reviews at the time of development.
The whole stuff could have been a lot better Chris, certainly not your best shot :(
This design reflects my fear Responsive Design will sterilize web design. It’s “nice” and clean, but sterile and uninspiring.
I have been worried for a while that building fully responsive sites will introduce a level of complexity to the process that will all but force designers to design much simpler sites.
This redesign certainly reinforces that concern.
Regardless, still love what you provide here.
Sorry, I do not see this as a good style; it definitely looks like you took a couple decade-long steps backwards in website design. That navigation bar especially looks just wrong altogether.
Also, this comment-box form with the preview-update is very, very slow even in Chrome. Actually, this entire page with all the comments is scrolling very slow.
Looks a bit old fashioned
Love it! Its clean and professional. Not sure about the people hating on it. Its all about the content & the new design makes the content easier to read.
You’ve inspired me to do some re-designs of my own
luks great chris :) may i ask which theme are you using? is it custom made or is it a theme from theme foundry?
I like the usability and functionality of the site, which is one of the most significant elements of a redesign, as well as the responsive aspect.
However I am sure I speak for others here when I say the elements I feel are missing are the ‘CSS-Tricks’ themselves. The cool little snippets on previous versions such as the frog, funky hover transitions, photo hover effects, etc made browsing the site fun, and left no illusion that this was the site to come to for the latest, cutting-edge CSS techniques. For a new user visiting this site, I just don’t feel they will feel the same as I did when I first discovered your site a few years ago.
However I know as with all sites, they are never finished, and I know it’s still early days so will be interested to see how things pan out.
Congrats on the new site design launch!
I think people are writing this design off too quickly. I look forward to seeing how it ‘morphs and evolves’ over time. I think the basic structure allows for a lot of creative potential going forward. It is like Chris said – it is the web – it is not supposed to be static, so we should not judge it harshly on it’s very first iteration.
Nice work Chris, but this isn’t your very best. IMHO.
Where is your * in your logo? You still use it in some areas but omiting it from your logo?!
Chris, I’ll be here just as often as before and adapt to change! Take out your banjo, swig back a cold one and enjoy the ride!!!
I was a little dissapointed I with the design I have to say but to be fair I’ve only started to scratch the surface.
Things look more consistant and perhaps a little more logical but I think its more the look Im not impressed with. It seems a little too in your face for my tastes. For example, the home page uses orange, red, green, black, purple, turquoise and two different shades of blue for the headings on the page. I can see he has done this to catagorise the different elements on his page but I think it makes things look a little untidy. His old site used to use a light blue for all the headings (I think?). Im personally not a fan of the look he went for with the navigation. Just not quite sure it works.
In all honesty though, the reason I payed kickstarter for access to the video files was to look at how he works things out. How he goes through his process and figures things out. I enjoy it where something doesnt quite go right and you actually see him and hear him trying to figure it out. Stuff like that is pretty valuable to me and he is very good at talking through his thoughts. I prefered the old design, but Im also delighted to have signed up for this because I think there is a wealth of information there which is what I am most interested in, not the look.
I think the design was better in the previous version, I agree that “Design is more than gut feelings about aesthetics” but the feeling here is of something old
I agree with Chris Howard with regards responsive design, I fear it make the web look very drab and boring. I know some will say it’s all about content and it being accessible to all but I fear we may lose some of the beauty of the web…
I’ve only recently signed up to CSS Tricks, I must say I did like the previous version better, there are a few things I like about this site, it’s clean and easy to read etc but it is a little boring and lifeless. The navigation is the thing I like the least, uninspiring and dull. Sorry.
The work you do on here and examples you post are awesome though and I will continue to come back everyday.
The please ‘fill out this field’ bubble gets blocked. I am using the newest version of Chrome.
Pic proof: http://imgur.com/aXWj0
CSS-Tricks is so cool.
There was a man with a drink at the bottom of the page. I used to say “cheers” to him every time I read an article. Where is he?
Its nice. Very nice. Responsive and so on.
But….. i did like the old one more. It was more in the details.
Rare question: can I have/use/get the old design back some how?
I think the branding is a bit lack lustre, the grey a bit flat and the orange looking a bit brown. The tiered panel effect is no doubt a novel bit of CSS, but visually just adds complexity where it isn’t needed.
The main horizontal nav could do with a bit of colour coding to cheer things up a bit, and, as there are a lot of section choices, would serve to help quickly going to the right place by hitting the coloured button of choice rather than having to actually ‘read’ them.
I tihnk too when new articles are published, need to evaluate whether the site design is visually fighting the content – rather then presenting a clear clutter-free platform to absorb it.
Cheers
I
Hey Chris,
I have to say that I liked the old design (v9.2) better. This was kind of a letdown when I saw it. I think the blocky style with the bland navigation is what is really throwing me off.
Regards.
Oh no!
Our beloved frog!
Anyway, I think the functionality, despite the design, is better now…
I’m not sure if I would agree that the look feels old so much as retro. The orange really makes me think of the 70s and the sharp edges just help heighten that sense of throwback. What gets me is the almost-lavender color of the hyperlinks … it just does not seem to match the prevailing color scheme (orange) very well (although on the Video page is makes perfect sense).
And the headers while well-designed tend to give a gimmicky feel to the site. I hate using that word because it is way too loaded but that’s the only way I can describe it. There are elements I truly enjoy… and then there are awkward things like the gigantic search link that just make me go “What was Chris thinking?”
I regret not having jumped in on the Kickstarter as I have a feeling the Lodge may further explain it all and give a greater sense of how XY and Z fell together into this design.
Hey Chris, I’m honestly surprised at how many people are giving you negative feedback on here without any constructive criticism. Even though I may not love or would have done every little thing you did, I personally love the design. You keep building a greater network from which people can learn web foundations. Keep up the good work!
I am really digging the new buttons.
I have been thinking for some time about how to get a little bit of a rigid feeling into my buttons, and the delay you put on these new buttons does it perfectly.
I am really enjoying the new buttons.
I’ve been thinking for some time about how to get a little bit of a rigid feeling into my buttons, and the delay you put on these new ones does it perfectly.
Not adding html5shiv was intentional?, just asking because I was testing some sites with IE Tester and somehow I end up here and noticed the site breaks and I’m guessing is because of html5 heh.
First things first… I love your blog, I think you are a really good teacher and you have a really good understanding of css. But…
Well…You suck at (graphic) design! Not really badly but badly enough to get someone next to you who doesn`t. Up until this version it was allright, because it was ‘just you’. But with a budget of ~$60K and the attention of thousands is just simply embarrassing to come up with something like this.
I`m not sure if this comment gets to you at all but if my oppinion isn`t a big deal just ask some of the designers you have respect for.
Some designs are acquired tastes. Maybe I’ll start liking this once I’ve used it more. As it is, though, I have to say I really preferred the old design. It felt much more modern, playful, and visually engaging. This design – from the boxiness to the Android-ish typeface – feels like the clunky outdated one that the previous design should have replaced.
And that frog was awesome. Come on…you even had to get rid of the frog? :(
I like it. Much less distracting, but where’s the frog? I was inspired by it to create something similar. :(
I like this design. Its clean, fresh, modern and professional, all at the same time. I always thought v9 of the site was trying to be a little over complicated with its graphical appearance. Too many different things going.
The only thing annoying me at the moment is the word breaks all over the place in firefox 15.
Great work Chris.
Site’s New Look is Good. Congrats. Using Stack is good way to show 3D effects. :D
I love the texture of the dark background. It took me a few visits to notice it.
I would like to see a texture like it on the big orange square. I think it needs “something.”
I’m sorry but v9 was a lot better. I would love to see how the site evolves from where it’s at. But currently I can’t even figure out the visual direction. Sorry but it’s an utterly horrible start. It literally looks like something a beginner designer would attempt so c’mon Chris.
Cool man! Nice work, love the size of the gravatar!
Wow, Chris, there is so much (positive) stuff I can say about this new design – from a design point, and as a brand – it’s totally amazing. I can see why people miss the v9 and want it back, but you truly went above and beyond with this design. There is a lot more than what meets the eye, as far as graphics and whatnot.
I love that you worked with with content strategist’s and how you laid out everything. Even the monetization, it’s perfect, it’s not forced in your face like a lot of website’s.
I haven’t found any issues so far, and I’m using the latest Firefox update (15 I would suppose). The problem that I have, when viewing from my mobile phone (android), I cannot navigate because the text and icons are squashed together, and really small. Other than that, It looks spectacular!
I was checking code the code snippets and almanac and when I noticed the scrollbars on some of the code, It broke back memories of when we would style the scrollbars using Javascript, I believe. I instantly did a search for styling scrollbars with CSS and css-trick’s was the first listing, so I clicked through. It would be pretty rad if you styled the scrollbars for the code snippets/blocks to match the orange and grey.
Anyways, good stuff man.
All the best,
Casey.
Personally, I’m not a big fan of the new design, even though there are a ton of little features that I love. I should also note that when I tried reading this post on my iPhone (4, Chrome) it crashed repeatedly.
I’m loving the new look ;)
What did you use design this? Minecraft?
Ha! But nope,
I mostly used CSS and Photoshop and many many years of experience in web design and knowing what works for the content and use of CSS-Tricks.com
I think that v9 offered a better reading experience while v10 is great for calling attention to and integrating other parts of the site. V10 has some great typography, but the blocky layout makes things feel much more cluttered. Also, the site doesn’t seem as smooth as before. The live preview for the comments is very laggy for me.
Actually, the site looks quite clean on my iPad 2. Nice typography overall and quite colorful, therefore refreshing. I agree with some comments, the form fields are quite poor, very hard to look at, I think they need to be simplified.
Some people are far too critical. Design is subjective, no pleasing everyone.
Please, for the love of god add some pagination to the comments or some sort of “show more comments” system. It takes FOREVER to scroll down the page, especially if all I want to do is leave a comment.
Hi,
I noticed pageload is pretty low : do you get the same problem on this websites guys? I don’t think it’s my connection because it’s fast elsewhere.
Chris,
CSS Tricks has been the number 1 site for my education in CSS. Your material is next to none! And, I like listening to you and the guys on Shop Talk.
But, I have to say that is new design is not up to the standards you represent (at least tom me). It’s dull, boring and cheap looking. The modules were great in V9, now they’re all the same dull greyscale. There’s just nothing good I can say about how the new design ‘looks and feels’.
BTW – I’ve checked in out on all modern browsers (including their nightly builds) except for IE10 and none of your fonts are being seen. Using “What Font” to check and all I’m getting is good ole default sans-serif. Should I log a bug on that?
Thanks for CSS Tricks and all it contains…but please take it back to design Number Nine…
EricM
“Number Nine – Number Nine – Number Nine – Number Nine – Number Nine – Number Nine…Take this brother, may it serve you well,,,Number Nine – Number Nine – Number Nine – Number Nine – Number Nine – Number Nine…”
You are all like kids. There is no more v9. Design, design, design – it is hard to design in this responsive time. What is design you all talk about? Few flowers and frogs :D There is no more frog! Maybe will see the dragon.
Fallow the code and design will come.
i hate the new design..
V9 was too perfect to be replaced , however, i like the new navigation and headings.. but the forms are super ugly, reminds me of the forms that are created using tables and with no styling.
There were lots of really bad design problems with v9 of the site. All of which are now addressed in v10. If you’re interested in learning more about what those where and how this new design is (in many ways actually emperically) better, check out The Lodge.
I hate this new version. It makes me sick. v9 was way much better.
Are you just being dramatic? If not, in what way does it make you sick? Do you have an illness or disability that brings about nausea when you see certain things on screens? For instance, epilepsy? I’d be interested to know if there is something in this design that induces actual illness.
Hah, Chris I am suffering from congestion and a sore throat because of v10. Also, I have a rash. Can you recommend an ointment made from CSS?
Joking aside, I like what you’ve done with the place. Nice work. :)
Hi Chris
On a more serious note, I do find the text makes my eyes feel sorer than usual (particularly the smaller font in the comments). For me I think it’s down to the line-height. Increasing it to 1.7 using the inspector seemed easier on the eye. I’m using a MacBook Pro (1440 x 900 screen res).
Otherwise, I’m liking the new design. Buttons and search are lovely touches. Content seems better presented and easier to browse. Not so keen on the orange logo block but I’m sure over time it will evolve (or grow on me!).
Ultra awesome. I love the new site. Really good job Chris!
Hey Tim, I love the breaking bad logo on your websites(which looks better than csstricks at the moment). I found the logo on codepen.io, but never went through the hyperlink to your site. So I am glad that I had to click your name. I will be watching your creativity. Im more of a front-end-performance freak than a css freak at the moment, but it will change next week. Great shit!
Beautiful! I really liked the old design, but this is a worthy successor.
hey chris, happy re-design. and look at the comments. you’re a popular guy. I’d give 9/10 to the prev theme, and 8.0 to this one. (My on themes get 1.0 or 2.0 :D).
I don’t like this new design :( the menu style is awful, and all these faux 3D borders reminds me Frontpage 2000 templates. I think designer want a “flat modern look” but also loves light drop shadows and inner bevels, not a good mix/hard to mix nicely, also colors seems randomly choose. Despite all this I must say design is also a matter of taste and I still love this site!
Yeah me too. V9 was much better than this!
Too much gray all around and a main navigation that looks retro in a bad way. Sorry to say, but I am dissapointed as I expected more or better from you. The background design might be improved but what the actual users are seeing is not.
Hi there. I would like to congratulate you on the new design.. but then I would be lying. For me it is not a matter of nice or ugly. I get a headache of the new design. My head and eyes really have problems with the contrast-less design. The other design was much better for my body.
Might sound crazy.. but it does. Can you put a switch in or can I set a cookie after toggling some color pickers? That would be great.
The whole minimalistic approach which feels poor, instead of the rich layout you had before. If you have been talking to experts in UI design etc.. well then you’ve been robbed :) for real. This is full-out chaos and poorness to the max. Makes me want to eat Aspirin and then go to bed.
Please spice it up a huge bit. I miss the friendly frog too!
Aesthetically, I preferred the previous version. It was a gem. Think it was your best job design wise.
This one, is great, don’t get me wrong, but I guess it’s part of those things when you do something great and expectations are right up there.
I do notice that my cursor, as I type theses lines is incredibly slow.
Chris cant’s you see differences?! in my opinion V9 was great and this is baaaaaaaaaaad!
Dear Chris,
The big orange area around the logo is not that good and on larger screens it looks bad.
Please don’t make it connected to the left edge of the screen
Also your main menu icons would’ve been better (Home link icon is a pause icon!!!??)
and everything is just tooooo big
L7
Is there a chance you could maybe bring the v9 design back, Chris?
Or maybe design a v11 some time very very soon? :)
Nice design, Chris !!!!
But your logo could be better.
Hard to understand whats new
The top navigation is not as fun as it used to be.
Agreed. That was very fun, and the resizing of the frog.
Hi Chris, you have my respect in every way, you have always answered my emails, and thank you for that. I have read most of the comments above, I would love to see a true reflection on the For’s and Against in a graph. Unfortunately, this design is not in my taste. Possibly I was hoping for a bit more of your site. I loved the frog, and I loved your old footer with the ease on your photo with mouse-over. There are a few nice things on the new design such as the search box. I was hoping to see some nice tricks you would do wit your main menu, but this time a tiny bit disappointed. I wish I wasn’t jumping on the band wagon of those that are either extremely sick from viewing the site. However, I will not get herpes or ear infection from visiting the site, but I will need to set my alarm clock when viewing just in case I fall asleep not seeing the nice funky colours of v9.
Take care Chris, and as always I look forward to seeing the site evolve.
PS, any reason you didn’t a different colours to each main menu, each with it’s own icon that could ease in? (this is almost what I was hoping to see)
Regards, C
Like Paul Irish says: “AAAAAWWW YEAAAAHH!!”. I had to perform a “scrolling marathon” to get to the end of the page and leave a comment, haha! Chris, you’ve done a great job with the redesign, it’s wonderful ! Thanks for being one of the biggest/most useful resource on the Interwebs!
Oh, good grief, what have you gone and done?
Yours’ is now the 2nd author’s website who I really admired before they went and completely killed it for me.
But hey, on the bright side, maybe I can catch up with you (design-wise… should be easy) and do something about my not-so-up-to-date website. LOL
I see the new design is so cool and clean ..
and I see a Comment Preview under box comment .. I Wondering how to make it in wp .. can u plz make a tutorials about it 0_0′ ..?
thanks chris ..
I really like the new design. Clean, simple and organised plus it looks great on the iPhone and iPad. Having some issues sometimes with the videos but I’m sure it’ll get fixed. Overall great job Chris!
Hi Chris, I love the new design… as I did with all the others. Since 10 is a ’round number’, why don’t you do a post with a screenshot of all the designs we’ve seen of CSS-Tricks? That would be great, to see how it’s been changing… And sorry if you’ve already done it and I missed it :)
@Miguel – all the previous designs can be found here:
Wow Chris, nice job with the crowdfunding and new design. I didn’t happen to catch the kickstarter gig while it was active, but those were some great offers to your backers.
One of the kickstarter bonus offers was access to previous CSS-Tricks themes, is that available anywhere else? Bear version of the lodge or any other offer?
Site looks great, and I’m just getting started on the screencasts now – enjoying them already!
any reason you have the CSS-Tricks logo not in an h1 (its just an a tag, with a span) and you don’t have the main nav in a ul? Seems less semantic to me, and worse for SEO but you may (probably, definitely) know something I don’t.
I like savin’ my h1’s for article titles and the like. Probably would be good to have it in an h1 on the homepage though, I should get on that =)
I also don’t think navigations need to be in UL’s semantically, just the nav tag does that. I heard once from someone who uses assistive technology that menus that are just a bunch of links are actually easier to use than lists.
Previous design was, honestly, much better in my opinion…
I miss the frog, man! Bring back that SVG frog.
I love your Blog and your old design, but v10 just doesn’t fits my taste. I’m very sorry :( Everything is way to large. This design wants me to push ⌘- instantly.
This redesign is a complete disaster. Anyone who thinks this looks good and does any form of design for a living should quit their day job.
Chris, as you can see the comments are racking up in the against corner. Are you thinking of a complete rebuild as fast as you can? I am sure someone in your calibre can rebuild/redesign ASAP should be a walk in the park? Ray has kind of put the icing on the cake with all the comments. And I tend to agree.
Wow, what a pointlessly hateful comment. There’s a mountain of clever design going on here, with some genuinely inspiring CSS built in.
If the look of the site doesn’t sit well with you, then that’s fine (I’ll admit to preferring v. 9 myself) but change always throws you at first, and there’s no need to so spitefully denigrate the work of someone who has given so much to the web community.
Congrats Chris, I can’t imagine how deflating it must be to read so many of these disappointed comments, but it is a really smart design and I can tell a lot of effort has gone into it.
i don’t like it, sorry about saying that. the last design was perfect.
Completely agree. This design is a setback.
Thi V.10 seems to be less stylized, but I think I have a job for more advanced HTML work and I understand that the evolution of CSS will be the next step … Correct me if I’m wrong. Regards, Mario
Hello,
something is wrong with font ‘Gotham’ in Chrome.
here’s screen: http://imageshack.us/f/525/20120910173003.png
Are you part of H&FJ’s web font beta? Is that how you’re using Gotham in the header and navigation?
Visually a backwards step in my opinion. I also preferred v9.2.
As I look through these comments… I notice that Chris is getting a lot of praise, where he also getting a lot of hate. I believe it’s funny when Chris addresses the hate, but ignores the praise.
Oh well, website looks good brother. “Simplicity is the highest of sophistication.”
*
Kind of a human reaction I think. One troll can ruin anybody’s day even amongst a sea of otherwise nice encounters. Believe me, I love all of you. The fact that people come to this site and care about it is the best thing that’s ever happened to me. I’m also sticking to what I know – this design is better than those that come before it =).
Well said Chris. Sometimes it takes folks a little time to understand advancements, simply because we are creatures of habit and don’t like change. Keep pushing the envelope and paving the way for a better web (and mobile).
I think the design is very well thought through, the content is presented very clearly and usefully, you’ve done a great job solving all the problems there were before. I think pages like the snippets page, along with the way the single posts look are great.
I do however, think the homepage did look nicer before. It was more interesting, just generally more appealing to the eye. Perhaps make the coloured header bits to the blog posts / hot links / etc a little less simple? Use softer colours perhaps, add little icons, or maybe just remove them all together? I also think the three columns need to feel more separated, at the moment they blend into each other too much and it’s a little confusing. I notice in the screenshot at one point you did have actual headers up the top.
Also: Some of the bold fonts are a little “fuzzy” in Chrome. I tend to avoid Google fonts these days for that reason.
Also also: Where’s the frog?! ;)
Sorry, looks like you aren’t using the Google Font API, just totally assumed it because I recognised that fuzziness!
Oh, no… I like minimalism, and clean simple design, but… in this case I must admit that I don’t like this. Old design was better. But newermind, keep quality of your work and I am happy ;)
Wow, multiple validation errors and really poor designing, what happened Chris?
Personally, the new design is growing on me. Minimalist and well thought out. I do think I prefer the last one though. That said i love the navigation bar on narrow/mobile screens.
The only complaint I do have though is that the colour of the dates need a bit more contrast. im finding it very hard to read. Also im having the crashing issue on my ipod 3rd gen, when i try to read the comments. It seems to me like it must be a problem with the page being to tall, because it works fine until I click ‘show more’.
Overall though, good work Chris
Oh, and as said before i miss the SVG frog :(
Frog is dead :D
Just awesome design. I liked the “comment preview” box. An also in whole pages, colors fit great.
Hi Chris and everyone,
I loved the old design AND I love this one. I like where the main navigation and the search sit now as oppose to v9. I feel it is easier to navigate and more noticeable than it was before.
The fields in the new design are a bit harder to use. If I recall in v9 the placeholder faded or moved to the side. That bit of responsive-ness I believe worked better.
I love the simplicity of the site. In my opinion it works better and a great way to categorize your post using classes to color the blog post, hot links, etc
Seriously, without the frog, I thought I was on the wrong site! Good job tho ;)
I absolutely like the navigation buttons and the footer – especially the ‘pulse’ that goes from the links to your pic on hover.
But otherwise the rest of the site, though not ugly, is quite below your standards I think. It kind of feels crowded or noisy. I hope you don’t find us who are not happy to be too rude.
I am ever grateful for the continuous knowledge you impart, especially your DESIGN videos on slicing, etc in PS that you had on Youtube a couple years back. :)
Ummm, I’m pretty sure the frog was a treehouse ad people.
Hey Chris!
Just a brief comment here..
Loving the new design…!
I tweeted you yesterday with what I thought was a bug with the focus on the search form. Re-thinking and re-reading I think that perhaps you found that less nicer. If that’s the case, I’m really sorry…
As always, thanks for so much! :)
I have always liked this website and it has inspired me to do so much more. When i came to this new version i am sorry to say i dont like it. The old one was fun and happy and colourful! This one just looks like a business site. I think that with enough animation and more interaction this could be very cool but right now i am not buying it.
Bring back the frog though and everything will be fine. :)
I love your site’s articles and so I will definitely keep returning for the excellent content you put out. That being said, I can’t stand this new design. The color choices, the layout, the styling, pretty much everything but the comment section is just horrendous.
But hey that’s just my opinion. Keep on truckin’. I love everything else you guys do here!
Negatives:
✗ Froggie is gone
✗ Colours are gone or awkward combined
✗ Header is visually confused (title competes with advert)
✗ Home too visually busy for easy scanning
✗ Disorienting mix of svelte (footer ‘zaps’) and kitsch elements (handwriting fonts)
✗ Direction of shading on boxes, buttons and nav is inconsistent
…
Neutral:
– Metro/flat look (not a personal favourite, will be very dated very soon)
Positives:
✓ The footer
✓ Easy to get around the sight
✓ Very responsive design
✓ Readable font sizes!
✓ Uncluttered posts and comments
Overall:
I don’t like it. The problem with the new design is that it’s inconsistent and lacks personality. Keep the positives and inject back in the personality, and you’ll win our hearts.
This website is one I’ve visited frequently in the past to learn more about css and html. I still visit it.
I can say that comments or some other aspect used to take a long time to fully load. Sometimes I’d visit a CSS-Tricks page and the page would be still loading five minutes later. This problem has vanished. Keeping an open mind, I applaud this.
This page is also very readable and accessible at minimum widths, such as for mobile phones.
Regrettably, the price for all this is CSS-Tricks’ soul. When this page is viewed at desktop sizes, the website feels as though as it’s been built by a robot. The only place with some life, is the bottom most area of this page, specifically with the orange asterisk and the textured footer with Codepen/Shoptalk.
Additionally, the font sizes’ automatic resizing is painful. When I maximize this webpage, everything feels overly huge. I understand 16px font size is viable, even encouraged by some, but this complaint also includes the “everything” about the resizing. The entire inflating scheme contributes to the unpleasant sensation, particularly since I was initially reading this page at 13px font size.
It is my hope that your focus was on the technical aspects and, going forward, are now able to add the necessary touches to polish and humanize this design. Failing that, to at least take this criticism and others’ criticisms into consideration for next year’s redesign.
There’s no human soul in this current design, giving the impression that you allowed an entirely different and more talented individual to design the previous version of this webpage. Unfortunately, we all know it’s the same person as the one who made the current design.
What happened?
Chris, I smell a new Facebook group coming up “Save CSS Tricks Frog Group”
I thought I had the URL wrong, so I googled and came back here again. Then I thought maybe the css or something else was breaking the site.
anyhow just want to say i loved v9 but this one does not look right. specially on bigger screens.
I thought the same, I could not believe this is css tricks :( I googled it.
Hey Chris,
Awesome job. I like this concept of design. Simple and rectangular.
I have a favor to ask, can you put up the tutorial for making these 3D Buttons?
Thanks
I put the code on codepen.io for you Ali:
Thanks dear Paul.
I appreciate it with all my heart.
Hi Chris,
awesome work here !
Your site is a treasure, thank you for sharing this knowledge with us.
Although I’m not a big fan of the brownish color (yeah, I had to rant, sorry) I sincerely love the global re-thinking.
There’s something “cartoony” and geometrical that I really dig.
Cheers from France
Oh, and I haven’t found Froggie yet. (ok, slap me)
I like the new design. I like the cleanliness. I like the intuitiveness of the site, especially the overlaying sections (replies to comments as an example). The 3D effects are nice and kept to the right amount. I totally love the dark grey background of the body and the footer is awesome goodness.
The only (constructive) criticism I would make is that the ‘Whitney’ font used renders rather poorly for Windows users.
All in all I couldn’t live without CSS-Tricks and I thank Chris for his devotion!
Hi,
I am following since version 6.
I backed you up with $25.
Watched all videos here on site.
Now logged in THE LODGE and watching too :)
But I am sad to say that I had to you “StyleBot” on your site :(
Last web in the universe I would expect to do so on.
Shame is this web has only one colour: gray;
Seems dull and not personal thing at all.
Readability suffers in some places because the contrast is just not right.
Hi Chris,
I’ve been following your site for a long time but I think your best design is v9.2… I don’t know. I’m just not feeling the new layout and color scheme on v10, it just seems like a big step back in the design department. No doubt from a technical and usability standpoint, it’s outstanding as ever but your old design seemed to have so much more charm, thought and effort put into every little detail (I miss the frogs..). It just seems very mechanical and soulless, as if a machine designed it.
First saw the new design on my iPhone and thought it looked pretty cool. I wanted to signup for the lodge and then viewed the site on my PC and stopped in my tracks. I’ve been a follower for ages and this is my least favourite design. I hate to say it but its just ugly looking, sorry man.
Personally I think the idea is good, so many sites today try to be overly flashy this shows that a bit of retro with some life pumped into it is more than effective.
However the main font for the header etc is really letting it down. They look horrible with pixelated edges which is disappointing from a css site.
Not really to crazy about the new redesign. On my 24″ widescreen the home page looks cluttered and is hard on the eyes. Its really going to take a lot to get used to it. I will say on the Ipad/Iphone the new design looks stunning. On these devices its just the opposite and its a true joy to read. Not sure what all that means.
Only just looked at the mobile version and agree with you. Brilliant for the mobile, very crisp and clean
Hi Chris, i waited a while to comment on your new design. and i gotta say at first i wasn’t a fan of v10. but now i’m starting to love it and i’m feeling the modern look of it.
And i have a suggestion. in the comments area, under the avatars, there is empty space which can be dedicated to thumbsUp/thumbsDown system, and i think it’s a good way to let useful comments show themeselves, so the readers can read the highest rated comments.
I keep finding myself coming back here for content as usual and this design bugs me every time I see it. I just didn’t know of a place to leave such feedback but I guess this is it.
This design looks really unprofessional and old. I’m quite surprised that it would take such a turn considering the previous site. Unless someone else made the design decisions previously. This design is definitely a miss.
You did a great job, the design is really well!
Congratulations and best regards
Lennart Sauter