Learn web design the right way

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.

In a previous post I mentioned FireScope, an extension for Firefox which integrates with the excellent Firebug extension. It provides additional help on all matters CSS and HTML and ultimately will feature JavaScript too.

The tool has now been moved out of the Mozilla add-ons ’sandbox’ (where the experimental add-ons are placed first) and is now freely available on the main add-ons site, only it’s now called CodeBurner. Not quite as cool as the original name, but the tool is still an excellent addition to any web developer’s toolbox nonetheless.

So, go check out CodeBurner at SitePoint and you can start to reap the benefits straight away!

[Disclosure, I wrote the HTML reference which is what powers the HTML querying side of CodeBurner]

How would you like 5 of SitePoint’s rather fine technical publications for just $29.99 US? Sounds like an absolute bargain, doesn’t it? Well, it is a deal not to be missed and you have 3 days to make the most of it. So get to it!

Visit SitePoint’s 5-for-1 sale here

As a SitePoint author whose books are on this list, it’s money out of my pocket, frankly, so why should I be so happily promoting it? Simple – the money is going into the pockets of people who need it a hell of a lot more than I and the other SitePoint authors and employees need it right now!. As some of you might know, SitePoint is based in Melbourne, Australia where – at the time of writing – bush fires are still raging and have claimed entire towns with the loss of life currently put at 170 people. This figure will rise.

I know that some of the people at SitePoint have been personally affected, losing friends in the fires, so this should not be seen as a publicity stunt in any way shape or form – this was simply something that they could do to raise some money quickly and easily to support the victims of this tragic incident. I’m only too happy to help promote this and am going to be blogging this anywhere I can, Twittering where I can – and there’s nothing to stop you doing the same!

$30 for five books is an absolute steal. Go on, buy some books and that will be another $30 going directly towards the victims – SitePoint are taking no money from this whatsoever.

Thanks.

Thanks to some nifty work from JavaScript guru and SitePoint techie James Edwards, The Ultimate HTML Reference is also available as a reference within the ever-popular Firebug extension for Firefox. It’s called Firescope and adds a new "Reference" panel which includes a search tool. In there you can look up HTML elements and attributes, CSS properties, and it also gives you a summary of the element or attribute’s useage, browser support, and a code example.

As well as the information panel, you can also bring up contextual menus within other panels. For example, when viewing the DOM of the page in the HTML panel, you can right-click on any element or attribute, to look it up in the reference search, or view a code example for it.

I know James is keen to hear any feedback on Firescope (feel free to add comments on this blog post if you want – I’ll be sure to pass them on).

The extension is in the mozilla add-ons directory which is the best place to download it (because then it will subscribe to updates). However, you’ll need a Mozilla login to get it from there because it’s still in the sandbox (in other words, not quite yet approved for mass public distribution). Alternatively, you can download and install it directly from the page on sitepoint.com (but without auto-updates).

As well as having a new reference tool within Firefox/Firebug, the online reference has, itself, also had a make-over which gives it just that extra bit of polish. So even if you don’t feel like installing the tool, you can still check out the reference for yourself.

Well. Erm …. wow.

When I put a competition on the web site for just 5 copies of the book, I wasn’t sure what to ask as a competition question. I didn’t want to ask anything too hard/tricky, so I left it quite open and decided that the way to win a copy was to entertain me with some creative writing – just as I found it really funny the way that people would draft over-the-top creative begging letters on Freecycle. It’ll be fun, I thought.

250 entries of creative writing later, and I have a very different opinon. I wish I’d gone for a simple closed question along the lines of "what does HTML stand for" and then just done a lucky dip!

I must confess that it’s been great to read through some of the funniest and silliest emails I’ve received in a long time; I’ve also received emails from people who appear to be on the verge of self harm or even harming me or their nearest or dearest if they don’t win a copy. Well, I did say to exaggerate! I received emails from people who:

• wanted a copy to create a web site to put a site of themselves online to get back at a cheating ex
• claimed that their dog had eaten all of their html coursework
• were living rough while supporting their family of 15 blind, amputee children
• thought the book would make a good doorstop or help with a wobbly table
• started their email to me as "Dear Andy Clarke" or "Dear Ian whoeveryouare" (fail!)
• wrote several pages’ worth of back story, worthy of publishing as a novella
• admitted being senior people in their respective industry, responsible for web … and not having a clue what they’re talking about!
• taught me all about squirrel habitations (yes, it did relate to building a web site)
• claimed their pregnant wife just likes the smell of SitePoint books and the local supplier just ran out
• were abducted by aliens and had all programming knowledge wiped from memory following a particular experiment
• said that they were fed up with camping in the aisles of the local bookstore to read my book and that if they didn’t get a copy, their continued presence there might cause the store to stop stocking the book

Then there were quite a lot of emails which seemed to be genuine tales of woe – too many for a measly 5 copies to help out with! I really started to feel how difficult it must be for people working in charities having to turn down requests for help for things a lot more important than some (in comparison) silly little book.

In the end, I decided to choose a mixture of people who either made me laugh the most or who I felt would get the most benefit from learning the book. For reasons of privacy, I’ll not mention full names/details here – I’ll contact the winners directly, but they were:

• A photographer whose website looked in need of a make-over (but whose letter to me was the most colourful of the bunch!)
• 10-year-old Dennis whose ‘tutor’ was Dad but who was doing a rubbish job and needed to be fired (now he is)
• Kevin, recently unemployed and looking to re-train (a sign of the times – there were quite a few of these)
• A schools outreach program in Zimbabwe
• A new mother trying to learn a new skill so that she can manage a business from home and bring up the baby too (awww!)

Now, because there were so many funny entries to the competition, I’ve selected some of my favourites [published on accessify.com] and collated them here. Once again, I’ve removed the authors’ names to save them from any potential embarassment, and have also scanned through to make sure that there are no other personally identifiable pieces of information.

Thanks to everyone for taking part – it’s been fun … but I’ll definitely go with the closed question approach next time!