V8: Supercharger

Version 8 is launched. Oh crap.

Well, I've decided to have some fun and call this "Supercharger". It's been months in the making. Seriously. It's gone through iteration after iteration but I finally think it was good enough to launch. It's been tweaked and prodded all the way to the finish line. And this isn't even done yet (as is probably obvious in a few places). This isn't even a late Reboot, an event that I believe is now past its prime.

Death of Fixed Comments

Okay, I didn't get rid of comments but I did get rid of fixed comments. It's been a staple of this blog for years but I've finally retired it. Sort of. They'll be making a small return when I get them implemented but they'll be much different than before. You'll have to turn them on manually, for one. They'll also be fixed at the bottom as a full-width panel.

Trying to use fixed comments was fun but it's actually a pain to design around. You basically give up a column of design real estate for them. That's something that I didn't want to do any more.

Columns

The last design was essentially a single column design. Any other information was at the bottom. Oh sure, it's all "content-centric" but I felt like cool stuff was getting lost down there. It's lonely at the bottom!

As you can see, it's now three columns. And no footer. Except a rather large rendition of my logo. Just in case you forgot where you were by the bottom of the page. Like the overdose of green wasn't enough.

The three columns gives me more real estate "above the fold" to highlight various things. There's still a few things to make their way into the sidebars. Nothing major but

Self Promotion

Mind you, calling it "self promotion" sounds icky but I did want to highlight some of the personal projects that I've been working on. They now have a place in the sidebar. I should have a link to the book there soon, too.

More to talk about

I hit a bit of a lull within the past couple weeks, not posting much as I focused on client work. That won't change much in the next couple weeks either but should hopefully pick up after that as I wrap up various projects.

Anyways, I somewhat rushed this out. I still have some tweaks to make and I'll have a follow-up post that I want to do talking about the design of the site. I had a lot of fun putting this one together and I think you might be interested to see how the design progressed and the thought that went into many elements that you see within the design.

Published May 06, 2007
Categorized as Design
Short URL: https://snook.ca/s/803

Conversation

92 Comments · RSS feed
Fredrik Wärnsberg said on May 06, 2007

Great job on the redesign btw, I love it!

All the headlines in your articles are floating (have equal margin on the top and bottom, which makes them float in-between paragraphs rather than belonging to one). Might want to fix that the the sake of legibility.

Vlad said on May 06, 2007

Wow, this is a huge change in design. Looks good, looking forward to seem new, interesting posts.

Josh Blount said on May 06, 2007

Very nice, congratulations on launching!

Gary Barber said on May 06, 2007

Good change, the information at the bottom was getting lost and lonely :) Sometimes article content centric is good, but then we have to question what's the point of the other linked resources if we hide them away.

Ben Henschel said on May 06, 2007

Hey,

I love it...looks really great!

Congrats on your redesign!

Sean S said on May 06, 2007

Probably my favorite Snook.ca design thus far. Very nice job.

Glad to see you kept (at least for the time being) the comments around.

William Wilkinson said on May 06, 2007

Very nice. I love the comment stlyes and the footer.

Derek Punsalan said on May 06, 2007

Great job and definitely one of my favorite versions of Snook.ca.

Andre said on May 06, 2007

Love the header, dislike the footer. But I'll live. ;)

jakedahn said on May 06, 2007

Wow, this is really sweet. Great work!

Jermayn Parker said on May 06, 2007

Good to see comments stay,
I liked the add comment box that moved with your scroll and would have been nice to see stay...

A comment notify would have been nice as well :)

Jonathan Snook said on May 06, 2007

@Fredrik: I actually liked the extra padding but noticed it looked awkward on the home page so I've decided to make it consistent on both pages. :)

@Andre: goes to show that you can't please everybody. ;)

@Jermayn: well, you'll be happy to see the fixed comments make a partial return later this week. I think you'll like how it works.

Jonathan Snook said on May 06, 2007

Oh, and to everybody else, thank you for the kind words!

Justin Ruckman said on May 06, 2007

Oooo the footer is shiny.

Mike said on May 06, 2007

