Fall '06 Redesign

The redesign is pretty much done now. I think this will be my last for awhile although I had fun with this. Similar to the May Reboot, I tool a slow-and-steady approach never spending more than an hour at a time on the site. I tweaked and I tinkered. I added, I took away.

It won't make the rounds at the CSS galleries but many of those sites are too focused on the eye candy. How much does it pop when you first load the page? Gradients and glossy galore might get you in but use a site day in and day out (as I do with my own site) and you begin to discover some weak spots (as I certainly did with mine).

In the end, I'm pleased with how it turned out.

It's about the content

I've had the same 400px wide content column for about two years now. However, with some of the code examples, it was sometimes difficult to fit things in. I bumped up the column to 500px ("25% more!!") to help ease the cramping. I also added more whitespace around it.

I also found that small articles looked completely overwhelmed by everything else on the page. With the sidebar now gone (it's a fat footer!), even small articles seem to feel okay.

Grid Design

It's a three column grid. Each column is 230px wide with 40px of padding between them. (The main content column is just 230 + 230 + 40 = 500.) The last couple design projects I've gone with a 3 or 4 column grid as the framework for the design and it works well.

Lose the gimmicks

Yeah, the contrast widget, the column collapser, and the dockable comments were kinda cool but having things work consistently across all browsers was just a pain. I didn't have the inclination to do those last minute tweaks. I even dropped the sIFR headlines to keep things quick and responsive. Some people complained about them last time due to lack of the Flash plugin or because they used Flash blockers.

Maintaining the Brand

To keep things consistent, I kept the Fixed Comments box. IE6 users don't get the pleasure but IE7 is out now so I don't feel so bad. IE7 handled the new layout smashingly. I didn't have to do anything for it except use my zoom:1 hack here and there (for forcing hasLayout and containing floats).

And of course, the gray and green are still here. The gray is lighter than it was last time. In fact, I believe it's back to the same gray it was before last.

Next?

There are some things I still want to add. Tweaks are inevitable. That's what makes it fun.

Published October 27, 2006
Categorized as Design
Short URL: https://snook.ca/s/708

Conversation

40 Comments · RSS feed
Elliot S wan said on October 27, 2006

Awesome redesign. :)

Love the Related and Recent columns at the end of posts, and the footer is pretty sweet as well.

Nate Abele said on October 27, 2006

Hey man, the new design is great. You make it look so easy!

Nate K said on October 27, 2006

Jonathan, I LOVE the look of the new site. For so many reasons (many of which you mentioned in your post). I am glad you didn't go the 'glimmer' route, to get exposure on CSS (the never-ending same as the last site) galleries. Your content is what keeps me checking back.

On your previous site, I probably couldn't tell you some of the 'extra features' because I never used them or tinkered. I came here, provoked by the RSS, and then read your article in context (and commenting where necessary).

Your new site is simple. It achieves its purpose and does it with great simplicity. I'll keep coming back, not entirely because of your nice look - but because of your content and your easy to use interface.

John Labriola said on October 27, 2006

I usually lurk here, but I had to come out and say, I liked the old design a lot. But the beautiful simplicity of this was is to be admired.

Isn't it the job of a good designer to tweak to perfect ;-)

One suggestion, some padding could be used here in the comment box. Some letters are hard to read when against the border. Just a suggestion...

Anyway great work.

Dale Cruse said on October 27, 2006

You know, I think it's often harder to pull off something that's simple than something busy and overblown. Well done.

Marko Mihelcic said on October 27, 2006

I like it ,very simple and those detailes are just great (like the green robbon,9rules logo...)!
Good work m8!

Randy said on October 27, 2006

I dig it. Clean. Lite. Simple. Good work. It's a great example of iterative reduction. Keep subtracting off features and fills that don't add huge value. Well Done.

Jesse C. said on October 27, 2006

I'm diggin' the ribbon. This design works great, Jonathan. I have been trying to redesign both my corporate and personal site and having no success whatsoever. It is very tough to be your own client.

You have done it admirably...

Volkher Hofmann said on October 27, 2006

Very, very nice.

A pleasure to read and look at, plus smooth functionality.

Yeah, a definite improvement, and that's what it's all about.

