Design With Crackers

Wednesday, 18 February 2009

Making the Template

Designing the Template for this blog was a nice experience and I want to share with you some of the details from the process I used.

The first thing I did was a sketch of how it should look like with paper and pencil. This is great because it allows us the freedom to come up with said sketches quick and to scrap them even quicker if they don't come out quite as we expected, or if we just changed our mind in the middle of it. Afterwards, I did a mock-up design on Inkscape, which I used to test the colour scheme I choose and the general sizing of things. Then I moved to the actual coding and image crafting taking these steps:

  1. I selected the classic Template type on Blogger dashboard and downloaded a copy of the default template, which I then stripped bare of all Blogger tags(such as BlogItemTitle ) and everything between the curly brackets of the CSS rules.
  2. I pasted the usual Lorem Ipsum placeholder content and self-referencing links on the code so that I would have something to apply style to.
  3. Then I started writing the CSS rules and debugging them on the fly with Firebug(lovely tool, by the way; consider getting it if you don't use it already).
  4. Every once in a while I checked the layout on a stack of browsers(including, of course, IE from 5.0 to 7) and made sure it validated on the W3C Validator.
  5. I decided which images were needed and began work on them.
  6. When I had a working prototype which validated both XHTML/CSS-wise I began work on replacing the placeholder content and links with the appropriate Blogger tags.
  7. As a final step, I uploaded my design back to Blogger and ironed out the last few bugs that showed up at this stage.

Sounds easy huh? Well, not quite so. For starters, there is the Blogger generated code validation problem. Up until the part where I was making the images for this blog, everything was fine validation-wise. Then, as soon as I had inserted the Blogger tags and made the first test by URL on the W3C Validator, it stopped validating. It seems that most of the code that Blogger inserts into the template is non-standard. There's not much I can do about it, so I've decided to just live with this. There's also a few details I rather talk about in another post, since this one has become quite big already.

So now, what?

I'm thinking about using what I learned by doing this template for creating free Blogger custom templates. So expect me to eventually be posting a link to my new Templates blog!

Labels: , , ,


Post a Comment

Subscribe to Post Comments [Atom]

<< Home