I'm an addict.

A redesign addict, that is. What else would explain me being up at two in the morning hacking away at yet another redesign of snook.ca?

Once again, I was able to pull off the redesign without having to touch the original files[1]. Ala the CSS Zen Garden, I just dropped in the new stylesheet and I was off to the races.

[1] Okay, that's a small lie. I took out a hyphen and added a line break in the comments area.

With this iteration, I wanted to have a design that integrated well with the fixed comment form. I feel like I accomplished that. The comment form in the old design was simply a hack as a proof of concept. I made the form smaller so it should be less of an issue for people at lower resolutions. On the downside, those at higher resolutions may now found the comment form sitting somewhat higher than might be comfortable.

The biggest problem with the comments form is that in Firefox, the cursor position is too far to the left (at least on my machine). I'll have to resolve this issue in the near future as I suspect that'

The comments themselves turned out surprisingly well. Somewhat inspired by Subtraction and its variations.

As always, this site is in constant flux so don't be surprised if things seem just a little different the next time you visit.

Update: I fixed the cursor issue in Firefox. I tried to use a negative margin to have the arrow pull to the right. To fix, I start the div further to the left and then used positive margin to push everything else back in. Negative margins = bad!

Also, I wanted to say thank you for all the kind comments. Both on the redesign and on the fixed comments.

Published May 13, 2005 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/364

Conversation

43 Comments · RSS feed
Callum Mcleod said on May 13, 2005

At first I didn't realise what had changed, then I went to an older post of yours and scrolled down to the comments. Amazingly, the "Post a comment" form followed me.

I love it!

Matthew Pennell said on May 13, 2005

Really nice (whoah, what the hell is up with that cursor?!)

Really like the comments layout too - looks like that's going to be one of the design trends that get analysed at the end of 2005...

Daniel Oliver said on May 13, 2005

Jon, the new design looks great I think. Colours are nice and certainly a little different.

The comment form is really cool as well. I didn't notice it in your previous design despite looking out for it after reading your post.

Great work.

Chris Mewhort said on May 13, 2005

The new design is really nice, including the "Post a Comment" box and the Comment layout itself. Really clean, really nice.

-Chris.

Peter said on May 13, 2005

Addicted? You should post that on TotallyAddictive.com!

Jeroen Mulder said on May 13, 2005

Wow, those comments indeed turned out extremely sexy! I lub it ;-)

Gabriel Mihalache said on May 13, 2005

A 1024x768 sized IE window won't display all the page without a horizontal scrollbar. Maybe you could reduce the width of the left-most menu.

chuck said on May 13, 2005

Very slick!

I like the unique layout ... always nice to see a variation on the typical "blog format" ... great colors, too!

Brent Wilcox said on May 13, 2005

Another top notch design from a young, talented powerhouse of creativity. Good work here, Jon. I hope you are keeping all these designs for future sale.

huphtur said on May 13, 2005

Keep in mind that not everyone has their browser maximized. In that case your design breaks.

Rob Mientjes said on May 13, 2005

Damn, what's up with the cursor?

Anyway. Very very very cool. Gray and green don't fail. I pretty much like all the looks of this man. Like, very very cool.

Jonathan Fenocchi said on May 13, 2005

It$this->normalizeEntities16bit("8217")s beautiful. Good job! I think the reason some designers are so good is because they are never satisfied with their designs. As a result, they keep redesigning. The dissatisfaction with one$this->normalizeEntities16bit("8217")s design is one of the things I$this->normalizeEntities16bit("8217")ve noticed that makes a good designer so good. Anyway, I like it, and this floating contact form is pretty sweet! (There seems to be a slight bug in Firefox, though, where the blinking text cursor is six letters behind the word I$this->normalizeEntities16bit("8217")m typing. Confusing...)

Christian Watson said on May 13, 2005

Dang! This site looks good! Love the comments implementation - the way the comment box stays in place is cool.

It seems to be crying out for me to write something in it. The only 'negative' point I would make is that on the home page, the empty column where the comments box goes looks a little like wasted space. Perhaps that was the intention though.

Lea said on May 13, 2005

Bravo! This is great man. I don't know if it's just me, but my cursor seems to be out-of-sync with me typing, but that doesn't seem to be deterring the message. I think this "comment box to the side" will become a huge trend soon. ;-) And here I thought I had been soooo clever. I especially like how the triangles are used, too. Everything's so nicely organized. Good job.

