Tuesday, August 5, 2008

DIY: Blog Design - Part II

As it turns out, after helping my buddy Stuart redesign his blog the other day, I found myself mightily depressed with the lackluster stock template I was still using on my own blog... as you can see here.


After browsing through all the other available templates, I declared: "I don't love these... seeya!" And resolutely set out to create something better for myself.
I quickly realized that working on blog redesign was much more difficult without company. Partly due to the lack of feedback, and partly due to my general lack of HTML coding knowledge whatsoever, the task took much longer than I anticipated. You'd be amazed at how long it takes to filter out all the garbage and create a simple, minimalistic layout when you have little idea of what you're doing. Funny how that works.

The photo reference I used for the banner was from my archive of pictures. This one in particular was from when I was free diving in Bali, Indonesia with my Canon S80 and a Dicapac waterproof case. There were some scuba divers below me, so I dove down to about 25 feet, and one of them ascended to meet me halfway. We waved at each other in a somewhat goofy manner for a few seconds (what else can you do underwater?), before heading back to our original starting points. But on my way up, I snapped some pics of the air bubbles the scuba groups' tanks were giving off.


But back on point, you can see that I was finally able to wrangle the majority of my blog into it's current form. The whole thing definitely went kicking and screaming the whole way. But you know how it is. A man's gotta do what a man's gotta do.

[Update I: The new animated favicon was a bit labor intensive. I had to create it in Photoshop with a very specific layer mask on the "wave" element, then I had to edit it in CS3's animation window, and once it was properly animated and timed stop-motion style, I exported it into a .gif. Then I had to upload it to my flickr account and direct link to that final url in the HTML of my blog. Yikes.

Update II: The animated favicon seems to only work in Firefox. And the question isn't why, but rather, why it should matter to anyone. If you're not already using Firefox, then you deserve to miss out on all this animated bliss.]

7 comments:

Age of Awesomeness said...

I like the new look. I changed mine up a bit too, but still unsure if I like it or not.

Christian said...

I like your new header as well. Pretty slick man. One thing though, your links are in blue and it makes it hard to read against your background. I don't know if it's by design or whatnot

slimpanther said...

Of course it's by design! :) It's a compromise, though... I don't want it to stand out too much, but I do want it to color match with the site. I have no problem reading it on my monitors at work or home, but then again, I do have pretty nice monitors at both places. I'll check it out on some not-so-nice ones and see if I need to bump up the color/brightness any...

Brian said...

What is this animated favicon you're talking about? I don't see it. Furthermore - I'm not sure Flickr likes people linking directly to their images for inline web-page content, but I'm not much of a webby guy, so it maybe it's fine :)

slimpanther said...

To be honest, I've only tested the animated favicon in a firefox browser. I dunno if it'll even display correctly on IE. I KNOW it doesn't work on Safari. But Safari's crap... so... yeah.

Larissa said...

The favicon is cool. I hate my favicon - it needs some re-working.

Weird...before I got into blogging, I had never even heard of a favicon.

Unknown said...

Man, favicons... it's a thing.