A new look for a new season

by RP on March 15, 2010 · 23 comments

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 comments… read them below or add one }

1 Kabitzin March 15, 2010 at 12:30 am

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 =-.

Reply

2 RP March 15, 2010 at 2:51 pm

Eww the Knicks. At least I don’t have to deal with the losing and horrendous salary cap management. :p

Reply

3 Kabitzin March 15, 2010 at 11:30 pm

Hey, that salary cap got MANAGED!
.-= Kabitzin´s last blog ..Durarara!! 10 =-.

Reply

4 Shinmaru March 16, 2010 at 11:40 am

Next stop: Joe Johnson and re-signing David Lee. :P

Reply

5 RP March 16, 2010 at 6:27 pm

I miss the Isiah days. You guys were much more entertaining then. :emotion:

Reply

6 mefloraine March 15, 2010 at 5:17 am

Awesome. I have to say, seeing lighter backgrounds on this site is weird.
Cute header is important! :P
.-= mefloraine´s last blog ..Paper Dream’s Newsletter Released! =-.

Reply

7 RP March 15, 2010 at 2:51 pm

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.

Reply

8 mefloraine March 15, 2010 at 8:45 pm

Well, I haven’t been reading your blog for a particularly long time.
.-= mefloraine´s last blog ..Paper Dream’s Newsletter Released! =-.

Reply

9 blindability March 15, 2010 at 10:10 am

Well that was a bit of a shock, but it’s nice. Change is good every now and then, isn’t it?
.-= blindability´s last blog ..Sora no Woto episode 10 =-.

Reply

10 RP March 15, 2010 at 2:52 pm

Change… Yes we can! :p

Reply

11 Rakuen March 15, 2010 at 11:07 am

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 =-.

Reply

12 RP March 15, 2010 at 2:55 pm

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.

Reply

13 Eugen R. March 15, 2010 at 4:11 pm

I like how it looks now =D The header could stay like that IMO

Also, was a pleasure to work with you~
.-= Eugen R.´s last blog ..????/????????? [pixiv] =-.

Reply

14 RP March 16, 2010 at 6:28 pm

Thanks. It’ll definitely stay that way if my photoshop skills don’t improve anytime soon. :p

Reply

15 TJ March 15, 2010 at 5:12 pm

Looks good. It’s good to see things lighten up again in here lol.

Reply

16 RP March 16, 2010 at 6:28 pm

heh, I refer to the dark stage as Rabbit Poets “emo” stage.

Reply

17 Joojoobees March 15, 2010 at 8:07 pm

Nicely done. I think the comment toolbar is a smart addition. You can’t use features you don’t know about.
.-= Joojoobees´s last blog ..Paprika (DVD) =-.

Reply

18 RP March 16, 2010 at 6:31 pm

Thanks. Hopefully the spoiler button doesn’t result in a spree of spoilers though. :wink:

Reply

19 keikakudoori March 16, 2010 at 12:08 am

I thought I clicked the wrong button again. I’m glad you chose lighter color this time not that I dislike dark colors. I actually liked them but I have say that they aren’t so great for reading.

It looks good on Horofox. And yeah, it does load faster.
.-= keikakudoori´s last blog ..Ookami Kakushi – 10 – Simultaneous nodding – Dams be damned – Pharma dude’s evil keikaku =-.

Reply

20 RP March 16, 2010 at 6:30 pm

I’m glad I wasn’t the only one who had trouble reading the white on black, it felt very heavy on the eyes for me.

Reply

21 kadian1364 March 16, 2010 at 11:56 am

Sweet new look. I always associated Rabbit Poets with blue and bubbles than black. Sticking all the Tags and Categories at the bottom is a neat idea.

Reply

22 RP March 16, 2010 at 6:32 pm

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…

Reply

23 super rats March 19, 2010 at 5:59 pm

I like the look.

Not sure if you actually need to put an image in the header, unless you don’t like the meta-ness of saying cute image goes here.

Reply

Leave a Comment

Previous post:

Next post: