Yep, I’ve launched my reboot. If you’re a regular, go ahead and clear your cache and give this page a good refresh.

That means that if you’re reading this in your feed reader, you’ll probably want to actually come see the site. Please check it out, and let me know what you think. If you’re new to this site, welcome, and I hope you enjoy it.

As tempting as it was to start off my reboot with some sort of boot to the head joke, I’m not going to do that. Nor am I going tell you a bunch of bad “Web 2-point-oh” jokes (…yet). Instead, I’ll be a good designer and talk write about the design process behind this reboot as well as some new features. This is a little bit longer than most articles I’ve posted here, but what can I say–there’s a lot to cover. I almost split this up into a couple posts, but I really wanted to give you the big overview at one time. So with that said…

Note: If you’ve never seen version one of this site, here are some screenshots so you’ll know what I’m talking about.

A while back I had written some posts about rebranding myself and posted some pictures of my new business cards. This design is a continuation on that rebranding, an attempt to rear in some of my other online identities into one.

CSS, JavaScript, and other little effects

As you have probably noticed, I had lots of fun with transparent PNGs this time ’round, the header being a prime example. If you haven’t already, hover over those links in the navigation–you’ll notice that the links’ background on hover will show through beneath the header image. Of course, IE6 threw a fit, but it’s working now.

On the same subject of transparent PNGs and links, hover over some links in this article. Notice anything? It was somewhat of a whim (I mean what kind of fool would put curved corners on everyday links? Apparently, I would.) that turned out to be pretty dang sweet if I say so myself. This one IE6- just won’t do without too many compromises, so I let it be. It’s really nothing more than some pretty aesthetics, and I’m sure most IE users are used to missing those by now. The real solution? Get a better browser.

I’m also using Prototype now, and I’ve added some sweet effects (such as the Elsewhere dropdown menu and the new fade effect on the Noteworthies/Snippits panels) through Script.aculo.us. I absolutely fell in love with these while developing version 2 (will…resist…adding…point…oh…) of this site, and plan on using these much, much more often.

When I was developing the Elsewhere menu I had tried to make my own arrow icon, and frankly, it sucked. I didn’t really feel like trying to make another one, and that’s when I found mIcons. Like with Prototype, I absolutely fell in love with them. So I downloaded them, uploaded the arrow you see me using, messed with the CSS a little–and it was perfect. For the icons you see next to archives, tags, categories, and latest posts, I needed something else. I didn’t feel like making more little icons, so of course I went to Silk Icons and was able to find some that worked great. The archive images were slightly modified for color. Mark, if you’re reading this (which I’d be shocked if you are), the search bar you’ve got on that page is a brilliant time-saver.

New Features

As if people need yet another way to browse the site, I’ve implemented tagging. I mean, one can never look too 2.0, right? (kidding…) Just click one of the tags to the right and take a look at the tag page, it’s even got an awesome tag cloud. I’m sure somebody will find it useful.

I’ve also built a new contact form…And yes, it’s built with all sorts of AJAXy goodness. Try it out, send me some mail, just don’t even try to tell me that your name is “asdf.” Your message will be deleted immediately.

Gravatars are now supported in the comments, so if you don’t have one yet: Get one.

The Colors

I’m not going to go too deep into this, but I just wanted to say… I kept the pink. It’s not quite as obvious as it used to be, but it’s there. Just look for it.

Process behind the homepage

One of my big goals in this redesign/realign/reboot/whatever was to give more focus to my photography. In the first version of this site, I had a bar under my header giving the most recent uploads to my Flickr account. There were a couple of problems with this:

  1. If I had just uploaded several new photos but wanted to emphasize one particular photo above the rest, there was no easy way to do that.
  2. They didn’t look very important.

If I scratched my brain for a while I could probably make up more reasons for you, but these were really my big two. The solution?

  1. Move the Flickr images so that they are right next to the latest post, and about the same size.
  2. Show one larger, “featured” image.

It should be pretty obvious how this solved my problems, so I won’t bother pretending that there’s any deeper meaning here.

I also significantly changed the layout, as I wanted to get away from the old, typical blog layout. In fact, I completely eliminated any sidebar on the homepage. With the way the homepage is laid out now, I think the content is presented in a fairly natural procession.

The first thing a visitor will see is the header, navigation, search bar, and jump bar. If the visitor already knows what they came for, they need not go any further.

If they glance down the page a little, they’ll see a snippet of my latest post as well as some of my photography. The Recent Ramblings bar is also located right there. This lets return visitors immediately see what’s new, and lets new visitors quickly see a snapshot of what happens at the site.

If they scroll down a little further (or use the jump navigation), they will come to a small blip about me and see a little bit more about the site through the Noteworthies, categories, and what not. Return visitors can switch to the Snippits (yes, with an i–I think it looks better that way) panel.

If visitors wish to dig even deeper, they can scroll (or, again, use the jump menu) to see snippets of my ten latest main posts.

So it’s a fairly natural procession, and by the time visitors scroll through the homepage they should have a great idea of what goes on at the site.

Process behind the secondary pages

The secondary pages were actually influenced heavily by magazine layouts. While designing and developing this site I could often be found in front of my LCD screen with a magazine on my keyboard, a few more magazines open on the side, and a couple JavaScript books sitting on top of them. Then of course there would be the obligatory scrap paper, books, magazines, and other junk stacked on the side for future reference.

The typography was one thing greatly influenced through magazines, from headings to subheadings to the main text itself. You’ll notice that unlike version 1, I did not justify the article text. Instead, I focused on proper spacing between the letters and words. Each line is approximately 60 characters long (count them), which is widely considered the ideal line length for reading.

So, what’s next, Elliot?

Now that’s a good question. There should be some great articles coming out this month, so be watching the RSS feed. (Lots of sweet code to play with.)

But enough of me talking, what do you think?