And just as I think “hm, how do I deal with all this n-child stuff?” Chris Coyier of CSS-Tricks tweets about his :nth-child learning tool/tester. Brilliant!

• Brave new world
• H5
• Basis theme
• Naked
• FreeDream

Do you know of any others?

A couple of good HTML5 resources:

• html5gallery
• html5doctor

And finally, a great overview of how to build a Wordpress template from scratch from ThemeShaper.

But that has all changed. It appeared to me that after all, forms are about user experience, and user experience is something I’m quite passionate about. But what really made me get into forms where a combination of events. I finally got hold of Web Form Design by Luke Wroblewski. And I cannot believe I haven’t read it earlier. It’s been out since 2007 for something’s sake!

But it’s clearly a popular book, because I’ve been trying to get it of Amazon before, where it’s been sold out. Then I forgot about it. Then I remembered again as I stumbled across a link to the publishers own website (rosenfeldmedia.com). Enter creditcard details. While I was there I picked up a copy of Donna Spencer’s Card Sorting as well, also recommended. But for now I’ll stick to the forms.

I thought Web Form Design was going to be all about how to get your head around writing semantic HTML and valid CSS for forms without ending up in an asylum in the process. I was wrong. It is much better. There isn’t a single line of code in the book. At least not that I can remember. It puts all it’s emphasis on making forms user-friendly. This is clever, as it makes it almost timeless, something you can’t say about most HTML/CSS trends. And it really makes you think further about what Every. Single. Element does.

Why is there? What does it do? Could it be better? Do I even need it?

And the flow of going through a form. Now I’m aware of how to get a user into a form, through the form, submit the form, and what to do after the form is submitted. This is something most designers never think about. I know I didn’t. And I gotta say, it feels good to make these decisions based on research and facts, rather then a vague feeling. Sure, it takes me a bit longer to make a form now, but damn! – it turns out heaps better.

I usually get the graphic designs handed over from designers who know little or nothing about CSS, HTML, or JavaScript. I’m not sure how many times I’ve had to point out that a link usually has slightly more than one state. So imagine the forms. Now, luckily the people I work with welcome feedback and are happy to learn. But this time I’ve made a clear demand:

Read this book before you ever design another form!

Which means that my book is out on loan at the moment. I have to remember to get it back before I leave Sydney. It is definitely part of my library.

And as it happens, after finishing the book I was cleaning up my email, where among others a few hundred emails from the WSG mailing list needed deleting. And as it turned out, there was a meeting, in Sydney, where Jessica Enders (formulate.com.au) did a presentation on forms. Count me in! At the same time Sitepoint launched another book, Fancy Form Design, which I’m currently reading. In short I’d say it makes a good appendix to Web Form Design. I have learned a lot from all this. And interestingly, nothing of this is new. No HTML5, no AJAX, no social media guerilla branding campaign (sic). Just plain old markup and solid dose of human behavior. I am really happy I’ve been able to improve so much in such a short time.

So now I don’t hate making forms anymore. Instead I hate how horrible some of the forms I’m forced to fill out are. And occasionally I get to love how well it can be done.

I know, it’s naughty, dirty, against the rules, and Andy Clarke won’t share his pudding with me. But today I just wanted to style that form element my way!

I used this to target a <input type="submit" class="btn" /> element in Firefox3.5, but it will affect everything from Mozilla1.8 (that is Firefox1.5) and up.

My original CSS had this padding:

.btn {padding: 5px 10px}

Bringing out Firefox hack number 1 helped somewhat:

.btn::-moz-focus-inner {
    padding: 0;
    border: 0;
}

But this wasn’t enough, so after digging into the Firefox’ form.css file and some follow-up googling, I ended up abusing Mozilla’s @-moz-document specification, which led me to this:

@-moz-document url-prefix() {
    .btn {
        padding: 4px 8px;
    }
}

The latter can obviously be used to target any normal CSS, but please use with care!

Do a persons books tell you something about him or her? I’d hope so. Looking at the stack of books that I have next to me on my desk, I realised it shows what I’m aiming for. I wish to be better at what I already do well, I want to build and expand so I’m fluent in related areas. I want to be comfortable that I’m good at my job, as it means a lot to me. So this is my list, my wishes, in no specific order other than what they currently are stacked up as on my desk:

• Card Sorting by Donna Spencer
• Getting Things Done by David Allen
• A Practical Guide to Designing for the Web by Mark Boulton (my review)
• Web Form Design by Luke Wroblewski
• The Principles of Successful Freelancing by Miles Burke
• The Principles of Project Management by Meri Williams
• Learning jQuery by Jonothan Chaffer and Karl Swedberg
• and a Mac OS X Snow Leopard disk that’s waiting to get installed…

Titles link to books. Names link to Twitter.

Client:

Cotswold Furniture Collection

Work:

CSS, XHTML, sIFR, jQuery

Link:

cotswoldfurniture.com.au

This site is a showcase for the large selection of furniture on offer by Cotswold Furniture Collection. I’ve done the front-end work on order for my Sydney based friends – Universal Favourite. For this project we were even further apart than usual, since I did the majority of my share while in Norway. But good task management and communication kept any issues at bay.

Client:

Roc Candy

Work:

CSS, HTML, jQuery, cufón text replacement

Link:

roccandy.com.au

Roc Candy’s old site was ready for a make-over, and we can finally show off the new site! Roc Candy wanted it to have a playful design, while also being more user-friendly than the old site. It’s been a Perth-localised team effort, with Ryan Brigs on design, myself on front-end duty, and Jimmy Hillis of Kinetic Design responsible for the custom CMS and shopping cart. Roc Candy also uses the back-end for their own administrative purposes. And don’t miss out on the custom candy designer!

Client:

Universal Favourite

Work:

CSS, HTML, sIFR

Link:

universalfavourite.com.au

I’ve had pleasure of working together with the talented team at Universal Favourite since February ‘09, when they got in touch with me and asked if I’d be interested in helping them out with some  front-end development. They are very good at what they do, and a pleasure to work with, so we’ve been co-operating on multiple projects since. Recently they re-launched their site, which runs on the MODx CMS like most of their projects.

Client:

Jordana Maisie

Work:

CSS, HTML, jQuery

Link:

jordanamaisie.com

Jordana Maisie is a Sydney-based New Media & Electronic Artist working in photography, video, sound and interactive installation. Hence the site is heavily geared towards video and images. Universal Favourite took care of the design, and the site runs on the MODx CMS.

Client:

Reach Out

Work:

CSS, HTML, jQuery

Link:

http://au.reachout.com/

A site to help young people with mental health issues, funded by the Inspire Foundation. A big project which took a year to complete, ran by Universal Favourite who brought me in to carry out the front-end development.