Usability tip: Implement web page titles as inverted breadcrumbs

In the past, I implemented web page titles (i.e. the code in the <title> tag) the same way that one would implement a breadcrumb – that is, from the least-specific to most specific. For example:

Web Site Name: Category: Page Name

That is similar to how a breadcrumb would look:

Home > Category > Page Name

Note that I said this is how I did it “in the past.” Today, I read 9 Common Usability Mistakes In Web Design over at Smashing Magazine, which states in mistake #3:

Putting the name of the website last puts more emphasis on what the page itself is about, rather than on website branding, which is still there.

This makes perfect sense, and the article illustrates the idea well with screenshots.

Needless to say, I’ll be refactoring web projects to invert titles at my earliest convenience.

Naming CSS properties, HTML properties… and fighting five-year olds

It started innocently enough when I stumbled across a blog post over at PoshCSS, How many CSS Properties can you name in 7 minutes? Curious, I took the test.

That took me to another test: How many HTML elements you can name in five minutes? I took that test, too.

This in turn took me to the most important test: How many five year olds could you take in a fight?

Granted, that’s about 20 minutes wasted, but it sure is fun to know that a 37-year old with some martial arts experience can take on 23 five-year-olds. It was also depressing to put myself in the “36-55″ age bracket.

CSS styled forms

I like using CSS for layouts and for making sites look pretty — partially because it’s a challenge that is quite satisfying when it works, and partially because I’m not a designer and don’t do well with more robust design elements.

One thing that I often liked using CSS for is for forms. For the past two or so years I’ve been tweaking my technique, and I think I finally have something that works well enough in most situations to share it with you.

Requirements

The sample page uses ___layouts for the basic page structure. ___layouts (a heck of a name, I tell ya) is derived from Yahoo’s UI library, but it’s easier to implement.

Compatibility

The following browsers have been tested against the sample page, which also provides instructions and the CSS. Note any compatibility issues.

Important Note: At very small screen widths (generally less than 600 pixels wide), things can get out of control. Firefox 2.0 handles this best, but in all cases, things get messy at very small screen widths. As a result, setting a min-width on your body tag (or using the appropriate hack to do the same in IE6) is recommended.

  • Firefox
    • Firefox 2.0.0.1: No issues.
    • Firefox 1.5.0.4: No issues.
    • Firefox 1.0: No issues.
  • Internet Explorer
    • Internet Explorer 7.0.5730.11: No issues.
    • Internet Explorer 6.0.2900.2180.xpsp_sp2_gdr.050301-1519 (sorry, I couldn’t help myself): Background colors do not fill complete rows. To use background colors, you need to use a CSS hack (I may add this in the future). Incredibly, there are otherwise no issues.
  • Netscape
    • Netscape 8.1: Line around form doesn’t fully wrap with legend, causing a very minor stylistic quirk, but otherwise no issues.
    • Netscape 7.2: Slightly worse handling of fieldset border than Netscape 8.1, causing a minor stylistic quirk, but otherwise no issues.
    • Netscape 6.2: Totally broken. Most content in the form does not render. To resolve this, you need to set overflow:visible on the div.row. However, doing this breaks some scaling features (long text boxes will run outside the box) and breaks the row background color. Considering Netscape 6.2 was launch in November 2001, instead of hacking to support it, tell your visitors who are using it to upgrade.
  • Opera
    • Opera 9.10: No issues.
    • Opera 8.5.4: No issues.
    • Opera 7.11: Totally broken. See the Netscape 6.2 notes for a fix (and why you shouldn’t bother, since Opera 7.11 was released some time in 2003 and likely has a tiny user base).
    • Opera 6.2: Totally broken (though slightly differently than with Opera 7.11). All notes for Opera 7.11 apply here.

To view the CSS used, some brief instructions, and a form sample, go to http://www.sidesofmarch.com/wp-content/uploads/files/cssforms/cssforms.htm.

Styling your checkboxes and radio buttons

A fantastic Web page called Styled Checkboxes describes how to use CSS and JavaScript to create graphical checkboxes and radio buttons that depreciate to the standard checkbox and radio button HTML controls when CSS or JavaScript is turned off. It works, too – and is definitely worth checking out as a way to pretty up your Web pages.

A unique idea? Not really, but it’s one of the first times I’ve seen it written up and packaged in one place.