Jonathan Snook said on May 14, 2005

@all firefox users: the cursor issue has been fixed!

Wesley Walser said on May 14, 2005

Dude, the new design is just hot. It does seem the the text starts a little too early in the Name field still. Some of my 'W' is out of view.

Some people won't like that it goes beayond the 800x600 horiz scroll, but I think it looks really good. (Black and Green is amazing)

Scott said on May 14, 2005

Wow, The new site looks great. This comment box is too sweet. I know you're an addict, but I think this design is a keeper. Maybe you should start a second site to satisfy your fix.

@ Wesley: That's a problem with 8 point (11 pixel) arial. A capital "W" at the beginning of a line will always be cut off. Strange, I know, but that's the way it is. Don't ask me why, though. It's only at this one particular size and only the one character as far as I can tell.

Jules said on May 14, 2005

Wow, I can see that you put 101% into this redesign. No really, 101%, it is slightly too wide on my system (WinXP Home, FF1.04, 1024x768) :-) The "S" in Favourite Posts, the "E" in Syndicate and "S" in Bookmarks are partly cut off.

I like the comment section where the contributors are off to the left. Excellent work!!

Jonathan Snook said on May 14, 2005

Good call, Jules. I adjusted it slightly so there should no longer be a horizontal scroll bar at 1024 (depending on the size of your scroll bar, that is!)

Peter Flaschner said on May 15, 2005

Jonathan this is really beautiful. Great use of a single colour. I imagine you'll see a huge increase in the number of comments left.

I think you'll see quite a few sites implement your fixed comment box. It just makes so much sense.

Gerhard said on May 18, 2005

Nice website mate ;-). Love the color scheme!

I started the re-design on mine quiet a while back, but still didn't manage to put it out there...

Your website is another reminder that I should be getting back on track asap.

Keep the good stuff coming, Gerhard.

Josiah said on May 18, 2005

Brilliant. This layout is brilliant.

Jannis said on May 25, 2005

Is the comment form just fixed and that's the sensation? Or can you use the scrollbar to "aim" at page elements (entries, comments) with the green arrow containing "preview" "post", in order to post a comment to them? That would be neat. Or is it just the preview that's so cool?

Or am I completely wrong here :-)

Jonathan Snook said on May 25, 2005

Jannis: The comments are fixed and I've got the preview functionality. I have thought about setting up an "aim" function which I'll look into at some point in time.

Jannis said on May 25, 2005

Yeah. I've thought about this thing too, a while ago. Why not be able to just pick some element of a site and comment on it. Of course, the "commentable" elements should only be things like posts and other comments, or special images, but not every single element of the page.

Let me hear what you got, once you have something - I have no time to look into this atm :-)

Adam Khan said on May 25, 2005

Fabulous. Very very nice.

John said on May 31, 2005

wicked!

Robert Kraig said on June 12, 2005

this is a kewl xhtml/css3 layout :P

ben said on June 15, 2005

wooooooooooaw nice design !

Live preview kicks ass !! :)

said on July 14, 2005

this is great

Stephanie said on July 19, 2005

Design is pretty, really -- and I couldn't resist trying out the comment form! (Silly, really, isn't it?)

Bruno said on July 22, 2005

Awesome way to format the comments div. Congrats.

ed said on August 16, 2005

foobar

Freddy said on August 17, 2005

You, Sir, have been ripped off: Check out www.newsgrouptopics.com

MySchizoBuddy said on September 25, 2005

Very nice layout. Are you using a CMS package for the comments or is it custom build.

said on October 05, 2005

aaaaaaaaaa

Kevin said on November 03, 2005

this is sweet

said on November 03, 2005

good article

Mike said on January 02, 2006

this is a test

dfghdfgh said on January 11, 2006

dfghfghdfghdfgh

iZone Design said on January 22, 2006

Now we're talking! Hot design, love the coment box :D Congratulations.

The New Revelation said on May 11, 2006

This is just a little test. I'm just checking out the implementation of a link I saw elsewhere on the web.

Dado said on December 26, 2006

How can i put comment box on to my page? I have account at university and they give us some space... Now i made my page and now i would like to put comment box like you did. What to do now? I don't know java i only know a little bit of HTML. PLEASE HELP ME! :))

Thanks for answer!

Ps. If you do reply, could it be on email? :D

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.