Blick Blocky Retro

After a wild couple days, it's live. Well, live-ish. Blick Blocky Retro, the ninth iteration of this veritable site, has made its debut.

Why?

I've been working on this redesign for close to a year now. It has simmered, occasionally come to a boil, only for me to turn off the heat and step away from it. However, recent troubles with Dreamhost have finally made me flip my lid. The site performance has been sporadic with not-so-uncommon 500 errors and I just couldn't take it anymore.

Like a midnight dash to escape the rent, I've pushed this design live on a new dedicated server — well, old, actually. It's the server that powers SidebarAds. I also completely rewrote the site from scratch using CakePHP 1.2 — although this is still the beta. I haven't had time to update things, considering this last minute change.

What was wrong with Dreamhost?

For the longest time, I advocated Dreamhost and when i was on their shared hosting environment, things were simply peachy. Seriously. I experienced little to no downtime and decent performance. Then, they introduced a new server called Private Servers. It's supposed to offer more control over resources and better performance. At least, I think that's what it said. Instead, I got constant downtime, even when there wasn't much load.

I still have a bunch of other sites on Dreamhost and I have no plans to move those off any time soon. Moving sites is a hassle. For example, I screwed up the MX record when I changed DNS servers and received no email for 12 hours. Wheee! Thankfully, everything should be back to normal.

What about the design?

I should probably talk about the design, shouldn't I? Well, here it is. Obviously, this is heavily inspired by all the retro 70s chic that's going around. However, I wanted to take this redesign to simplify some things.

Splash Page

As some may remember, the "main" page of this site was at the /jonathan/ sub-folder. There was a splash page that had a brief introduction to who I am. Why did I have a splash page to begin with? Turns out, there's a story to that, and what's interesting is how often we see this happen in every web site.

The main page was originally a family portal with links to myself, my wife, and eventually, my first born. However, despite all my efforts, my wife never took on the task of writing and due to family concerns, the other link was removed. By this point, however, I had already established my section as the default place to go to. Any time I left a comment somewhere else, it'd point to my section, and not the index page.

A few months ago, while thinking that I'd get rid of the splash page, I've been using the clean Snook.ca as the URL that I leave everywhere. Now that the site is launched, I have finally gotten rid of the splash page and made it the main page. No more /jonathan/. Just / is okay by me. (Slash is okay by me, too).

It's three-dee!

Snitter Theme: BlockerThe original idea came from a design comp that I had put together for Snitter. I took that and continued to work it into what you see here before you. One of the interesting parts was trying to figure out how to get the elements to wrap. For anybody that has been doing CSS for some time, they might think, well, that'll be a couple elements with some a series of sliding-door images.

It seemed like a hassle. I didn't want to have a bunch of CSS to apply different background colours and I didn't want to have 3 or 4 elements every time I wanted to do an element that wrapped over the slanted edge.

My initial experiments started in Internet Explorer, since it's the largest hurdle. Get the hard stuff out of the way, as they say. Much to my surprise, IE was the easiest part of the equation. Using the matrix filter, which allows DOM elements to be manipulated, I was able to take an empty element and warp it across the slanted edge to get the effect that I wanted. Awesome! It even resized the element for me. This is all it took:

.transform  { filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M21="-.5"); }

The sizingMethod property resizes the element appropriately and the M21 is one of the points upon which the transformation occurs. To be honest, I still don't quite understand how matrices work but I finally found a number that worked, so I won't complain. My skew was perfect!

But what of the other browsers? Canvas was the most universal solution I could think of. So, I set to work dropping canvas tags in all the wrap containers and applying a matrix transformation:

	var ctx = e.getContext('2d');
	ctx.fillStyle = bg;
	ctx.transform(1, -.5, 0, 1, 0, 0);
	ctx.fillRect (0, 20, w, h);

Notice the -.05 in there is exactly like it is in the IE filter example? Yeah, it's the same thing. Within a year, however, I'll be able to replace this code with CSS transformations. Webkit/Safari already support this and Firefox 3.1 is supposed to. I haven't looked at Opera support but it wouldn't surprise me to see it come down the pipe.

Multiply blending like Photoshop

