En temporär version av Webboken, v2 finns uppe nu. Kommentarer uppskattas. Det går trögt, alla har mycket annat på gång.
Completely irrelevant
En temporär version av Webboken, v2 finns uppe nu. Kommentarer uppskattas. Det går trögt, alla har mycket annat på gång.
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}
Snook.ca has a new, Minimal Design.
<dl> – the modern man’s table?With the not so recent anti-table movement people have begun to seek solutions that don’t involve tables. This is a good thing. However, it has had one major side-effect; people misuse elements. This isn’t really a side-effect of not using tables; rather, it’s a side-effect of people not paying any attention to semantics.
Recently one user on Stack Overflow asked “What is the best way to style a list of checkboxes?”. I was kind of appalled when I saw a flood of non-semantic answers involving div, ul and even dl elements. People seemed to forget that there was an element with this very purpose (fieldset) in HTML already, and instead of doing some research they immediately fall back to half-assed solutions involving misused elements and complete lack of semantic meaning.
The definition list is not a universal solution for something that might be considered to be a list. Its purpose is to associate one specific element with one or more elements, such as a word and its definitions. Definitions are really one of the few cases one needs to employ the definition list, most other cases are covered using very basic HTML.
Side note; this post has been a draft for several weeks now and I originally intended to present a range of examples of how (not) to use definition lists. However, I feel that presenting my point is more relevant than spending time I don’t have on writing examples that are of lesser importance to the post.
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}
HTML5 has started to see real use in the wild, but unfortunately there’s already some misunderstandings concerning some parts of the draft – most notably the <section> element. People seem to have missed the purpose of this element – it is not just a “semantic <div>”.
An example of what you can often see is this:
<!doctype html>
<section>
<article>
<h1>...</h1>
<p>Lorem ipsum ...
</article>
<article>
...
</article>
</section>
Clearly, this is not the intended purpose of the <section> element. It was intended to make outlining of documents (creating TOCs) easier by grouping content to headings, instead of having several different heading elements. The correct usage of the <section> element, therefore, looks like this:
<!doctype html>
<article>
<h1>Title</h1>
<p>Lorem Ipsum...
<section>
<h1>Subtitle</h1>
<p>Lorem ipsum...
<section>
<h1>Sub-subtitle</h1>
<p>Lorem ipsum...
</section>
</section>
<section>
<h1>Subtitle</h1>
<p>Lorem ipsum...
</section>
</article>
“Not Safe For Work” tag in HTML 5 — is this good? I’d say an attribute or rel="NSFW" makes more sense.