I enjoy this design more than all of your older ones - this really makes me wish I had the same design talents. I'd like to think that I have an equal amount of talent in programming - that's my bread and butter. I've been reading this blog for a long time as I enjoy your thoughts on xhtml/css as well as a the job, but I would love to hear more about your design process.

Jeff Croft said on May 06, 2007

Lookin' great, Jon! Definitely my favorite iteration so far. I really like the shades of green you've picked this time around. REally good stuff, my friend!

Geof Harries said on May 06, 2007

I really dig the left-side of your comments and how it wraps underneath the main reading area. Very smooth and stylish.

Scott G said on May 06, 2007

Congrats on the new design Jonathan! It's looking fresh :-) You make me painfully aware that I need to 'officially' finish the design on my blog!

Gil Creque said on May 06, 2007

Wow, this new design is amazing. Once again you've pushed the limits. My favorite part has to be the roll between the commentor's name and comment. I did notice one bug. When you are looking at all the comments and individual has made, the commentor's name overlaps with the about snook/projects section on the left side.

Spencer said on May 06, 2007

I like how you've put the Active Topics up at the top-right hand corner of the page... very nice, and easy to access.

Akhil said on May 06, 2007

Very nice looking design. I have been following your blog for sometime now but haven't commented yet. Not sure is it just me, after reading 3-4 comments look to the right side, I see fading white lines corresponding to the green lines(comment border). I like the preview type appearing in the bottom of the comment section too.

Steve Lounsbury said on May 06, 2007

Snook, the design looks great! Its definitely the best redesign since I've been reading. Great job and keep up the inspiring work.

Matt said on May 06, 2007

Hey Snook. Looking great!
I think the typography still needs a little work, looks a little cramped to me (more line-height?)
Beautiful work nevertheless, congratulations.

Lucian Lature said on May 06, 2007

I think that the new version is fresh and more optimistic than the previous one, I like the color pallete and also the "Live Preview". Do you intend to publish the php code your blog is running on?...

Jonathan Snook said on May 06, 2007

@Mike: I'll be trying to get a post up within the week that talks more about the design process. I'm going to try and talk more about design in the coming weeks.

@Gil: thanks for the heads up on the All Comments page. Not sure yet how I'm going to fix it but I'll come up with something. :)

@Matt: I've actually left the typography alone for a reason: I want to see how usable the site is before I go messing with line heights too much. If I find the readability a little difficult, I'll play around with it some. I did the same thing with the previous version, too.

@Lucian: no plans to release the blog code. Mostly because much of it is really unpolished and very specific to my site. I doubt it'd be of much use to anybody over and above the many blog tutorials that come with most frameworks these days.

Georges Jentgen said on May 06, 2007

Just love it! It's great and I really like the Logo at the bottom. Looks fantastic :)
I won't go into details, as others already did before, and I am late for work... so...

Binny V A said on May 06, 2007

Hey Jonathan, this is great! This is my favorite among all your designs :-)
Bravo!

Prashant said on May 06, 2007

This new design is looking really amazing, great job!

Nicole Wopperer said on May 06, 2007

Very cool, Jon. The footer is so unique. I've never seen another one like it!

Oh, and I've always really liked how you bold out your own comments—especially the execution in this version. Makes for easy reading! Super.

kimblim said on May 07, 2007

Looks good, although I liked the old one better - did you change the HTML or is it all CSS? The reason I'm asking is that if it's all CSS, you could provide the old styles as alternative stylesheets - just to show off a little bit ;)

Nate Cavanaugh said on May 07, 2007

For the most part, I really like the new design, however, I do have one criticism, and it's bad enough to make me think my monitor is wonky or something.

But what is up with the blue/grey banner at the top? Besides the fact that the color is in quite a bit of disarray with the rest of the site, it's artifacted pretty badly, and the type is pretty pixelated (or artifacted).
The footer portion with the logo is quite nice, though it has a bit too many sharp pixels hugging the circle, for my taste.

Overall, I this is a great improvement over the last one, and I especially enjoy the new columns. Much easier to navigate and grok the site's content and flow.

Overall, good job :)

Sam Rayner said on May 07, 2007

Great redesign Jonathan! Very fresh. I love the two-tiered headings.

One small bug I found: once the comment numbers go into double figures they tend to overlap the author's name a little, especially with the wider figures like 30 and 00 in the comment preview.

