A new look for a new season

rabbitpoets-suffusion
Goodbye Rabbit Poets from the past. You will be missed. Sort of.

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.

The redesign

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.

Thanks

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

Anyway…

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!

23 Replies to “A new look for a new season”

  1. Looking good, reminds me of my favorite team, the NY KNicks =3. Can’t wait to see how it looks with a cute header. Also, glad some of those blogging posts I do were of use to you!
    .-= Kabitzin´s last blog ..Durarara!! 08 =-.

    1. It’s funny you say that, because for the longest time I had a very light background, I never really got used to the dark background I’d been using recently.

  2. Personally, I really like blue, so I’m liking this new design scheme. I’ve been taking a course on website design this semester, and I think I need to start thinking about some retooling on my team’s blog.

    It’s nice to see someone who’s thinking about efficiency, too.

    And finally, I kind of like the current banner image. Maybe you should just keep it like that. :party:
    .-= Rakuen´s last blog ..Dance in the Vampire Bund 09 – Lost Boy =-.

    1. Thanks! Although I have no formal design experience, learning about it has been a blast. Makes me wish I’d taken a class or two back when I was in school.

    1. Thanks! Yeah, I like the footer widget feature. Otherwise, the tags and categories are just way too long and push everything down too far in the sidebar. Now to figure out what to balance that 3rd footer column with…

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.