Aaron As a Chimp

A quick way to improve the usability of your forms is to use the label tag. It will increase the size of the click-able area of a form input. As we know from Fitts’ law the larger an element the easier it is to interact with it. Try it with a check box. The clickable area is outlined in red.

<label>
    <input type="checkbox"> label text
</label>

Something I run across every so often when fixing bugs is a problem of content overflowing its parent element. The child has padding, margins, or a border, and a width set to 100%. This seems like it should fill the available space, but it protrudes out instead.

The weird behavior comes from the standard box model. According to the standard box model, when you set the width, it sets the width of the content area. The padding, border, and margin get wrapped around it. Meaning that the box, which is already the full width of it’s parent, gets pushed out beyond the edge.

The fix is painfully simple. Simply set width of the chid element to auto, or remove it entirely. Block level elements automatically fill the available space, and that calculation takes into account the borders, margin, and padding.

The non-breaking space ( ) is the workhorse of the web. It can be used in so many contexts from its use as a poor-mans indent or even to workaround bugs in IE6 and Firefox.

Not many people know the true value of a non-breaking space. As its name implies, its primary purpose to prevent line breaks. Essentially the opposite of a break tag.

A few examples

Prevent widows:

By replacing the last space in a paragraph you can prevent a widowed word.

In aliquet leo aliquet enim tincidunt non tristique tortor
feugiat. Donec gravida egestas risus quis eleifend. Donec
adipiscing dolor nec augue dignissim pharetra.

Ensure words always appear together

In aliquet leo aliquet enim tincidunt non tristique tortor
feugiat. ACME Widget XL donec gravida egestas
risus quis eleifend. Donec adipiscing dolor nec augue
dignissim pharetra.