Rebooted

That's right, I've finally launched the redesign. No more teasers, this is the real thing. There are some minor things that I still need to change over and add, like error pages. I'm hoping to get them done before the actual reboot deadline on Monday. In the meantime, feel free to explore and be sure to point out anything that doesn't seem to be working just right.

I'm sure to some of you, this will come as a huge shock and many will indicate their dislike for the design. But it had to be done. And now that's it's done, I'm not going back. Things will still change. There will be tweaks as I work out what I like and don't like over time. That's the great thing about a web site. Especially one that you have full control over.

Goals

With the redesign, I had a couple key goals. The first was to have some fun with technology. There are already a few neat things in here: fixed comments are now dockable, you can collapse the design to two columns (click on the arrow in the top right), and you can even adjust the contrast on the main content area (click the page corner). These things may look hidden and out of the way and that was on purpose. I wanted to offer some discoverability in the site and to let others have fun with it. All done with some unobtrusive JavaScript.

The other main goal that I had was to try and highlight additional content that could be found on the site. There's the On Topic section which should highlight related articles much better than before. The sidebar features Recommended articles and the footer now contains links to each category archive (before they were under a Topics page).

While I may not be able to please everyone, at least you can rest assured that if you don't like the new design, there's still the RSS feed!

Published April 29, 2006 · Updated September 14, 2006
Categorized as Design
Short URL: https://snook.ca/s/584

Conversation

69 Comments · RSS feed
Josh Pigford said on April 29, 2006

Legit my friend...legit. I will say these dockable comments are a tad moody in Safari...but otherwise I'm loving this.

Wolfgang Bartelme said on April 29, 2006

Great job man. I like it.

Derek Punsalan said on April 29, 2006

Ooh magic. The comment form disappears if you scroll up to far while it's docked. I like it. I'll have to spend some time looking through the details in order to find all the hidden features.

assaf said on April 29, 2006

OMG this is cool!

just one thing,
I saw that I can undock the comments, but why isnt the setting saved in a cookie so it will be this way for all the blog posts?

other then that,
Great job!

Sam said on April 29, 2006

I'm sorry many but I really don't like this as much as your previous one. It's not even close.

Matthew Pennell said on April 29, 2006

The contrast changer is a phenomenal idea - is it persistent like a style-switcher, or do I have to change it for every post?

Excellent job, though - really solid.

Matthew Pennell said on April 29, 2006

Found a problem - on the main Blog page, you haven't changed the color of the h2 entry headings for the alt.contrast setting, so they're white-on-white.

James AkaXakA said on April 29, 2006

Looking good...quite 'apature'.

I like!

Stephen said on April 29, 2006

The idea of allowing people to "discover" features within the site (perhaps with a few hints to get them started) is an interesting one, as HTML-based designs are usually much more practical and to the point, leaving such playfulness to the Flash sites (which can then be criticised for their lack of usability of course ;)).

The only potential problem with the "dockable" form is that for shorter articles with no comments, the form is permanently hidden behind the "On Topic" block.

Of course, once the article has some comments, and the page starts to scroll, you can see the comments form, but it's a bit chicken-and-egg...

Other than that, very sleek, congratulations on a job well done.

Stephen.

Benjamin Jackson said on April 29, 2006

It's looking great Snooky! Well done mate.

rck said on April 29, 2006

Very clean. The funny thing is, I've released a free phpWebSite theme called Borkenkaefer a while ago. While no where as polished as your's, it's also green highlights (links in my case) on black.

Andrew said on April 29, 2006

I suppose this is the appropriate time and place...

1) If my text size is bumped up even just one "notch", the words inside the "I am a professional freelance web developer" green box (on the front page) spill over into the latest entry column. I'm always adjusting my text size for various monitors.

2) I'm seeing underlines across the top of the page from image replacement in the top links (FireFox)

Keep up the fantastic work!

Ballwalkin' Mike said on April 29, 2006

