Tag Archives: HTML

Image buttons made simple

I read a blog post recently showing how to create a button with an image and text. The button looked very simple and very nice to look at, but the HTML was more complicated than I thought it needed to be.

There is a move now to make the HTML of a document as simple and self-explanatory as possible. The HTML should contain the intent of the page, CSS (and possibly JavaScript) is then used “skin” the page as required. This has become more feasible now that browsers are finally maturing and supporting more and more of the CSS standard.

So, if we want a button, we should use the <button>…</button> tag. If we want to have an add button, we want to have:

<button class="imageButton add" 
       onclick="addSomething(); return false;">Add Something</button>

And instead of this

we want it to look like this:


Continue reading Image buttons made simple

Poll: A yes/no question in a web form, which control(s) would you use?

We’re creating a web application that asks a number of questions about pumps (as it happens). Some of these questions are typical yes/no questions. But we need to make sure the user makes a positive choice. We don’t want to impose a choice on them. Which controls would you use?

Here’s the question with the three options we’ve currently got:

Do you need a sealless pump?
Do you need a sealless pump?
Do you need a sealless pump?

Jakob Nielsen at useit.com in his article Checkboxes vs Radio Buttons tells us that radio buttons are used “when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice” and a single checkbox is used “for a single option that the user can turn on or off”. But this case is a little special since we don’t want the user to forget to select something. The nice thing about using the radio buttons or the drop-down is that you have a way of detecting if the user has actually chosen anything yet. On the whole though, the drop-down list is probably the least user-friendly though perhaps the easiest to generate programmatically.

[poll=1]

(This poll is a great WordPress plugin developed by Lester Chan)