Monday, May 09, 2005

Updating my Resumé

I recently decided to update my resumé and decided that instead of using a proprietary document format that I would use HTML. If you think about it, a resumé is a great document for HTML. There's no need for an index, foot notes or a table of contents and the elements that remain aren't very complicated either. You have a couple levels of headers, some bulleted lists, and maybe a paragraph or two.

My initial step was to take my RTF document and dump it in a WYSIWYG editor. I used Nvu. I kept everything plain vanilla (no fancy fonts, font styles or colours) and basically edited away. When I was done, I had a factually correct document. The HTML was pristine and wasn't mucked up with a bunch of tags describing appearance. But on the other hand it was an incredibly boring looking resumé. No one was going to give me any extra marks for style.

So I decided I'd spice things up with some CSS. I ditched the WYSIWYG editor and broke out my favourite code editor, jEdit. The first step was to make everything XHTML compliant. I put in the correct doctype, made everything lowercase, closed every tag, and put quotes around all attributes. Then once that was passing the W3C XHTML validator I added a style section to the header and started editing. (Normally I'd use an external CSS and link to it from my HTML but I figured I'd probably be e-mailing my resumé to people and didn't want them to have to worry about multiple files)

The one thing that I wanted to avoid was adding structure to my document just so that I could lay things out (i.e., I didn't want to add tables all over the place just for the sake of layout). Secondly, I wanted the document to still render properly if someone decided to turn off stylesheets entirely within their browser. So I introduced several div elements as containers so that I could style and position blocks of content. My document is pretty hierarchical so this was actually pretty simple and wasn't really breaking my rule about adding tags for layout. As I worked I needed to read a bit more about CSS topics I had only briefly touched on in the past (specifically, float, relative and absolute positioning). I also had to decide on some colours and fonts but I just used some of my favourite sites as templates for those choices.

In the end I have an XHTML/CSS standards-compliant document that looks good in Firefox, Mozilla, Camino, Internet Explorer, and Safari. The content and the visual appearance code is nicely separated, even if they are in the same document, and it serves as a nice little showcase for my appreciation for standards and my ability to apply them to a web application.

I got my first callback. Was it the content or the styling? Maybe a bit of both. ;-)

[Update: I forgot to mention that the Firefox "Web Developer" extension is a great tool for graphically viewing outlines around the structural element of your HTML document and for seeing what would happen if CSS, graphics, or other browser functionality were disabled]

No comments: