CSS-Tricks Design (v9)

[mediascape]

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.

Keep up the great work Brother!

[noahgelman]

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.

[Mottie]

Nice work Chris!… LOL are you drunk in that pic at the bottom?

Also the comments in the posts seem to overlap a little bit… here’s a screenshot, the last name is covered up

[tyrons]

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!

[mshort1985]

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.

[gmox]

OMG, love the contact button!

[OniLinkCR]

Hey Chris,

Great job!! I bet you already know this but it kind of breaks a bit on IE7..lol

[joshuanhibbert]

@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).

[OniLinkCR]

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.

[Raven]

I was really surprised when I came on the website, man…..I LOVE your redesigns. I can’t wait to do my first. xD

Overall, I dig the structure and the colors. It’s vibrant outside, but more content centric inside! Gives a nice feeling of contrast.

[speltzer]

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

[ComeInEarth]

I deem you “The Hardest-Working Man in Web Business!”
Papa’s Got a Brand New Bag

[cayoub88]

I really like it Chris…

I am with @speltzer on the Buttons. To me they just feel out of place, not as ‘classy’ as all other elements on site.

[johnsonpr]

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.

[fjorko]

Love it ! Blue/White/Grey, my favourite colours ! :-)

[Author]

Posts