Sunday (04/30/06)
The design process (or rather, “A Behind the Scenes Look at Elliot Swan’s Reboot”) 3:01 pm
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:
- 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.
- 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?
- Move the Flickr images so that they are right next to the latest post, and about the same size.
- 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?
I eat food. I listen to music. I sleep. Sometimes. I drink lots of coffee. I make pretty pictures. I talk to people. I believe in things. I write stuff. I take photographs. I have a laughing addiction. I am human. 
One word: AMAZING!
Excellent job on the redesign. Very complete and well thought-out. I’m diggin’ it!
@Luke: Thanks man.
Very sweet! I can’t wait to play around with it fully and of course drill you on the how you did its. So get ready!
Nice work Elliot. I’m not too sure about the nav bar, nor the comment form and I’d prefer it if the header logo was an anchor to the front page but apart from that, it looks pretty sweet.
Well done.
Awesome stuff. Same thoughts as Phu, not sure about the comments either, but everything is really awesome. Lots to play with. Nice IA.
I agree with Glench and Phu. I’m also a bit suprised that the search bar is not Ajaxed out… But besides that, great job. Looks like you put a good amount of time into this one…
Thanks all.
@Logan: I don’t really see a point in AJAX search bars…they just tend to be slow.
So what is it that you guys don’t like about the comments? The padding?
Ahhh I love the new layout!
And you still look as cute as ever (;
I like the new design - though there seems to be a massive transition between the main part and the comments. The front page is a MASSIVE improvement over the last one, as it is now possbile to see at a glance whether there is a new post and not worry about clicking exanding gubbins etc.
Therefore, I’m not too sure about the floating recent posts part on the front page - maybe it could be combined with the “Notewothies” further down?
I really like the middle section on the homepage - the lists and the clickies. Just nice. Very nice. The blue bar that runs across the top with the top, content, comments and say something links are a nice touch as well; gives it a Minty touch.
I also like the fact it validates as XHTML 1.0 Transitional - good job with that.
But yeah… I like it. Maybe make the comments the same width as the main body?
Not sure that the highlighted italics is a good thing though. Bad highlights.
I love the new design Elliot. You’ve gone out of your way to be different and I think that’s always key with a personal site. The suggestions that I’ve seen pointed out here so far are valid, but a few minor tweaks would help solidify everything.
The incongruity between the post body and the comments could be reduced by sticking to your fixed-width. Combining fixed with fluid in a single page layout always seems to feel a little awkward.
The margin between comments and the line-height of each one makes them feel unnecessarily tall as well.
The highlight background color in the comments (or anywhere with a dark background) shouldn’t be the same as the main content (or anywhere with a light background).
I know that you’re as much developer as you are designer, but remember that no matter which hat you’re wearing, you need to always pay attention to the details. Keep it up Swan!
YES! It’s done! Good job elliot! Now, arn’t you glad you held off! So, were you up at 11:59:59: last night?
Finally ! I found the pink! Well done Elliot nice and subtle.
@Everyone: If you haven’t found it yet keep looking.
@eddmun & Jason: I went ahead and changed the background color for <em> and <strong> on the dark background areas. I also took out some of the line-height in them.
However, as for all the padding/width in the comments…To be honest, I really like it. Though I see what you’re saying about the incongruity between them and the content, and I will definitely think about another way to solve that.
@Jake: I did it Sunday afternoon, I couldn’t hold off any longer than that. It was close enough.
On a side note, anybody notice how gravatar.com seems to have gone down today? :p They should’ve been prepared…
elliot elliot elliot…. what are we going to do with you. No self controle man.. no self controle…..
Naw, the fact that you lasted that long is worth a pat on the back. I dont think I could of done it.
I appreciate the bold/em background fix!
…and I found the pink.
I think I found the pink, but I’m partially colourblind so I can’t tell.
Oh and by the way, the cssreboot site is now up, so if you want to vote for me, please do.
Elliot, you shouldn’t link to the reboot site — I think your site has /.’ed CSSReboot causing it to go down again *laugh*
It’s absolutely awesome!
Nice one Elliot, I like what you have done here, the navigation hooks at the top are fun to use, if a little confusing at first but overall I think you’ve done a nice job…
Thanks guys.
Nice, nice. Very nice. I’m lovin’ it!
Awesome redesign Elliot! I gotta say there’s a lot of cool effects I wish I implemented as well. Very nicely done.
Really nice site, I have a google alert on “accessibility” and today I got an email with your site… so I’m digging it! Keep up the good work
Your reboot is now competing with your regular, so be careful
Style your submit buttions!
Nice site!
Really great site and redesign.
With compliments.
Sorry, but I don´t like dark colours on a website.
cool re-design, keep up the good work, greetz
I love the new design Elliot. You’ve fallen glimmering out of your way to be divaricate and I concoct that’s always key with a deprecating bearings. The suggestions that I’ve seen pointed out somewin our time about so far are certain, but a few minor tweaks would bolster concentrate everything.
The nonconformance between the post church-build and the comments could be reduced by sticking to your deep-rooted-width. Combining embosomed with kaleidoscopic in a single page layout always seems to caress a disgusting awkward.
The abut between comments and the line-height of each one makes she hear unnecessarily bombastic as comfortable.
elliot elliot elliot…. what are we going to do with you. No yourshade controle man.. no racial unconscious controle…..
Naw, the fact that you lasted that long is mark a pat on the bear out away. I dont think I could of done it.
Awesome redesign Elliot! I gotta say there’s a lot of cool effects I wish I implemented as well. Very nicely done.
melituric syngenism plantaginales minnehaha bessemer hundredal paroxytone herodian
Shropshire County Hotels
http://www.jameshargreaves.co.uk