Apart from that it's all beautiful.

Oh, and I noticed yesterday that the listing for your book on all Amazon sites has you down as Jonathan Snooks. Just incase you want to give them a heads up.

Riddle said on May 07, 2007

Very nice job, but I'm overwhelmed by typographic diversity… :-)

Andrew Ingram said on May 07, 2007

The new design looks really nice, you've got a few markup issues to fix and the blue header is badly compressed but other than that it's really impressive. Everything has it's own place and looks like part of the design rather than being afterthoughts.

Nate Klaiber said on May 07, 2007

Snook - looks awesome. Hands down your best iteration. Each and every piece is placed well and the design is beautiful.

Congrats on the launch!

Philip Karpiak said on May 07, 2007

Simply beautiful, Jonathan. While the fixed comments are gone (for now), the redesign still holds that good ol' Snook branding.

Great job!

Graham said on May 07, 2007

Really excellent design!

loopion said on May 07, 2007

Really nice ! This theme is awesome ! Good work !

Julian Schrader said on May 07, 2007

Very nice—I like it!

Jason Calleiro said on May 07, 2007

It looks fantastic! I love the fact that you redesign so often. its nice to come to a site and see something fresh and new. In your case it has happens a lot more than usual.

Jonathan Snook said on May 07, 2007

@kimblim: enough of the HTML changed - mostly with the header and sidebars - that just doing a style sheet swap won't work. I've been able to pull off that stunt a couple times but it just wasn't practical this time around.

@Nate Cavanaugh/Andrew Ingram: I've re-exported the header image. Hopefully it's a little cleaner now.

@Sam Rayner: interesting. There shouldn't be any overlap until it hits 3 characters but it seems like it might not be a bad idea to find another place to put them. Thanks for the heads up. I did notice the spelling mistake on the book page but it hasn't bugged me enough to send them an email about it. :)

Jody Daub said on May 07, 2007

Great re-design! I love how the divisions between each of the comments makes the center column pop out to the front. The darker green flanking the outside columns was a good choice. And the strong logo at the bottom is killer.

Just one thing, though - if the browser is anything less than 980px wide the horizontal scrollbar is needed to access the right column (including the main navigation). Normally I would chalk this up as a usability issue only, but considering your audience I doubt it's that much of a problem.

But in Firefox, Opera and SeaMonkey (at least) the portion of the right column that is off the right edge of the viewport is not visible when using the horizontal scrollbar. In IE7 you can get the main navigation, but the remainder of the right column is still cut off. Let me know if you would like the screen shots I've taken.

Jeremy said on May 07, 2007

You know, I have to be honest- I'm not sad to see the fixed comments go. As a proof-of-concept, I thought it was kinda neat and even aesthetically pleasing. But as a UI element, I found it a little jarring when you begin to scroll down to read further down an article, and then WOAH!! your eyes zoom back up to the top and your thought pattern or read-flow is taken on a detour or sidebar, if you will. (Damn! You can think of a better use of that pun jeremy!) Anyways, well done!

tom said on May 07, 2007

Good on ya! You are a web-god in a sea of mere mortals...

Andy Kant said on May 07, 2007

Looks great, Jonathan. Keep up the good work.

Will said on May 07, 2007

The new design looks amazing. Awesome work.

José Carlos said on May 07, 2007

Looks really great! Congratulations!

Jason Beaird said on May 07, 2007

Awesome job Jonathan. Reminds me that I need to get off my keister and make time to redesign my own site.

Sherwin Techico said on May 07, 2007

Dopeness. Congrats!

Evan said on May 07, 2007

Ill be honest, its not my favorite rollout of your site, it seems like there is too much going on. That being said it still looks a hell of a lot better than a lot of sites out there.

David Mead said on May 07, 2007

Just catching up on my bloglines and wanted to add my 2 cents of congratulations. Excellent redesign. Love the color change for the headings, though I personally miss the fixed comments :-)

Connor Wilson said on May 07, 2007

I was getting suspicious that you would be redesigning soon, and this definitely lives up to my expectations. Makes me want to get into CakePHP and off of WordPress!

Johan said on May 07, 2007

