In usability we trust

UX and all things web


Use the optgroup element for select lists with sections

One thing that surprises me is that while there is a perfectly valid and easy way of providing a select list that’s divided into sections, it’s seldom used. Instead extra <option> elements are often inserted as dividers, or worse, convoluted JavaScript solutions that emulates this behavior with generic markup and complicated CSS.

The simple, perfectly valid and accessible solution is to use the <optgroup> element. It’s used for grouping <option> elements in a <select> list into sections. It’s perfectly safe to use since it’s supported across all browsers.

Continue reading

Imagemap rollover

Imagemaps was very popular in the early days of webdesign but seem to have fallen out of grace. Probably due to accessibility problems and the rise of CSS based designs. I think that it still has it’s place when used properly and one being aware of it’s potential accessibility problems.

In a recent project I was building a map where different regions of a map would highlight when you hover with the mouse over it. Using an imagemap in combination with CSS and JavaScript seemed like the natural way to do it.

I thought that to actually code this solution would be pretty straightforward, but soon discovered some peculiar quirks. I also couldn’t find any information about this, so I thought that I’d share my experiences with you.

Continue reading

I miss X-Ray

I really hope that Stuart Robertsson, the maker of the ingenious Firefox Add-on X-Ray, updates it to work with Firefox 3 soon! I don’t think I’ve realized how much I’ve relied on this add-on in my daily work until now that it doesn’t work anymore.

Continue reading

Ultimate site logo

To have a good site logo is important. It’s one of the things that distinguish your web site from everybody else’s. It’s also a design element that exists on all pages within your site. Naturally you want it to be good looking, but at the same time it needs to be accessible and also search engine friendly. To do this properly there are some techniques worth knowing. In this article I will show you the approach I’ve taken on my own blog.

In my opinion a good site logo have these characteristics:

  • It’s search engine optimized
    Score high on Google
  • It’s clickable
    Support the strong convention that a click on the site logo takes you to the homepage
  • It’s accessible
    Enable those with screenreaders or images turned off to read the “logo”
  • It looks good
    A good looking logo is important to build your brand.

If you’re the impatient kind you can watch the example page right away. For an explanation of how it’s done, read on!

Continue reading

Marking up contact information with microformats

If you’re building web sites you probably mark up contact information every now and then. Why not do it in a standardized ways so that you are able to quickly mark it up, style it and enhance it with microformats at the same time? The way to do this is by using hCard, a microformat for marking up contact information.

This article will not only show you why you should do this, but also exactly how!

Continue reading