Digital technologies are connecting people in ways that were never before possible—but that network is fragile. Creative Commons needs your support to help enable a participatory culture—a culture in which everyone can actively engage in the creativity that surrounds us. We need your support to assure access to cultural, scientific, and educational content that has been pre-cleared for use by its authors.

If you care even the least about information, creativity, sharing and keeping knowledge free from greedy commercial institutions please consider supporting Creative Commons. It is only a drop in an ocean of problems and possible solutions—but if you’re not part of the solution you’re part of the problem.

Buy a tee (or get me one), donate and/or display the CC-banner on your website to help spread the word (see it in action in the sidebar on this website).

Still, I only need to explain the term on the first occurrence, right? I started omitting the title-attribute in subsequent uses. But then I found the styling of these unexplained acronyms to be misleading—the help-pointer and the bottom border indicate that there’s a explanation available. So I decided to remove this styling from acronym without the title-attribute.

I do this using CSS attribute selectors, like so:

acronym {
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.1em;
}
acronym[title] {
  border-bottom: 1px dotted #ccc;
  cursor: help;
}

The good thing is that it’s neat. The bad thing is that IE (both 6 and 7) cannot handle most of the above. That’s too bad, but not a big problem—that’s what they call progressive enhancement.

The wish list

A useful q-element

In-line quotations are used a lot. And there’s no way to mark them up sensibly right now because of user agents’ varying implementations of quotes. Hence this is more a request towards browsers than towards HTML, but still. It would make me happy.

Form requirements

Web forms are very important but I think it’s fine that all but the basic features are the developer’s responsibility, not the user agent’s. Yet, a required-attribute should be introduced so there’s a sensible way to indicate exactly which fields are required and which are not. This will greatly help developers and users alike.

The menu-element

More or less every web page has some sort of navigation-area–usually a list of links to other sections of the site. I mark these up as an ordered list, which is semantically correct but not complete. Why is the menu-element deprecated when it could be used to describe our document’s contents in more detail?

Better use of the caption-element

The caption-element is now only used for tables. First, I want to be able to specify where I want to display my caption: I prefer them below my table rather than above it. I think this kind of a localization-issue (American preference vs. European). Secondly, ‘caption’ is such a commonly used concept, why not make it applicable to images and other embedded content? I’d love to be able to do this:

<img src="pic.jpg" alt="" title="My cat">
  <caption>My cat</caption>
</img>

This is a nasty one though, since it would conflict with existing title- and alt-attributes. But pointing out room for improvement is my job, not coming up with solutions… :-)

Richer mark-up for citations

When writing scientific texts (or any sort of text, really) you often quote other people. The elements we have now (blockquote, q and cite) are not enough for building a bibliography. I would like to see something like this:

<source>
  <author>Gibbon, E.</author>
  <title>The Decline and fall of the Roman empire</title>
  <date>1776--1788</date>
</source>

Now, I admit that this would also be very eligible for a Microformat—but with regards to the original scientific purpose of the web I think this is not too much to ask. Also, the cite-element could very well be gotten rid of in the near future, which I am very strongly opposed to.

Better use of the rel-attribute on anchors

The rel-attribute describes the relation between the source document and the destination document. Great! There are a lot of useful descriptors already, but I feel we could use some more, especially for use in web applications and same-page links.

The line between HTML and Microformats

I love microformats. They add valuable meaning to ordinary text for very little effort. They enhance our mark-up in much the same way as we enhance our page’s behaviour using DOM-scripting. The question arises: what do we need in the core of HTML, and what do we lay on top with Microformats?

We should, of course, be wary of scope creep. We should stick to the fundamentals in the HTML core and add semantic spice on a separate layer. But why then bother with developing HTML at all? We should at least add some basic concepts to the core—even if only to avoid polluting our class-attributes. The whole purpose of HTML—a mark-up language—seems defeated to me if we start putting too much semantics into our class-attributes.

Go forth…

Extending HTML is a risky business, with so many browsers, standards, specifications, working groups and documents out there. But I thought we were the almighty, über-flexible interweb… let’s live up to that ‘reputation’.

Refer to the image: when placing the image file directly in-line with the text it aligns to the text baseline. Now this might be want you’re after, but it’s not what I was after. I wanted the caption on my button to align with the text next to it. That’s how I came across this little CSS-trick of vertical-align. Note: perhaps everybody knows vertical-align like their back-pocket, but I don’t. Be happy for my discovery.

Applying vertical-align: middle to my image element made the image align to the middle (*gasp*) of my line of text. Oh, if only I had known this before… As far as I can tell this works fine in Firefox 2, IE7 and Opera 9.

Basecamp helps you move forward

A lot has been said already about Basecamp and its wonderful simplicity. The great thing for me as a web professional is that it helps me strip the project down to its basics. Taking a problem, breaking it down into a simple To Do-list linked to a milestone and then completing those To Do-items one by one (and in the end the milestone) makes you feel wonderfully productive.

But for the life of me I cannot get other people to use anything else but the messaging system. I present Basecamp as an alternative to e-mailing each other paragraphs of bloated text four times an hour but in the end that’s just what we do. The bad thing is that if my clients don’t take a simple, down-to-basics approach to project management I can’t either.

The complexity of simplicity

It’s not that surprising: keeping things simple is very, very complex. Only with full understanding of a subject can you simplify it. The key to Basecamp as project management software is that it enables you to communicate quickly in a concise, unambiguous way. But when you don’t really understand what you’re doing you don’t want to be concise and unambiguous out of fear of making a mistake and looking stupid.

