Fancy form design – book review
Tuesday, December 1st, 2009
When I was writing Build Your Own Web Site the Right Way with HTML & CSS (and not thinking up a massively long title for the book), I was very conscious of the fact that it was aimed at the total beginner and that there would inevitably be limits to the level and depth that I could teach the reader on certain topics. It was never intended to be a complete reference to every technique under the sun, rather a book that takes you from absolutely nothing to a pretty good, standards-aware level of web site building with a few goodies sprinkled on top. As such, the final chapter was all about ‘where to go next?’. Now I have another great book to add to that list of further learning/reading, and it includes lots of the parts missing from my forms chapter – extra bits that I’d never have been able to squeeze in.
In Fancy Form Design, we have three great authors (Jina Bolton, Tim Connell and Derek Featherstone) sharing their experience of building forms while layering in all sorts of accessibility, semantics and UI goodness. It starts off with what appears to be the usual introduction to form elements and controls, but very quickly introduces non-native (as in, not provided by specific HTML elements) UI controls like sliders, split buttons, toggle switches and date pickers. This is encouraging to anyone who already knows a bit about forms, suggesting that you’ll get to learn something new soon (heck, I’d never even heard of a ’split button’ before). And even before the first chapter has finished, we’re reading about planning the interaction using task flows and doing paper prototypes and wireframes. This is not the usual chapter 1 stuff, so it’s a good start!
In chapter 2 it’s the turn of design, beginning with the overall layout of the form (explaining what a grid system is), appropriate use of colour (and the problems with relying on colour alone – a common accessibility sticking point). With a little tweak of the typography here, a splash of colour and some gradients, the selection of six forms identified as being required in chapter one get their first make-over.
Chapter 3 deals with structure – and it’s this chapter that overlaps slightly with the form chapter in my book (but thankfully does not in any way contradict. Nice to have a consistent message!) – and I just know that this was one that Derek wrote. Why? It covers all the HTML constructs required to create a meaningful form but also points out the flaws in using markup that should be right for the job (fieldset and legend, we’re looking at you here) but actually cause other issues; hurdles rather than help. My only regret is that Derek hadn’t seen the recent changes I made to the quick form builder tool on Accessify which makes the process of creating (most of) the forms’ HTML in this chapter an absolutely breeze (it would have been a useful footnote to add, in my humble opinion).
In chapter 4, we get back in to design again, this time how to style the form elements with CSS. Browser inconsistencies and quirks with certain form elements (once again, it’s you, pesky fieldset) are dealt with, along with lots of other nice graphical touches that can be applied to lift the form from plain old HTML. Nothing too complicated in this chapter – all light touches. However, for some reason that I could not ascertain, as the screen shots that show the the form move from basic, unstyled form to the finished job, the date of birth fields inexplicably switch from being three select lists to three text inputs and then back again, with no obvious reason why. It looks like a mistake, but if I have that wrong, I’ll amend this accordingly.
Enhancing! That’s what chapter 5 is all about, mainly through the use of JavaScript (or in most cases jQuery). Topics covered here include how to provide the user feedback on password strength, better styling for notoriously difficult elements like select lists, dynamically highlighting form errors and such like. As it stands, I could read a whole book on the kinds of ideas demonstrated in chapter 5. SitePoint, are you up for it? And perhaps that’s what leads me to the only real criticism I have about the book – there’s arguably not enough of it. Three authors but only five chapters (with a lot of colur pics and code samples)- it could easily have been double the size, so just be aware that this is not a complete compendium of form design patterns.
A great book that covers one topic and covers it well, I can definitely recommend it to anyone who’s got a firm grounding in HTML and wants to fine-tune that part of their work even further and definitely recommend it as a companion/add-on to my book. Good work, Jina, Tim and Derek.
