Design With Crackers

Saturday, 28 February 2009

Flags and alternative versions

Ever since I came up with the idea for this blog, I've decided to make it bilingual. I'm fluent in both Brazilian Portuguese and English so this was clearly a good way to broaden my audience.

After much consideration, I've chosen to place the alternative version link as the first one in my link list. To make it look more prominent, I thought it should have one of those little flags right beside it. Since I had already seen some nice flags in my BitTorrent client of choice, KTorrent, I went after it's docs to see where the developers grabbed them. Here's the link, the ones I'm using are from the world 25x15 pixels set. These are licensed under Creative Commons. They should come in handy whenever you need to have multiple language versions of a site.

Labels: ,

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: , , ,

Friday, 13 February 2009

First One

Hi, I'm called Thiago, and this is my new blog on Web Design and Development. Here I'll be writing some articles about the techniques I use on my own designs. I try to focus on Usability first, then on Accessibility and Multi-Browser Compatibility. I always code by hand, and as matter of fact, the last time I used a WYSIWYG web editor was back at the Netscape Composer 4.8 times.

My current tools of choice for design and development are:

Feel free to comment, especially if you find any grammatical or code errors.

Hope you like it!