This is a fantastic new redesign. I have just one small suggestion. The docked comment box on the right seems a bit too high on the right hand side. It feels cramped up there. I realize you probably did this so the whole thing hides under the header for the middle column and also to accomodate smaller resolutions, but perhaps you could make both the background height of the header and the top position of the comment box a percentage relative to the actual height of the browser window?

Just a thought.

Oh, and a small glitch: if you do a 'live preview' with the high contrast mode on, the border around all the comments that is supposed to be white, uses the default darker color for the preview post.

Dennis Bullock said on April 29, 2006

Wow! What a great job. Reminds me of green screen terminals.

Jens Meiert said on April 29, 2006

Spontaneously - you may rest assured that I don't sign anything immediately ;) -, I enjoy it as well, nice work!

Rob Brackett said on April 29, 2006

Looks nice and sleek, but, like Andrew, I am seeing underlines from the image replacement at the top of the screen with Firefox 1.0.6 on WIndows. Looks fine on Firefox 1, Camino, and Safari on OS X, though.

eric said on April 29, 2006

I like it. The 'center' column is a bit empty, although I like how the docked comments are hidden under what's there.

tomo said on April 29, 2006

I see some great details in the redesign, but I'm sory to say that I find it extremely difficult to read the content. Not because of lack of contrast, but just because of the extra contrast. White text on such dark background irritates my eyes a lot, the comments area, on the other hand seemes much more readable, probably because it's darker text color. (less contrast).
Great thing you let people change the content colors. Very nice overall, I'd say it's a step ahead with respect to the last design.

Prabhath Sirisena said on April 29, 2006

Beautiful. Just beautiful.

Elliot Swan said on April 29, 2006

Pretty sweet...I like how you can change the contrast and how the comments hide under the top of the middle column until you scroll.

Now if you used a transparent PNG there so that the comments would fade in as you scroll down, that would be killer.

Andrea said on April 29, 2006

Nice! I immediately docked the comments and played with the width before I even read the article. :)

I did notice that when I change the width in Safari, styles get messed up and I need to refresh before things are normal.

Thanks for providing a dark on light alternative for the content too-- I find that much easier to read (I think I'm getting old...). Can't wait to discover more!

Nathan Smith said on April 29, 2006

Once again, you have raised the bar, and made me feel completely inept. Thanks alot you big meanie. Great redesign. I love the contrast toggle, very cool.

Anton said on April 29, 2006

The Matrix has you, Jon.
:)
Nice work - the above comments already cover the minor issues that I've noticed, so I won't nag you about those bits.

I'll tell you honestly, if I would've seen swatches of this color scheme, I would've said 'no way that's gonna work'. But honestly, the way it just pops of my screen makes me all tingly.

Here's to you, Mr. Green Laserbeam Guy.

jordan said on April 29, 2006

Just as a sort of discoverability/less-frustration sort of thing, it's a bit odd that you don't have the main page set up so titles are links ot the article, instead only using the permalink. It seems a bit obtuse to me, and took me a little bit to figure out how you intended me to visit an article.

Wesley Walser said on April 29, 2006

I like it, I was a little thrown off at first when the comments didn't follow me around. The third column going away is interesting I don't know that I will ever use it though. Some people will definetly like the ability to change that main contents background/text color.

Steve Bezanson said on April 29, 2006

WWJD? This. This.

Matt Heerema said on April 29, 2006

Bravo. I agree with Nathan, you're making me feel completely inept. :)

Ilya Radchenko said on April 29, 2006

Totally awesome,. the dockable comments the contrast and the 2/3 column changer. Just excellent.

Matt Brett said on April 29, 2006

Very nice job Mr. Snook! You definitely did a great job of presenting additional related content and I like how you've almost over-explained things by creating a paragraph out of what is normally presented as stats - ie. post date, comment count, etc.

I think I'll be Rebooting a day early again and go live tomorrow some time. Exciting times!

Seth said on April 29, 2006

There seems to be an issue with the style for the search box at the top of the page in Safari. I'm getting white text on white background.