Volkher Hofmann said on October 27, 2006

One quick note. I think the comment preview function is a bit confusing for oldtimers. For a second, I thought that I had already posted part of what I was writing (that has happened to me before, you know, accidentally hitting return or a mouse button).

Joe said on October 27, 2006

wow, great redesign! i'm tempted to steal some bits here and there for my own blog ;)

Miha Hribar said on October 27, 2006

Am I the only one afraid of the form that keeps following me around? :))

Great work as usual Jonathan. Btw, there seems to be an odd color of the font on the about page (on ff 1.5.0.7). Just in case you haven't noticed it...

Jonathan Snook said on October 27, 2006

Miha: Thanks for pointing that out. I've fixed up the about page. :)

Anton said on October 27, 2006

You're a very wise man, Mr. Snook!
Excellent job - there's much I can learn from you.

Dylan said on October 27, 2006

Very nice and minimal. One thing I would lose is the Dreamhost banner in the footer, which kind of takes away from the minimalist look. Also any non single post page looks a little bare in the secondary column since there isn't a comment box there.

Carlos Bernal said on October 27, 2006

Great design, didn't follow any trends, used a 'banner' type theme with superior organization, colors and your already top notch content....you scored a 10 out of a 10!

twe4ked said on October 27, 2006

I agree with dylan about the dreamhost banner maybe turn it grey and have the blue image as a rollover. or turn the blue green to match the site. bloody awsome design tho!! A+++

release your old theme!!!

Alexander Berglund said on October 27, 2006

It looks really brilliant, where do you get your inspiration? Would love to see a post about some of the sources.

Keep up the great work!

Ps. One thing I have noted is that - Sometimes, I don't don't know where it happens, it just flips over - your site kicks in on the previous dark (latest version) and in order to get back to the white; I have to find the style-cookie and kill it. Any idea why?

Jonathan Snook said on October 27, 2006

Anton: And there's much I can learn from you, too! I need more screencasts! :)

Dylan: Indeed the second column does end up looking a look empty if nothing is there. The question is, what do I replace it with? On the about page, I'm sure I could structure the content to accommodate but article pages where comments have been closed are a little more problematic. Since it does happen on just a few screens, I'll live with it until I can come up with something creative.

Dylan/twe4ked: The Dreamhost banner is in the footer so its impact is minimal. Plus, I like that it has a little more prominence. At least for the time being. There is some adjustments I still want to make to the footer which should mean the DH banner will stand out less.

twe4ked: I'm not sure if it makes sense to release it as it was really just a 3 column layout. Many of the elements were so specific to my site that I can't see it being all that practical for anybody else.

Alexander: I did hear the odd report of styles reverting back and forth at one point but now I don't even check the cookie so it should never happen. Has it happened in the past couple days?

Phu said on October 27, 2006

As always, a lovely design (and more friendlier on the eyes this time around;).

It's good to see the continuation of the green colour scheme as well as your trademark comments form. I also really like the links section just before the comment area.

Nice work:)

Matt Puchlerz said on October 28, 2006

I'm a frequent reader of the blog, and I do really like the redesign. I appreciate the fact that you didn't just make "green banners" but went ahead and put the wavy lines into them too. A+.

The only thing I've noticed is that your "ext.gif" should probably be transparent. If you look at the div#linkitup below, you can start to see the background of the gif as it goes further down into the darker part of the gradient.

I'm really nitpicking here, but hey. Overall, awesome!

Preston So said on October 28, 2006

I agree with you completely when you say that being featured on a CSS showcase is not at all what Web design is about. These days, a CSS gallery is definitely not where the talent is. Wonderful job!

Jonathan Nicol said on October 28, 2006

The layout is gorgeous! I am jealous ;)

I agree you're better off to steer away from the eye candy and bells and whistles. I would far rather pay repeat visits to a subtle, beautiful and functional site.

The DH banner doesn't bother me (I always like to see DH getting props), but since it's under discussion, it might integrate better if it were greyscale, and blue on rollover.

Jonathan Snook said on October 28, 2006


Volkher
: I've just tweaked it to include the more prominent Preview message. I had planned to add it even before you mentioned it but it was further down on the to-do list. :)

