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.
Conversation
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.
Wow, this is a huge change in design. Looks good, looking forward to seem new, interesting posts.
Very nice, congratulations on launching!
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.
Hey,
I love it...looks really great!
Congrats on your redesign!
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.
Very nice. I love the comment stlyes and the footer.
Great job and definitely one of my favorite versions of Snook.ca.
Love the header, dislike the footer. But I'll live. ;)
Wow, this is really sweet. Great work!
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 :)
@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.
Oh, and to everybody else, thank you for the kind words!
Oooo the footer is shiny.
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.
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!
I really dig the left-side of your comments and how it wraps underneath the main reading area. Very smooth and stylish.
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!
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.
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.
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.
Snook, the design looks great! Its definitely the best redesign since I've been reading. Great job and keep up the inspiring work.
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.
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?...
@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.
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...
Hey Jonathan, this is great! This is my favorite among all your designs :-)
Bravo!
This new design is looking really amazing, great job!
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.
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 ;)
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 :)
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.
Very nice job, but I'm overwhelmed by typographic diversity… :-)
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.
Snook - looks awesome. Hands down your best iteration. Each and every piece is placed well and the design is beautiful.
Congrats on the launch!
Simply beautiful, Jonathan. While the fixed comments are gone (for now), the redesign still holds that good ol' Snook branding.
Great job!
Really excellent design!
Really nice ! This theme is awesome ! Good work !
Very nice—I like it!
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.
@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. :)
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.
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!
Good on ya! You are a web-god in a sea of mere mortals...
Looks great, Jonathan. Keep up the good work.
The new design looks amazing. Awesome work.
Looks really great! Congratulations!
Awesome job Jonathan. Reminds me that I need to get off my keister and make time to redesign my own site.
Dopeness. Congrats!
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.
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 :-)
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!
It looks like a collage of previous iterations, you need to refine the details. E.g. shadows curves, header, navigation. Integrate ...
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!
yeah. this is the best design yet. love it.
@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. :)
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!
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 :)
Jonathan it looks great.
I wonder why you keep that old template on the other pages of your site (home, about, contact etc.)
@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.
@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.
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.
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.
I'm digging the new design. It's pretty. ;-)
Great work, the best version yet. You certainly like your green :-)
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?
Very nice! The more I look at it the more I like it. I appreciate the attention to detail.
Wow! One of the best redesigns I've seen in a while. Amazing job man!
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
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.
Wow, I really like this new look. Its a refreshing break from the normal 3 column designs. Love the colours. Great work as always.
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.
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.
Holy mowly!!!
its teh new Cwazy $hit!!!!!#$%&/
Great work Jonathan!
Great redesign, I love it. I love the "holly footer" as well :)
i think it's well done. bravo!
This is truly superb mate ;-) great job. You make green look nice :P.
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.
wow
Very nice redesign. I never thought a 3 column design could look so GOOD.
especially love the comments layout design. Grate job!
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.
Oh, wow! One of the best! Great!
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? ;)
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.
Great work man... I love it :)
Absolutely amazing redesign.
I haven't checked this site in a while but wow is this design real good. Love it! Great job.
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.
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.
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!
http://www.nolgraphic.com/blog/
Take a look at these guys. looks like your blog inspired them
ee72mnxsqhbb1ae2
Excellent blog. I really like this fresh and design!