CSS-Tricks Design (v9)

[Brightonmike]

Aesthetically, I love it.

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

[chrisburton]

@Brightonmike – I think under the articles is fine, both sidebars could be wider though.

[joshuanhibbert]

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

[jitendrac]

I just visited site after a long time and i like it!!!!!!!!!!!

[litek]

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.

[sellenrick]

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 1920×1200. Good job Chris.

[Rob MacKay]

hehe looks great :)

[tdevine33]

Looks awesome, Good Work 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!

[jamygolden]

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.

[Ash149]

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!

Good work!

[Chris Coyier]

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

[noahgelman]

I think it looks amazing.

[jamygolden]

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

[furrball1383]

I like the design although I liked how bright the previous design was colour wise. I love the pop up body !!

[alexbass]

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! :-)

(and love the pic when you hover over comment!!!)

[Author]

Posts