Now, here's the other problem I ran into. While I had the elements wrapping, I still had to manually set the wrapped element background colour manually using CSS. Finally, in my desire to push this up live, I decided to find a better way. In this case, JavaScript.

In the original Fireworks design, I used the muliply blending option to create the darker overlap colour along the slant. I decided to do a little research to see if I could do the same thing with JavaScript. As it turns out, it's pretty easy: Take one colour value, multiply it by the other colour value and then divide it by 255 (the maximum colour value). The default RGB of the slant was (235, 242, 204).

I snagged the background colour of the original container and then split it into its composite parts of red, green, and blue. Here's the JavaScript magic:

rgb[0] = Math.floor( rgb[0] * 235 / 255 );
rgb[1] = Math.floor( rgb[1] * 242 / 255 );
rgb[2] = Math.floor( rgb[2] * 204 / 255 );

At this point, I decided to strip all the canvas tags I had in the template and moved it to the land of JavaScript. The script is now responsible for finding all the page containers, dropping canvas elements in, and making them look pretty. Then, if people don't have JavaScript, at least they don't see square elements in awkward places.

Didn't you say simplify?

Oh right. As I was saying, the simplification came both on the server-side — by rewriting all the code — and the client-side — with less content on the page and essentially a two column design instead of the 3 columns I had before.

With the backend getting a nice rewrite, much of the code has been simplified, uses more CakePHP idioms, and just simply uses less code. As a result, the performance of the site should be improved.

On the content side of things, I was beginning to worry that the sidebars were getting too bulky. Links to projects and books have disappeared but Delicious links now appear on every page. I might switch this up a little bit but haven't entirely decided now, yet.

It's not done

Despite all this, it's definitely not done. The comments, for example, were just thrown in so that people could get back to commenting. The design of which will change dramatically. I've also got a few other tweaks here and there that need to be made. But now that I'm on the new server, I can relax.

If you come across any dead links, by all means, let me know. I have literally 7 years of debris strewn about this site and I'm sure some of it got missed in the transfer.

It has been almost two years with the old design. Plenty of people liked it, and so did I, but I wanted to experiment and this is what I got. It's not perfect. On a technical level, though, I'm happy with it.

I hope you like it.

Published January 16, 2009 · Updated January 16, 2009
Categorized as Design
Short URL: https://snook.ca/s/926

Conversation

82 Comments · RSS feed
Dan said on January 19, 2005

Great concept and implementation, Jonathan!

One dead link - the slicing screencast from (http://snook.ca/archives/design/slicing-photoshop-fireworks) -- returns "Error: The requested address '/files/sc$this->normalizeEntities16bit("45")export.mov' was not found on this server."

Jonathan Snook said on January 16, 2009

I just noticed a weird issue, and apologies to anybody that has already commented but comments were getting over-written instead of creating new ones. It should be fixed now.

Dimitris Giotas said on January 16, 2009

Great redesign. Completely different then the last one.

One problem on the homepage is that all the latest articles have the same text.

José Carlos said on January 16, 2009

Congratulations on the redesign, it looks awesome. Great work!

Jonathan Snook said on January 16, 2009

@Dan: uploading the video now.

@Dimitris: Whoops. forgot to change a variable name there. Fixed!

@José: thanks for the compliment!

jojo siao said on January 16, 2009

Hi,

I like the retro idea! love it!
but, I noticed something that looks unusual to me.
http://www.flickr.com/photos/filchiprogrammer/3200608189

Keeto said on January 16, 2009

Nice, I love the color scheme (probably because my site uses a variation of the same).. Your site looks better everytime!

@jojo_siao: It's meant to look "cut" because of the perspective used.. :)

Mike T. said on January 16, 2009

huzzah! what a pleasant surprise to come here this morning to this new design.

nice work. :)

Travis Quinnelly said on January 16, 2009

I dig the retro boxy look. Looks good Snook...looks good.

Keith said on January 16, 2009

Groovy baby! Groovy. Dig the Atari 80's video game vibe.

Michal said on January 16, 2009

Love the design.
Stumbled upon this site from an article on Smashing.
Instant bookmark!

David Walsh said on January 16, 2009

On a few of the pages (for example: http://snook.ca/archives/business/) the "Snook.Ca" link's hover action creates a green background across the entire header instead of just the link itself.

chris said on January 16, 2009

great unique design, I like it :)

