I’ve actually been tinkering with this redesign for the past 3 months. Even though I feel like it’s still only 80% ready, I finally decided to launch the new look, not because of the new season, but because I was getting sick of looking at the same damn test post while I was dicking with CSS code. Plus, I’ve been tweaking this design long enough where I started getting bored of it, at which point I thought, "uh oh" better release it before I Duke Nukem’d it for a newer, sexier model.
There’s definitely a lot I’ve learned from this redesign. Most of all, I feel pretty comfortable with CSS now. I’m familiar with the syntax, I know what properties to look for. Definitely much more so than I was before. But even moreso than the coding, I think the toughest part was figuring out the right color scheme. It took me more than a month to settle on something I liked. I wanted to have some bright accents, which is why I went with the orange, a color I typically hate. And then I accidentally stumbled on the blue as the main color.
Otherwise, the goals for this design was to make things faster, more functional and more clickably-delicious.
As far as faster goes, I think I’ve accomplished that to some degree.
- My Yslow score has gone from a 63 to 71 on the home page, and a 57 to a 66 on post pages
- According to WebPageTest, the site now loads in less than 1/2 the time (from almost 9 seconds before to about 4 seconds now), and makes 2/3 the number requests it did before
- I think there’s still room for some improvement though (chasing a better Yslow score has become my white whale)
As far as more functional, there were a few things I wanted to incorporate:
- A better search – I must’ve referred to Kabitzin’s google search post about 50 times. Very helpful
- A comment toolbar – Nobody but myself knew that I had a "spoiler" tag enabled on the comments. Not that anyone should ever use it. 😉
- Not really functional, but the site now validates as XHTML 1.0 strict! (Although I doubt I deserve any credit for that. Those props should go to Ian Stewart for building such an excellent framework.)
- Non-image based drop shadows
- Other things that I can’t remember
And as far as clickably-delicious, I wanted to incorporate some of the new CSS3 effects. So there’s a healthy smattering of box shadows, border radiuses, opacities and scalings (hopefully I didn’t overdo it). So anytime you hover over a button, or click on a form field, you should get some sort of visual response that should in theory, make you want to click it or continue engaging with it. I suppose taste is subjective, so again, hopefully I didn’t overdo those effects. They’re as much for usability and accessibility purposes as for the deliciousness factor.
So some thanks are in order.
- Gargron for taking care of some PHP dirty work that was out of my league. Highly recommended, he was a true professional, a pleasure doing business with. I’d absolutely hire him again. (And you should check his and mefloraine’s collaboration, Paper Dream – very cool.)
- Smashing Magazine and it’s network of blogs, because just about everything I learned, from CSS3 to color theory, I learned from perusing their posts over the past few months
- Kabitzin for his google search post I mentioned earlier, and actually his blogging tips category as well.
- Firebug for Firefox, Notepad++ and Filezilla. All indispensable tools.
- Hmm, I could’ve sworn this section would be longer… Hope I didn’t forget anyone
Still not done
Sadly, there’s still plenty left to do. Luckily it’s mostly under the hood stuff, so you shouldn’t notice much changing.
- Well, as you can see, I need to stick a cute image in the header. I’ll get to that… someday.
- Little nicks and nacks, like for example, inconsistent sidebar treatments
- Still figuring out what widgets should go in which sidebar
- Still redoing the blogroll. I plan on having the main list on its own page and then incorporating CCY & Gargron’s "Do you read" dual-custody baby somewhere on the home page. (I’ve finally started writing the blurbs)
- Testing across various browsers. While I had the stage site running, everything looked pretty good. But you never know what might happen when you transfer files over. (although you guys on IE6 are probably screwed. I don’t think it’s going to look terrible, but it’s not going to look quite right.)
- Other stuff I can’t remember
So, hopefully you’ll like the new look. If you notice anything wonky let me know. Or if you have any feedback (good or bad) that’d be much appreciated too!