The mental load of analyzing a problem and deconstructing it into a finite set of 1-line To Do-items is far greater than spending 45 minutes writing a 1200-word review of a design comp. At least, that’s how it feels in the short term. And as long as nobody points out the alternatives than even in the long term it feels alright. That’s how businesses got into the habit of having four two-hour meetings a day while everybody knows it’s a waste of time.

The challenge

Small budget-projects need an agile approach for success, but this requires a full understanding of the subject matter and of why the agile approach is necessary. But how can we make sure all participants meet these requirement before the damage of inefficient, costly communication has been done?

But Bridge is really, really slow. So to make life a little easier here’s a trick I found to add a feature to Bridge that is so obviously useful I don’t know why Adobe haven’t built it in themselves: a Windows Explorer ‘Adobe Bridge here’ context-menu option that lets you open Bridge straight from the explorer in the folder you choose. A real time-saver!

To enable this option you need to edit your registry, but it’s easier than it sounds. Take this code:

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Directory\shell\Bridge]
@="Adobe Bridge Here"

[HKEY_CLASSES_ROOT\Directory\shell\Bridge\command]
@="\"C:\\Program Files\\Adobe\\Adobe Bridge\\Bridge.exe\" \"%L\""

Paste it into a new file and save it as Adobe Bridge Here.reg. Note the .reg extension. Make sure the path to Bridge is correct for your system.

When the file is saved the default Windows action for it will be to merge it into the registry, so just double-clicking your newly-created file should do the trick. You can now open Bridge quickly from anywhere on you hard drive. How cool is that?

The driver installation app was in Dutch. I’m Dutch, so you’d think that’d be alright–and it would be if the translating had been done by somebody who speaks Dutch. Logitech however seem to have Microsoft Word ‘95 automatically doing the translating for them. I just don’t understand a word of what they’re saying. Luckily I cannot set a language preference.

Don’t make me think

I had to choose which drivers to install. I’ll say that again, just to make sure you understand: I had to choose which drivers to install. Apparently Logitech ships the same CD with every possible webcam it makes (after all, CDs are horribly expensive). I’m asked for what webcam I want to install the drivers. How should I know what webcam I have? It says nowhere on the device itself so there’s no way to find out¹, so that only leaves trial and error.

Luckily my first guess worked. Maybe they all work and the point of choosing is only to annoy you—it wouldn’t surprise me. But I think they meant for something else to annoy the user: your simple webcam comes with three different bloated, ‘enterprisy’-titled 85Mb-software suites. And it’s free! Setting up your preferences, vital system configuration, proxies and extra hard-drive partitions only takes 2.5 hours! Thanks, but no thanks. I’ll pass, even if you ask me again. Or a third time.

And last but not least, the bloody camera works once I’ve installed the drivers. Why then should I reboot my computer? Don’t you people know this is annoying?

¹ I actually reinstalled the drivers. The product name was displayed on its original packaging, but I threw that away a long time ago. Yeah, I know, but that’s besides the point.

Nobody said it was going to be easy. Web development is a maturing profession and it is only a natural process for the boys to be separated from the men at some stage. Not calling Olav a boy—man, his site is sexy—I think browser bugs and the wide variety of screen resolutions are as much part of our job as safety and environmental regulations are to automobile manufacturers—you’ve just got to learn to live with them.

The process of and tools for building websites are complex and your choices therein affect your end product’s quality more than in print design. That is because we web developers add more value to our products: we not only design but also mark up our message, so that both people and computers can interpret and act upon the information we present them.

I prefer web documents over PDFs or print media because they offer you so much more: descriptions with images, tables and links; explanations for abbreviations; citations with source referrals; dynamic behaviour with DOM-scripting and full control over page styling—they all make the web a great medium from the user’s perspective¹.

I’m glad to contribute to that superior user experience even at the cost of dealing with buggy legacy browsers or differing user agents. The real issue here is the appreciation we web developers get for our work. In my experience, non-tech savvy computer users still believe they can let their 14-year old nephew build their company website—and that is the real reason for frustration.

¹Let’s just ignore that nobody uses these features; we can only blame ourselves for that

I’ve recently moved from Tilburg to Zeist (near Utrecht) and although it took some time to get business going again I’m back on track now. I took the opportunity to pimp my workplace to a bigger, more comfortable desk that allows some more distance between me and my display.

It’s a far better set-up than I used to have so I’m very excited—but I’m also very excited about my new balcony that’s right behind my back. It’s got a comfy chair, nice summer sunshine and a good book. Must… resist… the temptation…

Writing is a complex, tiring process but the end-result is very rewarding. So in my pride I always want to rush publishing/sending my rants as soon as I have ‘finished’ it. But as every real writer (I’m only a wannabe) can tell you: no piece is written in one go. The key to good writing is editing: revise, revise, revise. Take a break and come back to your piece in 2 hours. Save that blog post as a draft and come back tomorrow. Walk the dog, cook dinner, talk it through with some friends—anything goes.

Looking at your work again with an empty, unbiased mind will help you recognise mistakes, typo’s, uncomfortable sentences and odd word choices. You will find better metaphors, you’ll throw away whole paragraphs and rearrange your text to make it more logical. Correct your work, even if that means re-writing a piece you’ve worked on for hours. And do it again. Double-check every word, every sentence, every paragraph and every footnote. Then do it some more.

It’s a tiring and tedious process. Sometimes it will not be worth it. I don’t always practice what I preach, but it is important to realize that if you want to improve your own writing this is the key.

Will people laugh at you if your work contains faulty grammar or spelling mistakes? Probably not. Most people write without properly editing it. You won´t stand out in a negative way. But if you do pay that little extra attention you most certainly will get noticed in a positive way. And that’s what you’re after.