Recently an interesting discussion occurred at Sweclockers regarding the semantics of HTML classes. I argued that classes in HTML should hold significant semantic meaning, and was surprised to find that many disagreed. It started when the following piece of code was posted as a suggested solution to the original thread problem:

<div class="content white">
    <p>White text</p>
</div>

Forms are an integral part of the web; but how do you design an effective, user-friendly form using valid HTML5 and CSS? Well, the answer is not as easy as it might seem; there are a lot of considerations to make. First, you have to decide what information you want to gather from the user. If you’re designing a registration form, you want to gather as little information as possible to make the registration simple and quick. Extra information can always be gathered on a profile/settings page when the user has registered. With new technology such as OpenID, registration forms can be reduced to one text input field and one button; it won’t get much simpler than that.

Setting/profile forms tend to get a bit larger. This is perfectly fine, as long as you have a sensible layout and, if your form is really large, split it up in several parts that can optionally be submitted separately. Again, using modern technology such as AJAX, the user experience can be greatly enhanced in these cases. {continue reading}

I recently came across a topic on a certain Swedish forum I frequent where the poster wondered whether you could create simple tooltips with definitions for certain words. The post immediately got my attention and I started working on a small implementation of this using jQuery and the excellent <dl> element in HTML.

The result was very good indeed. It uses jQuery and the jQuery tools (conveniently fetched from Google and flowplayers CDN, respectively) to wrap all occurrences of certain words in a <span> element with a predefined class. These elements are then hooked to their respective <dd> element, which displays as a tooltip when you hover the word. Add some nifty CSS to style the tooltip and <span>s and suddenly you’ve got excellent definition tooltips. {continue reading}