RSS
Twitter
FlickrDon’t Forget the Label! Attention to Detail in HTML/CSS
Feb 01
Creativity, Web and Graphic Design attention to detail, css, css reset, Design, html, label, pointer, snippets, tapbots No Comments
Attention to detail is paramount in design. Sometimes it’s the little things which can make or break a design or engage a user just that little bit more. My favourite example of this at the moment is the footer in the new Tapbots site.
Notice the very subtle highlight of the grey and the text on the “read the blog” link when you mouseover? That’s attention to detail.
The thing with the label tag is perhaps not so creative, but more of a necessity. You should take the time to make labels for your inputs/textareas/selects etc because it adds to the usability of the page and validates.
Not only should you take the time to make your label tags, but you should take the time to style them.
That’s right, style them. The default styling, in the majority of browsers, on a label tag is simply the same as the text. This would be fine, except a label isn’t just text. It’s interactive. Have you ever noticed when clicking on the text next to a checkbox it checks or unchecks the box? Assuming all elements have labels assigned to them, you can click on any label in any form and have it move the focus to that element. This is exceptionally useful for things such as checkboxes and radio buttons which can be quite small. You’re increasing the clickable area around the element and therefore increasing usability.
I would wager a lot of people don’t know about this trick, I’d say some figure it out by chance like I did, and the reason? By default the cursor style does not change over a label.
I very quickly learnt to add the following to the CSS reset I use on all my sites:
label{
cursor:pointer;
}
You can find out more about CSS resets here.
Voila! Your cursor should turn into a hand when hovering over the label, and when clicked it will place the focus in the associated element.
I usually go a bit further and give the label some colour, or weight, make it fit with the rest of the design.
It’s a good idea to put the cursor:pointer style on the button tag too, just to provide the added visual reinforcement that it is a button and to keep behaviours on the web and computers consistent.
So, add that snippet to your CSS reset, and consider how you can creatively enhance your form with more styles now that you have the label tag to play with!
I’m pretty pleased. I know there’s a way to go yet, but I’m really enjoying it so I intend to keep it up. I’ve also been doing well with my January goals (to be explained at the end of the month), though I will say they involve reading design related books at lunchtimes and I’m really enjoying reading 
I thought I’d talk a little more about “tilt-shift” and what I’ve learnt in the last couple of weeks.