It looks like a collage of previous iterations, you need to refine the details. E.g. shadows curves, header, navigation. Integrate ...

Travis said on May 07, 2007

looks great Jonathon, well done! I'm always amazed when you apologize for being quiet on the posting front when your blog is one of the more frequently updated in my daily reading. Keep up the good work!

Ben Hirsch said on May 07, 2007

yeah. this is the best design yet. love it.

Jonathan Snook said on May 07, 2007

@Evan: you know, I'm surprised more people haven't been saying the same thing. I was predicting that more people would say it looked cluttered. It was a chance I was willing to take, though. :)

@Johan: I consider all of the stuff I design a collage of elements. And certainly I'll continue to pull elements out of previous designs. That's absolutely on purpose. But I'm interested in hearing more about refining the details. You mention areas of the page but don't explain what you think needs refining. Could you expand on that?

@All: thanks again for the kind words. This is being received much better than I thought it would. :)

MrQwest said on May 08, 2007

Oooh, i really like this design. I love the layered effect that is portrayed between the columns, and there's little details here and there which are just awesome!

Congrats on the redesign!

Kilian Valkhof said on May 08, 2007

Jon, very nice! I agree with Evan though. at first view it seemed sort-of cluttered. But i had no problem reading your article, so I guess it's not really an issue ;)

I really like both the header and the footer, but i think the orange feed icon and the coloured version of your projects stand out too much compared to all the green. perhaps make them green/semi transparant and light them up when you hover over them?

The typography looks great (like your last version) but i think it could use a little more line-height :)

All in all, awesome website :)

Jason Kataropoulos said on May 08, 2007

Jonathan it looks great.

I wonder why you keep that old template on the other pages of your site (home, about, contact etc.)

Jonathan Snook said on May 08, 2007

@Kilian: I've upped the line height and things definitely feel more comfortable. As for clutter and the sidebar, I used contrast and the shadow to emphasize the main column. This will hopefully create enough balance that I can keep the elements as-is in the sidebar. I do want them to be noticeable without being distracting. Time will tell if that's the case.

@Jason Kataropoulos: I wonder that, too. :) It was originally intended to keep the business and the blog separate but I haven't had time to add a serious portfolio and as a result, it's languished somewhat. I may bring the pages into the new design but I think I'd still want to create something unique for the landing page.

Jonathan Snook said on May 08, 2007

@Jason: okay, I've just gone ahead and integrated those pages in. I still have to come up with something for the home page but at least the rest of the pages are now under the new template.

Steve Tucker said on May 08, 2007

Great new design, Jonathan - refreshingly original :)
Particularly like how clean the footer is with the branding - most people would fill that space with the usual links and copyright notices.

Jeff Sargent said on May 08, 2007

Wow - of the prominant redesigns I've seen lately, this is easily the one I like the most. Very well done. I respect your choice to nuke the fixed comments for the sake of your overall design - it can be hard to nuke a staple of your site.

Kudos.

Scott Johnson said on May 08, 2007

I'm digging the new design. It's pretty. ;-)

Daniel Tubb said on May 08, 2007

Great work, the best version yet. You certainly like your green :-)

Johan said on May 08, 2007

You mention areas of the page but don't explain what you think needs refining. Could you expand on that?

It seems the bended lines (e.g. the seperator lines in the comment area and commentor area form a unity through the swoosh-like bended line) are pulled from your Snook lettermark, this could be merely a coincidence. This could be an idea to expand on.

the shadows on both sides at the comment blocks area could be reworked to achieve a different effect, it sort of looks like a shadow treatment we have seen once too many.

the logo you added both top and bottom could fucntion like a high contrast styleswitcher indicator??

The logo area has this shadow and looks kinda blocky and out of place with the rest of the site elements. This could be an indcation you could rework the different site elements to be more liike complementary. the header and e.g. the typographic treatment seem to much, it could be interesting to work with the footer idea and sort of workout that for the header?

What do I know?

Bob Hutchison said on May 08, 2007

Very nice! The more I look at it the more I like it. I appreciate the attention to detail.

Ash Haque said on May 08, 2007

Wow! One of the best redesigns I've seen in a while. Amazing job man!

Cole Mickens said on May 08, 2007

