The forums will get converted over sometime this week.
Go ahead and use this thread to report the (surely hundreds) of little mistakes I've made. All criticisms accepted! (Unless it's just "I hate it.", as that's not constructive.)
I am not sure why you are calling the <!--[if gte IE 7]> because it is the same style.css and everything that is not IE6 calls it. Right? But I might be misunderstanding something.
@chriscoyier I think it's awesome! As @ChristopherBurton said, it's much easier to read. I feel like I know exactly what is going on. The colours are very unobtrusive and nice to look at. I especially like the contact area at the bottom! =) Why did you add the angled-striped background image to the HTML element? Just wondering.
I love the new redesign! It's very clean and sophisticated, and makes good use of some advanced css effects (seeing as this is a site about css, it seems appropriate :P)
One complaint I have: I hate it when blogs or news sites use the same title for every page. I usually read through the recent headlines, open up all the articles that I want to read in tabs, and then read them one by one. Having each tab only say "CSS-Tricks" is really annoying, and somewhat impairs the usability of this type of a website. This falls right in line with your current poll—I think the articles pages need to have the title of the article in the <title> tag.
If I may be so critical, I just find it a little "big" on bigger screens. I know scaling is a smart idea and it's really well implemented, but on my screens there's too much white space, my eyes are having to move around too much. It's literally 1280 pixels wide!
I know you probably have a big screen and can see this for yourself, but just thought I'd share a screenie of what I mean....
@Brightonmike, There is plenty of whitespace on my 1920x1200px monitor, but I actually like that. Whitespace is a valuable weapon in a designers arsenal. Sure my eyes have to move a fair bit to see the sidebar but that means I'm not getting distracted when I want to read an article.
There is something strange going on with the "read on" button in opera (11.50/Win to be specific). When I click on it don't let go (mousedown) it changes its height to like 200-300 px and has dotted outline afterwards.
Not being a fan of dotted outline I've also spotted it on links (logo, and sections, but it looks like it only shows on :active - for just a short moment).
One last thing - the abstracts of articles on the main page looks a bit short. I know that it's not only design but content that influence this but it give the impression of images (ads) being more important than text (content).
OK. Enough complaining, apart from this minor things it looks really good.
I really like the new look, I do have to agree that there is something I don't love about those blue buttons. Perhaps even getting rid of the drop shadow on the button would make it look better, I find that drop shadows under darker colors make them appear blurry vs adding depth. I will say that it feels a little monochromatic, I spent 30 second in photoshop and came up with this http://dl.dropbox.com/u/14547755/CSS-Tricks.png Not saying it's the right answer but shows what the design might look like with a little more color. Also the justified links in the snippets create some interesting whitespace in the page. My friend and I though something like this http://cl.ly/9Aeg might ease the contrast between the links and the trapped whitespace while enhancing the look of the rollover. I will say that the green we used might be a little darker than I think is necessary. It's fun going through the site and trying to find all the little touches Chris put into it. Great to see the design looking sexy at iPhone resolution all the way up to 1920x1200. Good job Chris.
I love how when you resize the browser, the layout doesn't just change, but actually slides, or shifts into place. Any chance of a basic tutorial or a screencast on this? Some of the best use of media queries I've seen!
Hmmm, not a big thing, but the transforms at the bottom of the home page: Digwp, Quotes on Design, etc. don't seem to effectively have -webkit-transition applied to them. I can see the CSS property but they aren't animating on Chrome or Safari - Firefox works just fine.
Really love the new design, only suggestions would be perhaps a little more colour into the logo (like sellenrick did above) and I'm not really a fan of the blue buttons either - think it could be the colour of blue used or perhaps the shadows...
Other than that everything is great, really love what you've done with the footer.
Oh, and a tutorial/screen cast on how you did the resizing with transitions etc would be amazing!
@jamy_za They are applied to the pseudo element, which webkit doesn't transition YET. Firefox works. I'm taking a stand and made a real use case where I'm wanting that to happen and it doesn't.
I find it hard to believe that FF has transitions that Webkit doesn't....but perhaps you could let me know which ones aren't working in Chrome that do in FF...I'd love to see what I'm missing.
@chriscoyier oh yes! Is it just me or does it feel like there are a couple of unnecessary webkit CSS problems? The div:hover ~ div{property: value} not working thing really gets to me. Also, I don't really like the box-shadow and border-radius rendering on webkit.
While I can appreciate it, I'm not so keen on this new design. I think the footer is awesome, it looks cool and sleek and slightly googlish (the colours) but I'm not really loving the rest. I know you have a very distinct style sense so I guess I'll let it slip... I must say I was very happy with the previous design (just needed a few gradients)
If I'm gonna make any sort of suggestion, i would be do something maybe more creative with the search, maybe put the button inside the box? i.e. http://i51.tinypic.com/24vtc1h.png
An idea for the next design refresh would be iMovie on the iPad style home screen, like almost 60s blockbuster old movie style... but just a suggestion. :-P
Also, I agree with the others on the logo, that orange one sellenrick posted was cooooool! :-)
Yet again - great design Chris! - I'd love to know how your process is for scheduling time to complete so much - as I understand you work full-time and yet have time do all these tutorials and other "projects".
One of my problems is finding time to complete everything and work on my own portfolio and work a full-time gig. Your Insights would be appreciated.
My only qualm I suppose is that in the "Hot Links" section on the home page, when you hover over a title, the colors are out of order. Green should be in the middle but it's at the end.
Still looks so awesome. I wonder how you find time to design and rebuild the whole thing.
I like it, for sure. But I have some thoughts: - those "footer-boxes" are misdisplaying in FF 3.5, I guess because it doesn't accept the background-clip. So, the image is being displayed a few pixels from the border, which is weird.
- I used to love the old footer-boxes, because of the sliding effect on the background. So I did for the menu, and those boxes on the right, with rounded corners changing sizes. Then, I'd like to suggest that you made the old design available, maybe as a distinct area or a downloadable CSS+HTML. This would be truly great!
I LOVE THIS! Seriously, this is by far the best design of CSS Tricks so far. The last design i wasn't too impressed with at first although I did get used to it. but this one I saw and instantly loved. I especially love the Date info of the posts.
@OniLinkCR Second that! The title completely disappears, the menu drops below its container and the footer decides to get all out of position. Also, the read more buttons cover up the bottom line of each article. The rest degrades well though (other than the date/comment circles obviously).
IE6 I didn't even check, I am thinking about dropping the ball on this one as far as me designing sites. I love Web design, but every time I have to bug out stuff for IE6, it's worse than pulling hairs out of my ass and getting older isn't helping the cause.
As much as I love CSS-Tricks and Chris' design eye normally, I just don't love this design. Now I am not a design master by any stretch of the imagination but here are my issues with it;
NEEDS WORK:
The colour scheme:
I really find the colour scheme just not at all pleasant to my eyes, maybe I just need to get used to it. The main problem I have is with the "grey brushed metal" pattern and the lightish blue font that is over it. It just is a bit hard to read.
Link Hovers:
Seriously, how many different hover effects are used on this site?
Blue into Orange.
Colours into white background with black font.
White font into rainbow font.
Blue font into white font with a rainbow background.
Black font into light grey gradient background.
Dotted underline into solid underline
Snippets rainbow colours backgrounds
Blue font, dotted underline into blue font, solid underline with a blue background
Footer slide-pop in effect.
White font, indents when hovered with a light grey gradient background
I'm all for trying out different ones but I think it is bordering on excessive.
Round Buttons:
Maybe I'm wrong but I really do feel that they just seem out of place with the whole design everything looks flat in comparison, but maybe that is your point it makes them stand out more. Snippets:
I love, love, love the fact that you have snippets on your site but I feel that they should be showcased a bit closer to the "fold" as they are your content and quite popular I imagine. Same goes for your screencasts. Just a suggestion.
LOVE IT!:
Let's end this on a positive note shall we?
I love the fact that the site will change how the elements are presented simply by how big the browser window is. In fact at a certain size the header image turns into text. That is simply astounding to me.
The pop in effect of both your footer links to other sites and your own image on the contact link are just so wonderfully executed it really lets your design personality pop. Pun totally intended.
The clean look of the content and the use of white space.
I love how the header "floats" above the page, it's just a nice look.
So while I may not love your newest design and I'm sure it will no doubt grow on me in time, I feel as though you will appreciate your communities feedback and as a part of that community I have tried my best to mention positives and negatives for your latest design. All the best Chris! :D
I guess you missed a back to top link... it feels a bit tiring to scroll back to the top of the page, specially if the article is lengthy and having many comments.
Should take some getting use to though..
Go ahead and use this thread to report the (surely hundreds) of little mistakes I've made. All criticisms accepted! (Unless it's just "I hate it.", as that's not constructive.)
The animated reordering is pretty slick, I completely forgot media queries obey transition!
Only thing I miss are the slide-in effects on the footer tabs. The picture makes up for it though, unexpectedly jump at me will ya?!
One question I have is why didn't you put a max-width on the wrapper? (not really a criticism, more curiosity).
This is what is in the source:
- I wonder what the logo area would look like if there was no drop shadow to it.
Maybe there's just too much of it?
- I would swap out the search button and add an icon.
Speaking of buttons, I can't say that I'm a fan of them.
- I like the footer area much more than the last version with the multi-color top border.
- Snippets color palette is brilliant, but not the justified links inside.
- The blog area seems much more organized and easier to read.
Can't seem to find if the background is using CSS gradients or image,
however, I didn't look all that hard.
I am not sure why you are calling the <!--[if gte IE 7]> because it is the same style.css and everything that is not IE6 calls it. Right? But I might be misunderstanding something.
And I agree @ChristopherBurton with the button comment.
One complaint I have: I hate it when blogs or news sites use the same title for every page. I usually read through the recent headlines, open up all the articles that I want to read in tabs, and then read them one by one. Having each tab only say "CSS-Tricks" is really annoying, and somewhat impairs the usability of this type of a website. This falls right in line with your current poll—I think the articles pages need to have the title of the article in the <title> tag.
If I may be so critical, I just find it a little "big" on bigger screens. I know scaling is a smart idea and it's really well implemented, but on my screens there's too much white space, my eyes are having to move around too much. It's literally 1280 pixels wide!
I know you probably have a big screen and can see this for yourself, but just thought I'd share a screenie of what I mean....
http://i52.tinypic.com/2qa1u28.jpg
Not being a fan of dotted outline I've also spotted it on links (logo, and sections, but it looks like it only shows on :active - for just a short moment).
One last thing - the abstracts of articles on the main page looks a bit short. I know that it's not only design but content that influence this but it give the impression of images (ads) being more important than text (content).
OK. Enough complaining, apart from this minor things it looks really good.
I love how when you resize the browser, the layout doesn't just change, but actually slides, or shifts into place. Any chance of a basic tutorial or a screencast on this? Some of the best use of media queries I've seen!
Other than that everything is great, really love what you've done with the footer.
Oh, and a tutorial/screen cast on how you did the resizing with transitions etc would be amazing!
Good work!
I find it hard to believe that FF has transitions that Webkit doesn't....but perhaps you could let me know which ones aren't working in Chrome that do in FF...I'd love to see what I'm missing.
If I'm gonna make any sort of suggestion, i would be do something maybe more creative with the search, maybe put the button inside the box? i.e. http://i51.tinypic.com/24vtc1h.png
An idea for the next design refresh would be iMovie on the iPad style home screen, like almost 60s blockbuster old movie style... but just a suggestion. :-P
Also, I agree with the others on the logo, that orange one sellenrick posted was cooooool! :-)
(and love the pic when you hover over comment!!!)
One of my problems is finding time to complete everything and work on my own portfolio and work a full-time gig. Your Insights would be appreciated.
Keep up the great work Brother!
Still looks so awesome. I wonder how you find time to design and rebuild the whole thing.
Also the comments in the posts seem to overlap a little bit... here's a screenshot, the last name is covered up
- those "footer-boxes" are misdisplaying in FF 3.5, I guess because it doesn't accept the background-clip. So, the image is being displayed a few pixels from the border, which is weird.
- I used to love the old footer-boxes, because of the sliding effect on the background. So I did for the menu, and those boxes on the right, with rounded corners changing sizes. Then, I'd like to suggest that you made the old design available, maybe as a distinct area or a downloadable CSS+HTML. This would be truly great!
Great job!! I bet you already know this but it kind of breaks a bit on IE7..lol
Overall, I dig the structure and the colors. It's vibrant outside, but more content centric inside! Gives a nice feeling of contrast.
NEEDS WORK:
The colour scheme:
I really find the colour scheme just not at all pleasant to my eyes, maybe I just need to get used to it. The main problem I have is with the "grey brushed metal" pattern and the lightish blue font that is over it. It just is a bit hard to read.
Link Hovers:
Seriously, how many different hover effects are used on this site?
I'm all for trying out different ones but I think it is bordering on excessive.
Round Buttons:
Maybe I'm wrong but I really do feel that they just seem out of place with the whole design everything looks flat in comparison, but maybe that is your point it makes them stand out more.
Snippets:
I love, love, love the fact that you have snippets on your site but I feel that they should be showcased a bit closer to the "fold" as they are your content and quite popular I imagine. Same goes for your screencasts. Just a suggestion.
LOVE IT!:
Let's end this on a positive note shall we?
I love the fact that the site will change how the elements are presented simply by how big the browser window is. In fact at a certain size the header image turns into text. That is simply astounding to me.
The pop in effect of both your footer links to other sites and your own image on the contact link are just so wonderfully executed it really lets your design personality pop. Pun totally intended.
The clean look of the content and the use of white space.
I love how the header "floats" above the page, it's just a nice look.
So while I may not love your newest design and I'm sure it will no doubt grow on me in time, I feel as though you will appreciate your communities feedback and as a part of that community I have tried my best to mention positives and negatives for your latest design. All the best Chris! :D
Papa's Got a Brand New Bag
I am with @speltzer on the Buttons. To me they just feel out of place, not as 'classy' as all other elements on site.
Chris, in the article
h3's, why did you use a gradient for the border on the left instead of just usingborder-left?