Jonathan Snook said on April 29, 2006

Hey everybody, thanks for the fantastic feedback. Much appreciated!

assaf: all micro-widget settings should be stored in a cookie. Not sure why this wouldn't be working for you.

For everybody else: I've adjusted some of the styles. As for outlines on the top-nav, since this only happens while navigating, I'd rather users see the feedback that they've clicked on something than not so I'll be leaving it in. It's a side effect of the particular image replacement technique I'm using. Home page contrast styles should be fixed so that headers can now be seen in dark-on-linght mode. Aritlce titles are now clickable.

Still more stuff to come... :)

Jonathan Snook said on April 30, 2006

assaf: I think I've discovered the cookie problem. I wasn't setting the path which meant the home page retained different settings than the archives. It should be fixed now.

Johan said on April 30, 2006

cum laude! A +

Johan said on April 30, 2006

maybe set a min-height for the comment box- one line txt makes the avatar box
jump out a tad in Moz 1.5 FF Mac OSX

Eberth said on April 30, 2006

wow, awesome man! i love this new design, is it all css?

Su said on April 30, 2006

Interesting. I like overall, but the column switcher bugs me a bit.
I clicked it, then my reaction was a bit, "Yeah, and?" What if rather than just toggling, the content column expanded to absorb the space? As it stands, I don't really see any benefit to the widget. I'd have thought removal of a bit of visual distraction, but that's a non-issue after just a page of content.

Viking KARWUR said on April 30, 2006

congratulations... nice design...

Jonathan Snook said on April 30, 2006

Su: the column collapse was specifically for those that complained that the site was too wide. This way, they can collapse it to something that'd fit an 800px wide screen. A little superfluous but I wanted to add in some toys. :)

Joseph Wain said on April 30, 2006

The little arrow that makes the comment input box float is highly undiscoverable. I only noticed it by chance.

Also, when the comment inputs are floating, they ride underneath the "on topic" box at the top of the middle column. (Firefox 1.5/WinXP)

Tom S. Weber said on April 30, 2006

Nicely done! But I also prefered your previous design. I don't know but I can't set about sIFR...honestly I don't like this text-replacement method.

However...perfect contast!

Regards

P.J. Onori said on April 30, 2006

Well done, I like the fact that the design is definitely different, but it still has the same basic feel. Very nice work.

Jonathan Snook said on April 30, 2006

Joseph: The "discoverability" of the arrow was meant to be that way. The default functionality of the form provides no limitation to the usability of the site (in comparison to most other blog sites). It's simply a bonus. Much like the Ajax-search. If you never use the search, you never use it. It's just an added bonus.

Also, the fixed-comments are meant to ride under the On Topic box. I'm not loving it but it's a compromise until I can come up with a better solution.

Tom: I knew not everybody would like the new design. It's inevitable. I'd be interested to hear your issues with sIFR... I find it adds more personality to the site without making the page overly heavy (download-wise) with images.

raz said on April 30, 2006

Hey, this is cool man... you have some great ideas, keep it up!

Allen Holt said on April 30, 2006

Very, very nice work! I really liked your old look, but I think I like this one even better. I especiallylike the contrast switcher. Nifty!

(The way the sliding mechanism covers the comments form when it's docked and near the top of the page freaks me out a little bit, but that's really my only quibble.)

Pat Allan said on May 01, 2006

Just a heads up that you've been featured by Web Creme

And I quite like the new design's options and special tweaks.

Su said on May 01, 2006

Toys: Fair enough. Just not the approach I'd thought you might be taking toward the widget.

Tom S. Weber said on May 01, 2006

Sure, sIFR is more dynamic than simple background-images wchi you're replacing. But for limited using, I think sIFR wouldn't be as nice as simple method. If there are a lot of text to replace, yes.. sIFR rocks..

But what about PC+DTR? :)

weisheng said on May 01, 2006

Nice reboot! Lime green is supposed to be THE official colour of Web 2.0.