good job!

Neal G said on January 16, 2009

Very cool new design. It reminds me of an old site I used to visit...I believe it was cartmanland.com but has since gone offline.

Dan said on January 16, 2009

I like it, although the text in the sidebar could be a little bigger.

Andrew Kelly said on January 16, 2009

The site looks great! I like the changes you've made since I saw it last.

Cheers!

Chris Wallace said on January 16, 2009

Dreamhost has been pretty good for me (not my personal website but one client is on it), I hope the PS doesn't go downhill on me :)

Franksta said on January 16, 2009

Design and type just fit perfectly; I absolutely love the redesign!

Matt Brett said on January 16, 2009

Nicely done (once again), Jonathan!

You never fail to deliver refreshing change to an otherwise boring internet, and this design is no exception.

Franksta said on January 16, 2009

Design and type just fit perfectly; I absolutely love the redesign!

Ethan said on January 16, 2009

Mr. Snook, this is brilliant. There's something very ExciteBike about the look, which, well, I freaking adore. Great work, as usual.

Dave McNally said on January 16, 2009

Just what the internet needs! Something that doesn't follow everything else.

Great work, congrats :)

SayB said on January 16, 2009

whoa ! this is totally psyched ! .. reminds me of Bee Gees 'Stayin Alive'

George said on January 16, 2009

I guess I'll be the first to say I like the old site better! Nothing wrong with this one, it's fresh and unique, but overall the old one was smoother.

Chris Coyier said on January 16, 2009

I think it's really strong. Nice work Jonathan.

Jonathan Snook said on January 16, 2009

Thanks everybody for the really great comments. I have to say I was a little worried pushing this out live.

@George: I understand what you're saying (I think). With that said, I have some changes coming down the pipe (when I have time) that should bring it up to where I wanted it and hopefully to the point that would bring your around from the old design. :)

Jake Smith said on January 16, 2009

So has your blog always been powered by cake or did you use wordpress?

Jonathan Snook said on January 16, 2009

@Jake Smith: It has been powered by CakePHP for awhile now. Maybe a year or two now. Before that it was Movable Type which I installed in 2003.

Brendan Falkowski said on January 16, 2009

Loving it, especially the design on post dates. Wishing for #head{margin:0 auto;}, bigger click-area for #header link, and the triumphant appearance of site search.

I'd be interested in learning about your URL redirection since the departure from snook.ca/jonathan/.

And yay for dropping IE6.

Alex Holt said on January 16, 2009

I have to say, i'm with George - the old site was slicker.

Although, got to give it to you... this site is unique - i've not seen anything quite like it... ;)

Lea said on January 16, 2009

I love it Snookums!!! The colors are so fresh. I also think the pattern you chose for the BG is perfect.

My only point is that I'd probably render "Snook.ca" in a custom retro typeface instead of just having it as normal text and in the same scale as the site description.

<3 it.

M. Keefe said on January 16, 2009

Wow, new look and its awesome. This is certainly unlike I have seen before.

I do agree with Lea on the logo idea, the simple text gets lost and without that "fancy S" its not the same.. even though I did notice it hiding in the footer of the web site.

Great stuff!

Ivan said on January 16, 2009

Amazing as usual ;-)

Adam said on January 16, 2009

Congrats on getting the redesign out the door! Having just gone through the same process, I know it can be tough.

Alan Tucker said on January 16, 2009

Glad to see everything is running smoothly now :-)

Miles Johnson said on January 16, 2009

Loving the site, just one suggestion (not design wise).

I always come here looking for your CakePHP articles. But I could never find them right off the bat unless I do a Google search. Perhaps create a CakePHP article category?

Oscar Cardoso said on January 16, 2009

Nice design.
Period!

Garret Bolthouse said on January 17, 2009

When I saw your headers I was like what font is that!?!? Very nice use of Calibri, wishing it were more abundantly available to all who come here. It really makes the site.

Andy said on January 17, 2009

Not bad. still need some work on the details though, but not bad.

I'd like a big[ger] 'Snook.ca' text (and maybe a font change) in the header and you might want to fix the logo in the footer for starters.

Jason Beaird said on January 17, 2009

