Incremental Design Update

There had been a few things that were bothering me about the site since the launch of the redesign.

The main one was the fact that the Fixed Comments™ were hidden until you scrolled. To eliminate this problem, I've moved the "On Topic" sidebar into the content area and removed the related links. I'd still like to give the article metadata a little extra attention but I'll leave that until some other time. Now the comments box will always be visible (in fixed mode, sorry Internet Explorer users. You'll have to wait until IE7 or switch to Firefox). This is truer to the original implementation and I'd say a more usable option.

The next step was having Light Mode enable the remaining two columns. As a result, it's slowly becoming my preferred mode and I'm tempted to make it the default mode for the site. I'll certainly leave the contrast microwidget in place as I still like the functionality it offers. We'll see how that goes.

Finally, I've turned comment preview on by default. Start typing and you'll see the comment preview appear. Clicking the preview button will return you to the preview area if you've scrolled elsewhere.

That's it for now. There's still a bunch of little things I'd like to tweak but as they say, "There's only so many hours in a day."

Published July 26, 2006 · Updated September 14, 2006
Categorized as Design
Short URL: https://snook.ca/s/630

Conversation

23 Comments · RSS feed
xonecas said on July 26, 2006

I love the dark version, please don't take it away ! :P

Elliot Swan said on July 26, 2006

Nice...Having the comment form always showing does make it much easier to use.

I also usually use the light version, so this is pretty cool.

Miles Johnson said on July 26, 2006

Yeah I like the dark version also!
Also my preview didnt show until I pressed the button, is that correct?

Jason Kataropoulos said on July 26, 2006

And I was wondering what was happening on IE7 with the comment form. Hehe...

Looks good.

thaisie said on July 26, 2006

Looks nice.. and like the dark one...
My preview was not visible until I clicked on the preview btn. (firefox 1.5.0.4.).

And "Fixed Comments™" Is it really your trade mark : )

Dave said on July 26, 2006

Excellent Jonathan, all changes are great improvements. Comments back to how they were before, I love it. Jeez how constructive where these comments! proabbaly should have kept them to myself but no matter. ;)

Jonathan Snook said on July 26, 2006

To clarify about the preview, it should appear either as you start typing or by clicking the preview button.

thaisie: Yeah, it has become a bit of my trademark. When I was at SXSW last year, most people mentioned the fixed comments. It was even featured in the CSS Mastery book.

And folks, don't worry, the dark design isn't going anywhere. I still like it.

Nate K said on July 26, 2006

Looks great! I like both schemes, but this one is a nice change as the default.

Carl said on July 26, 2006

Jonathan, you are the King of Fixed Positioning!

Andy Kant said on July 26, 2006

I prefer dark text on light just because white on black hurts my eyes after a while...but I think that the current "light mode" makes the site look a bit ugly when it is an otherwise excellent design. I don't know what it is exactly about it, it just seems to clash.

Gabrusch said on July 26, 2006

Definitely one of the best designs I've ever seen.

Just two little things: In the "light on" version the arrow to remove the Fixed Comments is very hard to see (or are my Eyes getting old?) and second thing. Now that removed the Fixed Comment by clicking on the arrow, how do the Fixed Comments some back? Am I too stupid?

I would also suggest you to more clearly make it understandable that by clicking on the arrow the Fixed Comments are turned of. I wasn't aware of it and just wanted to see what happens if I click. The arrow on the right side is easier to understand.

So how do I get the Fixed Comments in place again?

Jonathan Snook said on July 26, 2006

Grabrusch: I see what you mean about the visibility. The contrast widget had similar issues when I launched (it was originally a page fold at the top of the content area...not noticable at all). I'll have to come up with something a little more obvious.

In the meantime, although it's hard to see, the widget is still there in the top right corner of the Post a Comment box.

Evan Krambuhl said on July 27, 2006

My only issue is minor; on the light design at the top of the 2nd collom there is not black border when you scroll away the comment box

EJ said on July 27, 2006

I definitely dig the dark stylesheet. Also love what you've done with comment previewing. I'll be honest, I've missed visiting your site. Been busy moving. lol

Jonathan, you hang out in any IRC channels? As an aspiring developer myself, I'd love to pick your brain about some of the things you've got going on here. Cheerz! :)

Steve said on July 27, 2006

No offense but i think the preview button could do with a little more contrast, and I think the white style s much easier on the eye.

Belz said on July 27, 2006

I like it just as is is... I might implement the preview also on my blog...

Fredrik Wärnsberg said on July 29, 2006

I like the new update, but I must say that the top gradient looks, well, not so good in Light Mode. It also makes the headlines very hard to read (WCAG, anyone?).

How does it look with the gradients removed?

Matt said on July 31, 2006

The automatic preview is really annoying. What is the point of fixed comments, if it automatically jumps to the bottom of the page. Owe, my usability hurts.

Jonathan Snook said on July 31, 2006

Matt: that's a good point. The automatic preview was added because it seemed many felt reluctant to use it. In this case, I may have sacrificed the usability for discoverability.

Paul Boutin said on August 04, 2006

I like the preview feature, but I don't see much use in it. If you can't use quotes or code what’s the difference of reading the comment in the comment window or the preview window?

Jonathan Snook said on August 04, 2006

I allow html in my comments for things like demonstrating code examples. That's why the preview is helpful.

Paul Boutin said on August 04, 2006

I guess I didn't catch that... It's pretty cool to see it in action. Now I know I need to look at how you’re doing it. At first glance I'd say it was a simple DOM script to read the comment and spit out an innerHTML to a container. But now It seems you may be using AJAX or something.

JW said on August 05, 2006

The only thing that feels weird now, is that when you move the Fixed Comments to the left bar, the second bar is completely empty. I suppose that, if you move the comment form to the left bar, the middle bar may be removed, or else some other text should fill it a bit. Now I only have a completely empty white bar (I prefer the white scheme).

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.