The new design has been rolled out. Nothing to shockingly different I hope, just a refresher. It’s kind of hard to say, but I think this is the 5th significant iteration of the design at this point. The lines are fuzzy since the design evolves in between those iterations quite a bit. One of these days I’ll have to do a post showing snaps of all these old Photoshop files of old design ideas. Holy cow there is some awful design work in there.
Motivation
The biggest reason is that I really wanted to do this Snippets idea. I had it all built and ready to go but no good way to integrate it into the old design. I thought it deserved it’s own main tab, so I started there.
The other main target was the sidebar. The old sidebar had a featured ad on top, ten 125×125 ads, and another featured ad below that. 12 ads, and that took up and enormous amount of space. There are still ads, there will probably always be ads, but they have been rejiggered a little bit to still be good for the advertisers but take up less space for the other more content-oriented sidebar stuff.
Search has also moved into the header. That freed up some sidebar room as well and search still retains a prominent spot. There is quite a bit of content on this site now, so the search targeting gets more and more useful every day.
New Stuff
Other than the design itself, there
- Snippets area
- Posts now have “theoretically related posts”. I hope this is useful to folks looking to read more about topics when they are finished with an article. I hear it’s great for pageviews too so what the hey.
- Sidebar has new content, like a Blog Roll of some of my other blogs Digging Into WordPress, Quotes on Design, and Script and Style.
To-Do
- I need to create a better contact, about, and advertising pages and make those easier to find.
- I’d like to work on improving the typography in the articles. Just to liven things up. For example, the little star graphics for these unordered lists really have to go.
- Try out some new-fangled font technologies in production. I might try TypeKit, but I think it might just at that range where the bandwidth would be too high for the reasonably-priced plan.
For Posterity
Old
New
Regular programming will return later this week. Even a screencast I hope. Might be a quicky, but I have a great three-part series coming up!
Looks good, Chris!
Definitely a good refresh on the design and content, I’m impressed with the snippets page.
I’m really digging the header, Chris! I’m not personally so keen on the sidebar but that’s just me.
I’m curios about the 3 part series…
I agree with Paul :) great design, although the Sidebar kind of dominates the page abit much.
I know what you mean, but after a bit, it seems like it fits. I dunno. It’s definitely a thing where you either like it or hate it.
Great job chris!
One thing maybe you should use some webkit animation with the navigation.
Love the new design! The header is my favourite part :)
Definitely an awesome looking site!
I preferred the previous one. The sidebar is somehow heavy. You know, I’m a big fan of your wp-typo theme: no additional content at all! :)
bravo for the new design :-) i really like it much better than the one before i like the way you set its banners the best, good luck Chris!
The refreshed look i feel is better than the older one i like the header although not so keen on the sidebar it looks out of place atleast for me ……i also like the related posts stuff that u put up ……gr8 job Chris
Nice! Well done Chris.
The 3dish perspective of the headings in your sidebar don’t make sense when combined with the different drop shadows on the rest of the site. Choose a light source and stick with it..
If you picture the light source as coming from around the search bar in the header I think the light source pretty much makes sense. Although it’s not as obvious as I could be, I’ll have to work on that.
I think it looks alright, adds dynamic too the sidebar widget headers.
I must agree with Colin. I don’t like that bit.
yeah, when I first looked at the new re-design, I loved the main navigation and stuff but the 3dish sidebar header kinda felt out of place.. This 3D effect looked good in the old design cause of the shadowy effect on the sidebar but over here it just looks a bit out of place :)
Honestly, I think it’s just fine Chris!
Looks like you changed the headings, they fit much better in mu opinion. nice one!
Nice job on the redesign, really like the Snippets section! Will be quite handy!
Love the re-align of the website Chris! Great job as always.
Looks great! :)
I like the new design refresh, but I also agree with colin about the 3d thingy in the sidebar.
Anyway, keep up the good work!
Very nice indeed!
Sidebar doesn’t look really good on Firefox 3.5.2… Box titles (FAQ, Blog Roll, Poll…) are overthe box content…
I was a big fan of the last design (the 3D sidebar influenced my own redesign) but this looks great. Especially the header and navigation appeal to me. I have to agree with other comments that the sidebar looks kinda heavy, but it contrasts nicely with the main content and it doesn’t really bother that muchI think. The 3rd perspective on those titles seems a bit lost now. Maybe they’d work better when darker as well? Now they kinda flow over in the white of the surrounding area.
Also: hover-effect on the sidebarlinks takes away your border-bottom, which makes the links jump up and down. A bit irritating.
Keep up the nice work!
okay, that last point? I’m looking in Safari and you see the ‘Blog Roll’ block jump when doing a mouse-over on the bottom-link of the F.A.Q.
This jumpy stuff should be fixed… that’s one of my worst pet peeves actually!
great job dude……
Looks nice, Chris.
The new header is nice especially the search box, a simple thing that looks really cool. Not sure about the sidebar though it’s a bit imposing on the article. Widen the article area and give it more space to breath – I feel claustrophobic down here!
=))…@claustrophobic…maybe a a gradient would do better? and how about making the wraps go “behind” on both sides?
I agree, the sidebar ads seem to grab more attention than the article. And that’s when I feel justified using an adblocker…
Looks great but is it only me, or is the list links in the sidebar jumping when you’re in a specific post?
Big thumbs up although I’m still not keen on the 3d effect going on in the sidebar. I always loved the reciprocal “pixel” links in the footer/logo – I assume they’re lurking in here somewhere waiting to be discovered? Another big thumbs up for the new Snippets too.
Looks good…
Though used to like the first design. The reading are was much more. In new design i feel it is more focused towards sponsored links.
Great. As always …
I’ve just spent an hour in the snippet area in awe! Well done. Opened to suggestions/submissions? ;)
The redesign is quite nice although there are a couple of things that I find a bit annoying;
Really like the idea of snippets although the JQuery accordion style drop downs are not particularly user friendly in particular once you’ve clicked a snippet and then return back to the snippets page you have to open the snippet option again, I was hoping to click through a whole bunch to get an idea of what they were but in the end got a bit bored after one or two.
The sidebar seems to be a bit overwhelming, it’s size to me just seems a bit too wide, although I realise you need to make money from advertising.
The light ‘off’ state primary nav could do with being a bit darker (bearing in mind colours from an accessibility point of view).
Other than that, not too shabby!
Jep, had that problem too…but you can just open every snippet in a new tab and that isn’t really annoying^^
The new design is great!
I do agree, however, that the sidebar is a bit big, especially compared to the size of the content – it feels a bit squeezed!
The sidebar also feels heavy, especially when the sidebar content ends (like down here by comments). I know last redesign many commented on the large white space and suggested some texture, etc, but maybe the brown is a bit too dark?
Otherwise fabulous job!
Nice spit and polish Chris… and the Snippets gallery is a godsend.
Thank you for making this tremendous resource available.
You just love changing your site don’t you! Looks good, I think this is your best so far.
I can’t say other then.. you did it again !
Overall a good improvement.
However, as I see others have posted aswell while scrolling down, the sidebar is a bit distracting.
I personally like a lot that black is coming in the design. Cool stuff looks best without borders and on a black background.
However, with the sidebar fatter (check screenshots, the new sidebar is wider, no shadow, and more pushed to the left). If the sidebar starts a bit more to the right, and has a spacy breathing shadow it would bring back the attention to the article. My eyes are kinda wanting to go to the left but sucked away to the right by a big wall, (especially after the sidebar-content is done, meaning only an big empty black column.
Also frighting is when browsing the frontpage, the “div.date” with the horizontal line is almost eaten by the sidebar, there used to be some space there. Stretch the article-column, either literal or as a ilusion.
For al the rest (I like the header a LOT ), there are a lot of small improvements. I see you’re minimalisting here and there, looks pretty cool !
—
Thanks again, looking forward to the screencasts series coming up.
PS: I figured out why the sidebar lists items (featured, blogroll etc.) are all moving up 1px on hover.
In the ad on top of the post
Vertical1241314 = false;
ShowAdHereBanner1241314 = true;
RepeatAll1241314 = false;
NoFollowAll1241314 = false;
BannerStyles1241314 = new Array(
"a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;}",
"img{border:0;clear:right;}",
"a img, a:hover, a:hover img {border: 0 !important;)",
"a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}",
"a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
);
document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1241314/1241314.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
There is:
"a img, a:hover, a:hover img {border: 0 !important;)",
That one is deleting also the border-bottom from a:hover inside (for example) “#sidebar ul#sns-roll li a:hover”.
So you might wanna be a bit more specific with the css javascript’ed in for the post-top-ad ;)
ByTheWay, I didn’t realise it’s the same Chris that does Digging into WordPress. Nice site over there !
Regular subscriber speaking :D
—
Grtz,
Tem
LOL, saw the new design (it’s nice @ Chris) played around a bit and saw the jumpy behaviour of the sidebar-list-items…just wanted to do som diggin (saw the border thing too) but you did that very well!
My favourite parts are also the header (nice new tabs with description =D) and I think the comments are organized very well too…just the “Reply” link is sort of…don’t know how to say it =)…I think it should be a bit more button-like (but that’s just me) and it would be nice if it disappears when someone clicked on it…now the comment form has appeared and the reply link is still there…=)
Its cool. Look great …
Could you please change the color of the writing in black? (is better than actual gray)
The new design refresh looks great Chris!
Very nice improvement! My complements.
To bad you didn’t fix the png IE6 problem.
I’m viewing in IE6 now. (don’t ask why) and it’s a shame to see you didn’t fix it (or the fix doesn’t work).
Or it’s a shame that some people still use IE6…that is really annoying to every designer (I even think microsoft designers hate this thing =D)…and the only way to stop those 15-20% of the IE users that still use IE6 is to make the sites look ugly in their crappy IE6, then they maybe change or don’t come back…and since this is a design related site it’s not that important I think…and the time to make everything work in this shitty piece of code could be used in many better ways…but maybe you don’t have a choice and have to use IE6?? (poor guy =D)
I wasn’t home when I was checking the site out. I had no other choice then to use IE6.
I think it’s very important to include a png fix. It doesn’t take that much time if you know how it’s done. Even google offers a solution.
BTW in IE6 the website doesn’t fit also. The sidebar is positioned all the way down near the footer.
In FF it looks great though!
What places do only have IE6?? Ever heared of portable browsers and memory sticks =))
Looks good.
Love the new header. Really love the content of the site in general. Need to politely agree with the sidebar haters. My only problem with it is the pop out headers. Have never really liked those on any template. Again not keeping me from coming here for the awesome content though.
I like that you have been re-aligning the website in small iterations, but this one just feels odd. I think its the ratio of the sidebar to main content aspect. I understand that you have to include the ads, but the sidebar just feels too big and calls too much attention.
Loving the header Chris, you are getting the initial flash of content on your snippets page, which can be sorted. Good job :)
Great Job. I’m a big fan of the new tabs with icons and small descriptive text.
I love it. Some small little things that get though, when you change your search type (ie. from articles to all and vice vera) you get a small 1px shuffle, Also i would agree with some of the comments that the sidebar is a bit strong, but we’ll get used to it, or even lightening it a few shades would help. Overall I love it to bits!
Ahh also forget, can you add a background image with an !important to cover over than horrible default pollbar gradient, or not as good for when you upgrade the plugin, just edit the default image to something that suits this wonderful site.
Very very nice Chris.
You tried again, and pulled it off very well.
Small nitpicks:
* The 404-error page is a little too wide, the sidebar jumps below
* The sidebar on it’s self doesn’t quite fit in with the page. Although the contents and the look are perfect, the top part doesn’t “come out of the header” or attaches itself to the page, it’s just… there.
The old one was laying on top with the shadows, and other sites’ sidebar’s sometimes start apart from the header. The current situation is neither and looks a little strange.
Also, agree with ConCy that the width is a little weird, article to small, sidebar too wide and too far to the left.
—
Gretz, keep up =)
Thanks for everything !
— Tem
Very nice! I love the new design.
A tiny imporvment, (but it’s the tiny thing that matter :D)
The tabs should fade in and out using jQuery to make a slower and smoother effect. That’s be cool and modern.
Great refresh though, I love it :D
The header tabs look really great, I love the graphics.
I liked that you had your twitter post at the bottom of the site. Why was it removed?
If the site was ever slow, that was usually the culprit. Twitter has a lot of outages and slowness still, and it’s just too risky relying on them for a page to load quickly.
The code I was using was supposedly written to handle that, but I don’t think it worked quite right. I might homegrow a solution to put it back in at some point.
Have you ever tried delaying the load of the widget until the container div was in the viewport?
How about using JSON feed jquery from Build your own social home demo? Get it to fade in after the page has loaded. As it is at the bottom of the page, unless you scroll to the bottom of the page straight away you will not see it come in.
I think it looks a millions times better than it did before. I actually thought I was on the wrong website for a second.
Excellent work, I especially like the new links. Sprites by any chance?
There are sprites used all over the place. Probably not as much as I should have, but more than the old design for sure.
The background images for the comment input boxes doesn’t show. The “#comment-writer-info div input” is blocking the images from showing with the “background: white none” property.
I’m digging the header.
Thanks, that should be fixed.
This is tight. I look forward to each update. Love the accent of 3D. Nice. :-)
This might sound weird but I LOVE the new bottom of the sidebar with Abe chillin’ on the footer. It’s like “what’s up little guy?” great stuff.
Abe is always chillin’. It’s his nature.
Every tweak makes you site better. Your site has helped me learn more CSS and think about design differently. I recommend your site to everyone I know that shows an interest in web design. Thank you for all you give back to the web design/developer community.
great work as always.
Good job on the redesign Chris! I hope to use the snippets section quite a lot!
Overall I like it. I am not crazy about the navigation tabs though. They are a bit busy for my tastes. Good work though!
Looking good. Pretty narrow posts, but the header looks good. It does come together nicely.
Looks good Chris.
Just wondering if I was the only one having a problem with Firefox not displaying properly on the side nav? All of the H3s are dropped about 30px below the sidebar-bridge. Played with Firebug and it seems to have something to do with the Italic font-style. Thought you should know.
I dig the new look. Unlike some of the other commenters, I like the sidebar. It brings a nice contrast to the overall design.
Nice approached. I guess this one is definitely better and nicer than the previous one.
keeps getting and better! It seems like you learn a lot with each iteration. Each time the design seems clearer and better organized.
Like the new header as it seems to be better layed out but the menu list items seem a bit too faded with the orange on them. Perhaps a lighter grey instead of the orange coming over them.
On my screen when I click the options under the search bar the text and magnifying glass move slightly which is a bit strange (firefox 3.5).
Sidebar seems just a bit too large to me.
Wow the snipped thing is really the best thing I’ve seen on any blog I’ve been :D
I cant find the words how I like CSS-tricks :D
I will feature you every time I can if my blog goes up :D With your premission off course :D
chris, I think the snippets button looks odd, maybe because the other buttons have an image at one side and this one has images at both sides, how about the or {}at the start of the button???
Also your bullets/list item images, have you had a small orange version of the asterisk you have as a logo been used? but just the asterisk?
I actually did put in the greater & lesser than sign but it not show up
Love it… yesterday in school I was checkin out an article in the old version of the site, then 2 hours later i come back and see this totally awesome redesign…sweet
Well, I like the redesign. Its much better.
I love it!!!!!!!!!!!!!1
Personaly prefered the old one, this side bar is pretty huge, more space for adds and less for content, not so cool.
Great work with the redesign and good to see you put more thought in the usability of the site rather than just the visual appeal and the snippet’s area. :) The related posts and the blog roll of your other blogs are two updates you should have done long back! But better late than never hehe
Real improvement to the header and I actually like the giant sidebar, nice style, something different, the footer is the only questionable part of the redesign, good stuff though all around.
Nice Touch!
Personally I preferred the old design, but this one is nice, nonetheless. :)
Looks Great!
Still a fan of the old one … this one is too crowded…
bug: the form drops down a bit when u click Articles, Forums or Snippets (FF 3.5)
Very nice new design! By the way, it has a horizontal scroller on a 1024×768 screen.
I love the tabs with the hand drawn elements, as well as the footer. Agree with others that the sidebar might be a little distracting/large. Overall, very nice!
Love the new look. I think there’s an issue with the sidebar. I’m using FF 3.5.2 and the first few entries are not clickable. For example, Featured Articles, Core Concepts, etc. you cannot click the top two links.
I like the new design. Esepcially the top navigation
Nice refresh Chris! The top nav is alot nicer.
Just a heads-up:
Screenshot from my laptop: http://i30.tinypic.com/14dq1b8.png
1024×768 resolution – and I’ve got a horizontal scrollbar.
I realize not many in this crowd use IE6, but I have to tell you the site is jacked up bad in IE6. I’m just sayin.
Otherwise great refresh.
Also, just recently I noticed that the videos don’t have controls. You go too fast for me, or my brain is slow. I need those controls. I checked it out in IE6, the other browser on my machine at work, and controls are there. The CSS is off but the controls are there. I guess I just want it all.
smashing stuff greate job on the new design
Thanks for all the feedback folks. I took care of most of the issues presented here today. The weird sidebar headers problem is gone, and in fact that whole approach is changed now with some less strangely-3D headers.
The 1024 problem should be fixed. This will probably be the last design restrained to that width.
Ah, this new header looks very classy and goes with the feel of the site :) *Thumbs Up*
Hey chris ….there is a a jjumpy feeling in the search bar u have the search criteria’s listed out over there…..when i click on all and articles …..the search bar gets jumpy……
i found this in Firefox 3.5 windows
Nice redesign, it’s very colorful and quite well marked up just as the last design. Since the sidebar is so wide…I wonder if it would look better all the way on the right side instead of having that margin on the other side of the sidebar? Sidebar is the only thing that might be a drawback I feel, but how you gauge that is up to you.
It’s ok, Chris, but I kinda liked the whitespace in the old sidebar. It gave it a sense of openness. The new one is a little heavy.
Thanks for the great tips.
Awesome job as usual Chris. It is what I come to expect when I am on your site. Nice work.
I like the old site better.
This design is to busy, orange and brown are two of my least favorite colors, combined with the pink poll buttons is enough to make me want to blow chunks.
The fonts overall, and especially in particular areas, like navigation tabs are way to tiny.
Your designs have always been really sharp, you were bound to drop the ball sooner or later.
Thanks so much for adding the Snippets section. I already found a WordPress snippet that I was looking for today and was not able to find through a quick Google search.
I liked the search field from the old design how it showed through to the background.
Love the new site design. Great Job!
Some 30 seconds of initial observation commentary (take it for what it is):
Design is pretty busy, IMO.
The tagline “curated by Chris Coyier”, your name shouldn’t be in italics, it distracts from “curated by” being italicized.
The Search All Articles Forums Snippets…..Since this is a mutually exclusive choice, seems a better semantic choice would be radio buttons not anchors.
Don’t really care for the pixel fonts, too small and seems dated to me.
The “poll”, the text shouldn’t wrap underneath the radio buttons, text should have a hanging indent, if you know what I mean.
Hey, Chris
What are you using to pass the active tab?
I don’t see anything in the url string, or is it something internal to WordPress?
It’s using PHP to ID the with the current virtual directory from the URL.
And then by CSS targetting that particular menu-item.
Check also here: https://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/
Specificly the third heading down (“But then how do we apply the “active” class to the current navigation list element?”)
I should note though that since a few versions now in WordPress, when using the wp-function “wp_list_pages” to create the menu dynamicly (rather then hard-coding the menu in header.php), then wordpress will apply a class like “current-page” to the menu-item.
So, if you’re dynamcly listing your menu then simply use wordpress’s auto applied class.
And if hard-coded or not WordPress at all then the Body-ID trick would work pretty good.
Sidebar is heavy.
But I don’t know if it could improve your click rate.
Wow that new design looks nice.
i like new design header
what a great job dud.
Ughh.. no comment
Really you did a good job, thanks for sharing.
The old design is definitely better, your site still looks great though I just think these hand drawn effects are getting too popular to be cool anymore.
You do an awesome job though mate, keep up the good work, I love your style of video tuts really informal but very informative.
I personally like the old design better, but I understand why you had to change it. The Snippets section is a great idea, by the way!
In my opinion, the sidebar is a little too big. =/
I REALLY loved the old sidebar’s design. I wish you would have kept it the same.
But anyway, keep up the good work, Chris!
Very nice. Congrats!
yeah i agree… i’m totally digging the header! pretty schweeet sir!
I see you tried to fix the IE6 png issue.
It doesn’t work entirely. In the menu only the articles button is displayed correctly. The other buttons still have transparency issues. Everything else is ok.
BUTT!! The menu is unclickable now.
I hope you can fix it, because I can’t browse the site :(
Nice re-design. I wasn’t really feeling the last version (loved the version before that).
The only thing I’m not too fond of is the advertising.. it’s coming on a little strong. Now you have two top banners, the little ones, and the HUGE one in the poll area. A little bit much IMO..
excellent work man.
Yeah! This is a really nice change!
I always like the use of hand drawn stuff. Adds a bit of personality to your site.
I don’t know Chris, I kind of like the stars next to your unordered lists…
Hi Cris
I found one irregularity with the markup i suppose. It’s your favorite one pixel shift up at the search . When you click on searching forums it kind of shifts. Tested with opera safari and firefox.
Cheers, Dim
Nice, excellent work.
Love the new design… great look and feel! And thank you for all your great advice and resources!!!
Looks great Chris! I still like your v3 footer the most… but your shirt DOES have a loader on it (pretty cool!).
I like how you’ve been playing around moving and redoing the little graphics (things like are my sites up?). I think you have a really solid overall layout – with a great usability factor.
Thanks for all the great resources. Rock on!
You can put a new image of your self. People are changing too.
– How are you?
– Fine, redesigned by the time, you? :)
– Me too, me too….
Well done Chris. I love the new snippets area especially, it’s the reason I’ve been coming back almost every day. You’ve got such an incredible resource here that I don’t even trust other sources now. Way to make me dependent on you!!
Very good Job done on this design, just a few things i didn’t like that much.
But the Thing you had done on the comments is impressive.
Good Job.
looks really good! I like it.
Good Job. Way easier to read and surf the page althoug it was easy befor.
Two things:
I really like how you have the option to save code as a Textmate snippet or add to Coda. Is that a plugin you found or something custom?
I also really really like the way the comment author info fields act. I like how the text goes grey when you click in them, and then disappears when you start typing. Is this jquery at work? I’ve always wanted to have some default text in an input field that was grey, but then turned black the user actually started typing something, but this takes it to a whole new level.
The coda/textmate thing is going to be published tomorrow, stay tuned =)
The comment fields was something I tried to custom write, and then Doug Neiner came out with a really nice way to do it that I ended up using instead:
http://fuelyourcoding.com/in-field-labels/
Awesome! The new css-tricks design is really looking great. Thanks from Madison, haha.
I just noticed that if you resize the browser window horizontally that the brownish “sandy” background image moves. This obviously isn’t a huge deal, but you can avoid that by setting that background image to align to the center instead of the left.
Indeed, thanks.
love the new design. I want to ask one simple thing how did you change the color of the highlighted region from Blue(default) to Orange. The color that comes when we drag and select.