Matt: Very keen eye on the ext.gif! I've added the transparency so that it shouldn't be an issue.

Jonathan Snook said on October 28, 2006

Oh, and I should mention that I just made some backend tweaks, mostly to the comments handling to prevent malicious code and improved the spam detection.

The spam detection has been working really well but there were many hitting moderation that I'd prefer to just junk. It's nice to have the flexibility to recognize a pattern and just add it to my spam component before it becomes a huge problem.

Cole Mickens said on October 28, 2006

Despite its amazing look, I can't help but miss some sort of 'search' functionality. Also the (c) Jonathan Snook and the RSS Feed button look at bit out of place at the bottom

Steve Tucker said on October 29, 2006

Really clean and crisp design. The green separators leaving the edge of the container do a really great job of clearly separating different content areas.

Have you considered integrating these further into your structure? Perhaps a good idea would be to use regular horizontal rules, each visually replaced with the green banner graphic? That way you still have the separation even without CSS.

Great work Jonathan :)

Jonathan Snook said on October 29, 2006

Cole: The copyright does look a little out of place because it's out of the grid. The RSS button is where it is because the 'design' I've been working off actually has another button beside it: a collapse button to be able to collapse the fat footer. Whether that button makes an actual appearance hasn't been decided yet. I suspect those elements will get revisited when I change how I handle RSS site wide.

Steve: The reason I haven't done that is because I don't want to overdo the effect. The layout was primarily focusing on clean lines. The banner actually got introduced near the end of the design process when I was playing with the triangle - a subtle element that was more prominent in an older design. As you can see, the tail simply has a triangle shape cut out of it and not a fancy, draping tail with multiple points.

jasons said on October 29, 2006

I like this design alot better than the last one. The dark layout just didnt seem to fit into what i thought "snook.ca" was.

This layout kinda gets back to the feeling of snook.ca 2 layouts ago which is the one I think people (myself included) really fell in love with.

Cole Mickens said on October 29, 2006

In my opinion, I think it would like neat to have that RSS a teeny bit smaller and build it into a another ribbon to end the page, and then the copyright could sit right on it as well...

Steve Tucker said on October 29, 2006

I wasnt speaking of the visual design of the banner - which I think looks fantastic just as it is :). I was speaking about the behind the scenes integration of the banner into your site. Why not make the banner a horizontal rule in your markup, using CSS image replacement? Therefore even without CSS a content seperator is still displayed to visitors.

I used and wrote about this technique here.

Alexander Berglund said on October 29, 2006

Lately the problem haven't appeared so I think the problem might be gone.

Bramus! said on October 30, 2006

Hi Jonathan, love the front page, very clear! It's been a pleasure seeing the design evolve over time!

About the second column being empty: on the about page, you could place your picture there. On posts with closed comments, you could place a gray or faded version of the "Place a comment"-container, strip out the functionality and highlight some "comments are disabled"-alike sentence in it.

Oh, also noticed that the "post a comment"-block has a 1px gap with the green line that divides your first&second column from the third one ... I think (just a hunch here) that it might look better without the gap?

wbr,
B!

WD Milner said on October 30, 2006

Very nice. Subtle, elegant, readable.

webmack said on October 31, 2006

You started me off on a hunt to see what hasLayout and zoom is and i spent a good hour and a half here: http://www.satzansatz.de/cssd/onhavinglayout.html

I have a question for you, I was looking through your CSS and you've applied overflow: auto and zoom: 1 together. Why?

Also would this force hasLayout when all instances already have properties that force hasLayout, i.e a width and a height?

Is there something I'm missing?

Jonathan Snook said on November 01, 2006

the overflow:auto is for containing floats. I use the zoom:1 for the same purpose but for IE.

Terry said on November 01, 2006

Great job Jon! Well thought out. ;)

Andy said on November 01, 2006

I said it elsewhere, but your site looks great! I really like the treatment of the comments you've made as opposed to readers'.

Viking KARWUR said on November 01, 2006

Congratulations... Wish you all the best...

Scott Johnson said on November 16, 2006

Glad you kept this lovely floating comment box. That has to be my favorite feature of the design and one of the coolest blog comment boxes around.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.