I just pushed out a new main navigation on the site. The reasons were twofold.
One, I needed to add a few new sections to the site. Go check em out! I added a gallery section where I can post screenshots of design stuff that I like. I’ve been using LittleSnapper to capture that stuff forever, so I thought I’d actually post it somewhere online too. There is also an Almanac section that is currently in progress where I hope to provide practical documentation on all CSS properties and selectors. I also moved the Deals section into the main nav. I won’t even link to them here so you can go to the site and try the nav yourself.
Two, I needed to make room for the site’s new primary sponsor: Treehouse. Treehouse is the re-branded Think Vitamin Membership by Carsonified. But this is more than a rebrand, it’s a whole new app. For a monthly fee, you get access to loads of web design and development training videos. Then you put that training to use by completing quizzes on the material. If you pass, you earn the badge. Through your public profile, these badges serve as social proof that you know your stuff. You can also follow learning paths that will take you from start to finish for creating web apps. I’m happy to have Treehouse as a sponsor. I absolutely recommend it.
Keeping it Responsive
It was a fun challenge making the new design fit the responsiveness of the site. Try it yourself to see it work. Here’s screenshots of the four different states:
The Treehouse ad is also responsive and rejiggers itself to fit into the space available, and is visible at all times.
Looks fantastic!
The key is to get the user to navigate too much between the categories and their subs inside the site, this type of menus only apply to informative websites, or blogs that poses many information for many categories.
Looks great! And Treehouse is a really cool platform ;)
Before you even posted this I was already noticing the new navigation and sponsor. I was sitting here for 20 minutes analyzing your CSS queries as I am trying to start using Responsive Web Design myself. I’m very glad to have found your site. Your videos and posts have greatly improved my design skills and knowledge. Keep up the good work Chris!
The new navigation is looking awesome.
Question, your using wordpress for your site… How is your navigation coded in the back end, or are you using custom menus??
I second that question.
³
A tutorial would be great.
Looks great on mobile Safari but Opera mini breaks the header/nav area and the bug-eyed creature is still the green one.
P.S.
That’s mobile Safari and Opera mini on the iPhone. I don’t have an iPad so i can’t check that device.
Awesome! I’m currently working on the very same thing on a project, so it’s nice to see related posts on the web for responsive elements of sites as opposed to just demos of entire sites.
Keep it up – excellent work as always!
David
I see you The future of design
You are a good
Don’t see treehouse ad on iOS, so it must be flash, right? In that case the space it suppose to take is wasted. You probably tell’em about it.
I dunno, yo. This is what I see: http://cl.ly/C7XC
Ohwait, it’s that iframe? http://imgur.com/0z787
Looks great, Chris! :)
Totally digging the new TeamTreeHouse! I unlocked nearly 30 badges in two days and working towards ios development. Great change of course!
Looks really great. And the way you styled the mobile nav just made me redesign a Project of mine :P
BTW cool sponsor.
I’m addicted to shrinking & enlarging my browser now like some sick & twisted freaky saddo. See what you have done to me Chris, I hope you are pleased with yourself!
Seriously though, great job dude!
Am I seeing things? Or does a the yellow frog briefly look terrified as he is replaced by the green frog when scaling the browser passed 1200px…
Lol i love it when the frog turns green.
boa, love it!
The resources need to be responsive as well, not just the code. Your taking up the same bandwidth on most of your pages, when a lot less would suffice.
Come to think about it, there is no reason not to morph the website around mobile usage rather than dumb down the larger site. You can do this easily enough by showing and hiding a few tags based on the viewport, no?
Mobile devices account for a mere 1.7% of all visitors to css-tricks. Does that warrant ‘morphing the site around mobile usage rather than dumbing down the larger site’? I think not… but that’s only my $.02
I paid for a membership on the teamtreehouse site, thanks for the recommendation. I’ve started right from the basics to make sure that I don’t have any holes in my knowledge. To be honest I don’t think the tests are hard enough, it feels like I’m scooting through a little too easily. The challenges are very good though.
Hey Chris! Great addition to the site, love the new navigation bar.
I just checked out your site on the Kindle Touch’s (not Kindle Fire’s) experimental browser. It converts perfectly and looks great for a black and white E-Ink display. Not that many people who come to your site will use that browser, I thought you would like to know.
Love the new navigation, the colors really go well with the neutral theme of the site. :D
Also that frog is perfect. Nice and creepy, staring from behind the corner. :0
New nav is hawt. #responsivewebdesign #winning
@chris… It got broke, I think. CSSTricks broken yes? This isn’t how it’s supposed to look is it? (IE9 – wide monitor – Win 7 – 11-26-2011 7:08p)
Awesome redesign (once again) Chris! Keep the improvements and good content coming!
Looks really good, I think the layout flows well now. Love the animation on the main nav when you refresh the home page. Nice touch.
d.
Very professional!
New design looks fantastic! Simple to find the thing I was looking for and I like that is adjusts to my screen as there is usually problems with large screen resolution that site takes only tiny part of the screen and the rest is unused space.
And first time hear about Treehouse but it sure looks promising.
love it!
Looks Awesome…
I hope you got paid a lot for the Treehouse ad!
I’ve only known your site for less than a week and you already have a re-design,… :}P Your Lynda.com tutorial is a great piece of work, teaching me how to make WordPress sites,… Are we to expect the same from TreeHouse,… ? & where are the free coupons for it,… lol
I think that I never saw a so responsive website.
It’s a fantastic code, well done. How do you handled the old browser support? JavaScript?
Congrats on the sponsor! Have you considered making the almanac community created / wiki based, perhaps where you have final approval before changes go live?
Brilliant.
Hey Chris-
Nice work on the new layout. I find myself turning here more and more for well…Content! Is there ever a replacement for this oft lacking attribute? I believe that you agree with me. ; ) Great job!
I absolutely love this new layout. The extra white space is really nice, and the responsiveness is fantastic. Looks good!
Chris, the new navigation is awesome! I can’t stop resizing my browser-window. And even tough I’m a loyal reader I don’t think I could figure out how you did this without looking at the source code.
Love it Chris!! I asked on Twitter if we get a discount on Treehouse if we come from your site. I might sign up with them. Cheers and looks GREAT!!!
I like the smilling frog :D
One question that made me curious: the responsive navigation above, when the order into two/four piles, how do you split end in the Video menu and Forums/Videos/Gallery with media queries to make the block menu? Did you cut it or just adjust the calculation of the proper width and then let the element of excess flow down by itself?
Oh… I really don’t understand.. T_T
well done man, i freaking love it!
keep up the good work! inspiring stuff!
You actually changed the site mid me navigating lol, threw me off a bit at first, but i immediately checked to see if you implemented any responsive design which to no surprise you in fact had implemented something i felt was rather intuitive.
Looks really cool.
The new navigation is awesome, but don’t you think that the picture of the Articles and Almanac should be interchanged? hahaha.
I’m loving the new nav! Plus bonus points for saying ‘rejiggers’ because it just made me think of the old lady from Futurama… “My kajigger!”
Great example of both navigation and responsive design. Thanks!
Love the iconography, Chris. Keep up the good work.
I really love it (and have been analysing it for the past few days), but like @Hompimpa – I’d love to see a post or some information about how you applied the responsive concepts to the navbar.
I get all the concepts of responsive design, and want to implement it into my projects – however I don’t really know of the best ways to actually implement it (despite using excessive positioning, which I don’t really like doing).
Superb! Lovin it Chris :)
super ! Chris, love the rainbow
SUPER! Mate keep on the asome work!
Great job! But the font selected have some issues rendering in Opera and Chrome in Windows XP see it at: http://i.imgur.com/0P5VT.png
Regards
When I changed Zoom level and saw navigation then got … what is special. Really looks great and professional !!! I like home page navigation flushing also.
Very nice refresh Chris. This is a great example of responsive design.
Whilst for many it’s straightforward to browse the source code and figure it out, like many of the others commenting, I’d like to see a post on your technical approach to this design and your comments on the html/css you’ve used.
I’m keen to know if you had the four widths in mind to start with? If you mocked up how each one would look before coding? Did you think wide to narrow (removing elements) or narrow to wide (adding elements) in your design process?
I love the new navigation, and the new sections are awesome too.
Wow Chris,
Seriously, I haven’t been this impressed with “what’s possible” since the hay days of CSS Zen Garden. It’s always good to look up to someone’s mad skillz. Your work has always been impressive, but these new responsive changes set a new standard, and raise the bar for everyone.
Keep up the great work, and thanks for continuing to share what you’re doing, and learning.
– Josh
I’m not sure I understand the badges on Team Treehouse. I get the concept of earning a badge to signify that you have completed a course, but how are these badges assigned to you, and what vanity benefits do they give you on the TTH website? Do you have a profile with all of the badges you’ve earned that other users can see, or what? It doesn’t clarify on their website (from what I can see).
Nice navigation design. I wonder if, in the face of coding for responsive design, that we are seeing the end of the drop down menu system? Seems many responsive designs leaves out this feature. Anyone have thoughts on this?
I am loving it. Keep up the good work!
I love your new navigation … it’s brilliant !!
I just love how your frog transform when the website is re-sized :D.
Im so sorry to hear about your hacker. The posibility that this person could be the same as with sohtanaka.com etc is not far fetched.
The other thing worth mentioning is that these are all designer related webspace’s..(hmm)
Love the new navigation. Really awesome.
I really like it! and it is very clever indeed specially when I am at work where the screen still de one with 1024×768