Looks awesome, Snook! I love the fact that you've kept green as a consistent centerpiece in each of your designs (that I've seen) so far. To echo the previous comments, this is something completely different and fresh. Great work!

Szymon said on January 17, 2009

Now I know, why you were a little bit slower with replying on emails ;) Great work! Gimme such too ;)

Malcolm said on January 17, 2009

This retro looks cool too.. amazing work..

Graham Bradley said on January 17, 2009

Loving it!

Daniel Marino said on January 17, 2009

In all honesty, I wasn't too keen on the redesign at first, but haven't just read through an entire article, I'm falling in love. Great job, and I love reading about all the technical tricks used to make certain elements of the site work!

Detruk said on January 17, 2009

Hi Jonathan,
I follow your work since few month. This redesign of your site is the time for me to write some words too you.
Thanks for sharing your knowledges on CSS, your work is amazing. The new design of your website is great.
You're definitely the re-incarnation of god in the css world. [Maybe too much?!..sorry;) ].
Ps:I'm french, sorry for the bad english language.

Jonathan Snook said on January 17, 2009

@Miles Johnson: The categories that you see on the left are a subset of all the stuff I've talked about. It only shows topics that I've talked about within the last 6 months. With that said, I understand the concern and I might switch it up to show all categories.

@Andy: I went with the smaller snook.ca text in the header because I felt that I didn't need to sell it. I also liked that I could fit it into the 20px band quite snugly.

@Daniel Marino: I'm glad it's working for you!

@Detruk: You're too kind and your english is pretty good. No need to apologize!

Thanks again everybody for the comments, criticism and suggestions!

Andy Kant said on January 18, 2009

I love the new redesign. The new layout just has really good flow for navigating content (plus the tags column makes it really easy to jump around) - may have to steal some ideas. ;)

Oliver Treend said on January 18, 2009

Wow, I really like this new design!!

Your old design was really good. This one's amazing!

I went to read an article, not expecting the design to have changed because it was already so good. The page loaded, and I though, "What? Why has it changed? Oooooooooh!! It looks so nice! :-P".

Normally when a site gets a redesign, it takes a while to sink in and get used to. This changeover seemed perfectly natural!

Also, well done on rebuilding your backend from scratch. These things take a lot of time, effort and debugging - even when you use Cake!

Well done, you've done a wonderful job!

Johan said on January 18, 2009

It looks great. You kept most of the structure but freshed up the design. The curvy looks have a little from http://www.hicksdesign.co.uk/

Johan said on January 18, 2009

It looks great. You kept most of the structure but freshed up the design. The curvy looks have a little from http://www.hicksdesign.co.uk/

K said on January 18, 2009

Reminds me a bit of the http://acko.net/ theme. Pretty cool, though.

Jonathan Snook said on January 18, 2009

@K Don't remind me!! Gah, I've been sitting on this design so long that when I came across Acko, I almost scrapped it entirely. In the end, though, I felt my approach was still worthy of attempt and decided to stick with it.

redwall_hp said on January 18, 2009

It looks good, though I prefer the old design personally.

And congratulations on finally kicking the subdirectory. :)

Eli said on January 18, 2009

Not loving the font used for content, but overall it's very unique and cool.

AsceticMonk said on January 18, 2009

It is simple, yet pleasing to the eyes and the graphics create some depth. Awesome work!

Fouad Masoud said on January 19, 2009

love it. love the colors, the layout. everything.

gr8 job man.

Stijn Huyberechts said on January 19, 2009

hi,

I was checking out the source of the website (just a quick peek :) and noticed you use the html5 doctype. But there's no sign of 'new' html5 tags, or was my peek not long enough?

Anyways, very nice design!!

Jonathan Snook said on January 19, 2009

@Stijn Huyberechts: I could start using the new HTML5 tags but the need to use JavaScript to "turn on" the elements in Internet Explorer wasn't a great fallback for me. I'll hold off on that front for now. I'll leave it to the trendsetters to work out all the kinks. :)

Andy Laub said on January 19, 2009

As I relaunched my own site this morning, I found myself thinking "I wonder what Snook's site looks like these days." Funny that you have just relaunched as well - looks great!

Evan Byrne said on January 19, 2009

New site looks good, but I'm still missing the magic of the old site...