polo said on May 01, 2006

Hey, nice re-design/align!

one thing i noticed, if you have few comments (two here:
http://www.snook.ca/archives/000576.php)

your dockable comment section does not get out from under the onTopic section....

Assaf said on May 01, 2006

Jonathan: it's fixed, the cookie works now (:

Marko MIhelcic said on May 01, 2006

Great Reboot ! Cheers Jonathan

Jonathan Eckmier said on May 01, 2006

Great job on the redesign Snook. I like the toggles for contrast and width.

Nadim said on May 01, 2006

Very, very nice. The colors and the organization is flawless.

Congratulations.

Adam said on May 01, 2006

Love it!! Brilliant peice of work!

WD Milner said on May 01, 2006

I guess I'm the odd man out. I find it moody, depressing and difficult to read. The previous design was bright, more upbeat and MUCH easier to read.

Bruno said on May 01, 2006

Very nice redesign, glad you can join us on the may first reboot. Love the very cool collapsable divs. Congratulations.

John Locke said on May 01, 2006

journal is not a verb!

Jonathan Snook said on May 01, 2006

John: True enough, it isn't. :) It took me a minute to figure out what you were referring to but it's now fixed.

Sherwin Techico said on May 02, 2006

Definitely going down as one of the great Reboots of Spring '06, not to mention ... its so hilitey green! Who can miss it?!?!

Vesa Virlander said on May 02, 2006

Really nice work! Allways loved these "dark" designs.

Graham B said on May 02, 2006

"I guess I'm the odd man out. I find it moody, depressing and difficult to read. The previous design was bright, more upbeat and MUCH easier to read."

I'm with you on that one - I have to squint to read the majority of the content, and increasing the text size doesn't help much since the site is so dark! This is especially difficult on the comment form when it loses focus - which happens often if you want to refer to existing comments. The contrast switcher is a nice idea but doesn't address these problems.

There's some great use of JS/CSS here but maybe at the expense of usability...?

Jeff said on May 02, 2006

Hey man, congrats on finally getting it done at least. That said, I find it MUCH harder to read than your previous site. Not sure what the allure is with black backgrounds but there is really not much nice about them, especially when you use something other than white for the font color. Glad you kept the fixed comments but it looked much cooler before.

Beth said on May 02, 2006

Nice! I see a nice homage to Veerle's brillant redesign - it seems black is becoming a new standard (

Rob said on May 03, 2006

Great job bro. I love how you kept the lovely green and the sticky comment box... BRILLANT!

Steve White said on May 03, 2006

For some reason I just posted this on a previous entry, sorry for the double comment...

Long time reader here, first time commentor. I just found an issue when you have a comment error. The page reverts to the old style and all of the other text is garbled across the page.

Andrew Faulkner said on May 03, 2006

I love the new style. I loved the old one bu the new one sticks out as something different.

ONe thing I'd suggest is to lighten the text in the comments and footer. I am struggling to see them.

kartooner said on May 03, 2006

I tried imparting wisdom yesterday, but my comment seems to be gone.

Anyways, this looks superb Jonathan! I love the contrast switcher (genius!) and the dark color scheme, it really, truly shows your Zorro-like personality.

You know; "From the darkness, swift as the wind, one Canadian, on a mission to change the face of the Javascript world, one sloppy code line at a time."

Oh, and my site is currently being redesigned, I just need to finish up some needed illustration.

Anyways, again, looks superb! :)

Jesse J. Anderson said on May 07, 2006

I think I commented on this one in the 9r forums but still gotta say... very nice man. love the green =)

Zikomo said on January 16, 2009

Hello. I don't believe in intuition. When you get sudden flashes of perception, it is just the brain working faster than usual. But you've been getting ready to know it for a long time, and when it comes, you feel you've known it always.
I am from China and also now teach English, tell me whether I wrote the following sentence: "Get helpful tips on resume and cover letter writing that will make your resume stand out."

Best regards :p, Zikomo.

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.