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.
Conversation
Awesome redesign. :)
Love the Related and Recent columns at the end of posts, and the footer is pretty sweet as well.
Hey man, the new design is great. You make it look so easy!
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.
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.
You know, I think it's often harder to pull off something that's simple than something busy and overblown. Well done.
I like it ,very simple and those detailes are just great (like the green robbon,9rules logo...)!
Good work m8!
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.
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...
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.
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).
wow, great redesign! i'm tempted to steal some bits here and there for my own blog ;)
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...
Miha: Thanks for pointing that out. I've fixed up the about page. :)
You're a very wise man, Mr. Snook!
Excellent job - there's much I can learn from you.
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.
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!
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!!!
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?
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?
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:)
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#linkitupbelow, 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!
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!
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.
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.
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.
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
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 :)
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.
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.
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...
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.
Lately the problem haven't appeared so I think the problem might be gone.
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!
Very nice. Subtle, elegant, readable.
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?
the
overflow:autois for containing floats. I use thezoom:1for the same purpose but for IE.Great job Jon! Well thought out. ;)
I said it elsewhere, but your site looks great! I really like the treatment of the comments you've made as opposed to readers'.
Congratulations... Wish you all the best...
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.