Wednesday, June 13, 2007

Standing Out by Blending In

This ties back to the Lazy Hacker approach: looking for a method of 'least resistance' in order to get exactly what you want. Fortunately, the Lazy Hacker approach also lends itself to a great trick when it comes to getting noticed; by only altering the cosmetic elements of what's involved, viewers get a whole new experience even if it's the exact same everything else under the hood.

To wit: This blog is being created thanks to Blogger, and as such I grabbed one of the first templates I could think of. Actually, I ended up grabbing 'Rounders' instead because it was more grok-able than the first one I picked up.

I shouldn't have to go too far in explaining why this simply wasn't good enough for my tastes. It's a perfectly fine layout, yes, and it has nice rounded edges, which looks better than sharp corners. But the colors are all wrong (despite the header being a nice red), and if I wanted to change any of the colors, I couldn't deviate far from the presets without the corner images themselves clashing. Furthermore . . . it looked obvious it was a Blogger page. Regardless of what my readers might 'think of me' for using it, leaving it in a default setting didn't make any sense at all when it was completely different from my comic site's layout. If nothing else, it had to look like the two pages went together.

To Fix: One of the few saving graces of the fact I'd picked up an otherwise unsuitable template was that (as I mentioned) the code was quite clean in comparison to some of the other templates, and I had a general idea that the main fixes I needed to do were mostly image-based; in other words, I needed to find the image URL references in the template given, and replace them with a few of my own. To keep the amount of necessary work to a minimum, I would often reference the template images given to make sure I was on the right track with sizes and general image/page anatomy involved.

The main issue with this approach was that the template was designed to work with the specific images it had, and so where mine deviated, I had to adjust the code to make them fit. Typically this involved altering the 'padding' of the given sections and constantly hitting the 'Preview' button on the template each time I made even minor changes to see what effect I had. Obsessive, perhaps, but it worked.

Wherever something didn't fit in with the new scheme, it was "commented out" of the HTML coding, just in case I realized I wanted it for later (which is where that ugly text that was replaced by the new banner image went) . For the most part though, the actual layout of the page went untouched — the profile box barely looks different at all, although that's more by coincidence than anything else. The color DID change slightly to match the banner's edge, but that's about it.

The end goal was achieved in only a few hours' time though: We've broken free of the Blogger default, and made it look like it actually belongs to the domain. We even managed to use the favicon to replace the arrows in the bullets, adding to the design reinforcement. It's not a completed change-over, but it's sufficient enough that it's worth leaving it alone for now to see how well it actually works.

Interested in a similar redesign? Email me and we'll see if we can't arrange (or rearrange, as the case may be) something... or just subscribe to the RSS feed and stay tuned.

Labels: , , , ,


Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home