Paul Stamatiou said on January 20, 2009

Looking good, but when are you gonna walk to plank to Rails? You've been using Cake for as long as I can remember and Rails is the flavor of the week. ;-)

See you at SXSWi!

Miles Johnson said on January 21, 2009

Another thing I noticed are your page titles. The sub pages/blog posts are on the title and dont have your name in it. Unless you did it that way on purpose :p

Lance Fisher said on January 21, 2009

I really like the new design! Good work!

Brad said on January 21, 2009

JS Error with your CTX stuff in FF2(hope this pastes okay):

ctx.transform is not a function
turnOnOffsets()snookv9.js (line 60)
init([div.container, div.container, div.container, 5 more...], function(), undefined)jquery.min.js (line 12)
init(function(), undefined)jquery.min.js (line 12)
turnOnOffsets()snookv9.js (line 11)
[Break on this error] ctx.transform(1, -.5, 0, 1, 0, 0);

Rick said on January 22, 2009

Loving the new design...simply inspirational!

As for DreamHost....no point posting telling the world you hate them....everyone does :p

Seriously though, people pay for bargain bin hosting and expect it to actually be usable. When you can go elsewhere and pay a few $ more and get a very reliable service!

I recommend:
-JaguarPC (for shared)
-VPSLink or FSCKVPS (for VPS)
-ResellerZoom (for reseller)
-SoftLayer (dedicated)

Additionally I've heard people rave about MediaTemple, but never used them myself (Quite pricey!)

Anyway....love the new site, keep it up! :)

Manuel said on January 24, 2009

Good job, at first I did not notice the 3d effect.

Jack F said on January 24, 2009

Hi Mr Snook!!

I really really love this design, but I can't find a link to a RSS feed? Is there one?

Thanks!

Dennison Uy said on January 27, 2009

Oh my gosh it's snook 3D!

Phil said on January 27, 2009

Lovely design, very well thought out.

Try resizing your browser window in Firefox though..

Timothy Armstrong said on January 27, 2009

@Phil what's wrong with resizing it?

Sulcalibur said on January 27, 2009

Woah! I just visited the site and it look stunning mate. Kudos on the job.

Paul Decowski said on January 27, 2009

Fantastic design. One thing I'm not sure about, though: I think there's not enough contrast in "Deliciously linked" section in hover state.

OK, I just tested it using your own tool (http://www.snook.ca/technical/colour_contrast/colour.html) and it doesn't pass :)

Jonathan Snook said on January 27, 2009

@Paul: Ha, yeah, there's no doubt some areas that could use more contrast. To be honest, though, the text is still readable. The hover state is indicating that it is actionable (while still being readable for — I suspect — the majority of people).

Idil said on January 28, 2009

this is by far my favourite design. it's so fresh looking. and so 3Dish! wicked job mate.

Marko said on January 29, 2009

I can't belive I missed the launch!.(read: slow on reading my RSS) loving the retro style!

Graphic Design said on January 30, 2009

A great piece of both design and explanation. I admire the late 70's design very, very much. Good job, man!

Sean McArthur said on February 02, 2009

I really do like it alot. However, I find the archives on the left to be confusing how the run together (category and then yearly). Some sort of separation could be good.

I also preferred how you designed the author comment. I prefer being able to find your comments out of the bunch.

Tom said on February 05, 2009

Where did you hide the link to the rss feed?

WD Milner said on February 05, 2009

I like it. One thing - I seem to get a pattern misalignment as can be seen in the following screenshot. The bottom of the left column is misaligned with the rest of the pattern too.

Just ignore me if this is intended *grin*

Screenshot: http://www.baud.ca/snook-retro-screenshot.png

Tom said on February 17, 2009

Neat design, I didnt notice the 3D effect till I scrolled into the comments section. And before I noticed the 3D effect I didnt like the design at all, however now its kinda neat!

The old sites 'fuzzy glow' was one of my favourite bits.

nivedano said on March 01, 2009

Great redesign. Completely different then the last one.

Steven Wittens said on March 24, 2009

I'm the designer of the aforementioned Acko.net site... have to say, I love your design and it would've been such a shame if you'd canned it. Plus, I'm glad to see someone else used the trick of using canvas to render parts of the design ;).

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.