I was saddened when I realized that I had missed on of my favorite holidays and was happily suprissed when I came here and I realized the change.

Two things though: First, your background-image (http://snook.ca/img/v8/ft.jpg) with the burst(?) is too cool. I think it would be cool if it were more central or visible though it hasn't ever seemed your style to go overboard with the logo so maybe thats not your style.

Secondly, and I know its not overly cross browser but you might implement a minimum height value for the "post" content or at least for the sidebars to prevent this: http://img369.imageshack.us/img369/7048/screenshotgo5.png

Montoya said on May 09, 2007

I have to say, this latest design is your best one yet, and I'm glad the fixed comment form is gone. As much as it was cool, it was also kind of annoying when I was reading your blog without any intention of commenting. Also, I think the presence of two sidebars really doesn't hurt the focus on content at all.

Dean said on May 09, 2007

Wow, I really like this new look. Its a refreshing break from the normal 3 column designs. Love the colours. Great work as always.

Matt Brett said on May 09, 2007

Fuck, this looks great! So great, that you made me drop the f bomb. :P

There's lots to love, but I especially like the comments.

Andy said on May 09, 2007

1. Looks great!
2. I can't believe you copied me in not having banners ;)
3. This newest CSS Reboot was not very well organized.

Marko said on May 10, 2007

Holy mowly!!!
its teh new Cwazy $hit!!!!!#$%&/
Great work Jonathan!

Emanuel Blagonic said on May 10, 2007

Great redesign, I love it. I love the "holly footer" as well :)

Trey said on May 11, 2007

i think it's well done. bravo!

L3ggy said on May 12, 2007

This is truly superb mate ;-) great job. You make green look nice :P.

Adam Messinger said on May 12, 2007

Your redesign puts my meager realignment to shame! I'll second all those "best yet" comments -- this is outstanding work.

I also have to chime in with Jermayn on comment notification. A comment feed or e-mail notices would be great.

mycotics said on May 14, 2007

wow
Very nice redesign. I never thought a 3 column design could look so GOOD.
especially love the comments layout design. Grate job!

kuba said on May 15, 2007

Your design is amazing! This is just great. And it is even better because it is made with Cake (I've just finished my website completely in CakePHP, and I love it - Cake, not my site ;) ).

Great inspiration.

Ji31 said on May 16, 2007

Oh, wow! One of the best! Great!

kiper said on May 17, 2007

Bright light, bright light!

Great work, as always. Maybe a tad too bright for my taste (or it might be the high contrast of my screen). I wish you long life, happiness and prosperity!

I haven't read the book yet but it looks yummy! Could it be useful if I've already Transcended CSS? ;)

Adrian said on May 17, 2007

Always a job well done. Great redesign. Also nice to see the work section and blog carrying the same theme now, something I hope to get around to doing on my own site. Keep up the great stuff.

Jonic said on May 20, 2007

Great work man... I love it :)

Steven Bao said on May 20, 2007

Absolutely amazing redesign.

Dave Bowker said on May 20, 2007

I haven't checked this site in a while but wow is this design real good. Love it! Great job.

Jacob said on May 21, 2007

I landed into the "Getting Your Divs to Behave Like Tables" article while struggling with a design I am working on. I was just stunned by your site's design - I can appreciate how much work and skill went into it (and especially the blog & comment layout). Very inspiring.

just.xTc said on May 22, 2007

Very hot design, excellent job.

However...
1. Too bright: I feel like some areas seem oversaturated with color, a bit hard to read.
2. Your comments: Whenever you make a comment, the background turns green and the text turns white - it's tough to read, I have to highlight the text.

But I love the footer and most elements. Great job overall, but you should do something about the legibility.

Gordon said on June 04, 2007

Noticed that your "All comments" link for each commenter does not paginate. Pulling up Mr. Snook's comments takes awhile.. Sure you knew this but were just putting it off for one of those mythical moments of "free time" when you would "get around to it" :-). Love the site!

mycotics said on June 24, 2007

http://www.nolgraphic.com/blog/
Take a look at these guys. looks like your blog inspired them

Molly Justice said on November 12, 2008

ee72mnxsqhbb1ae2

SEO said on November 29, 2008

Excellent blog. I really like this fresh and design!

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.