Click here to download our brand new software.

All of a sudden, the ‘Powers of Usability’, stated that links should link to what they are talking about, without becoming unusable. We’d start getting links like.

Download our brand new software.

Now this makes more sense to many developers, and Google loves it, but what about those people who don’t have a clue? Links can be styled in many ways: not underlined, overlined, pink, blue, black etc. Gone are the standards when all links were blue and underlined, and perhaps with the push to descriptive links, we’ve missed out a chunk of the audience that actually can’t tell what is a link.

So what can we do?

Well, Google often looks at links in your document, and pays the most attention to the first link (when all of the links point to the same place), which gives us something like:

Download our brand new software by clicking here.

Is this more ugly? Possibly. Is it more hassle to maintain? Certainly. But is there a benefit to those users who still expect an obvious place to click? It would be interesting to see some stats on the above link as to which one more people actually clicked on. I would wager it’s the ‘click here’, rather than the ’search engine’ link.

What are your thoughts?

Let’s take our standard Terms and Conditions. Normally this is broken down, contract-style, into Section 1 then Sub Section 1.4 etc. Now in HTML we represent this as:
<ol>
<li>Why are HTML Ordered lists rubbish?
<ol>
<li>Bad HTML
<ol>
<li>This could be badly nested HTML</li>
<li>or have other problems such as
<ol>
<li>poorly typed</li>
<li>cake in the keyboard</li>
<li>developer is drunk</li>
</ol>
</li>
<li>or maybe even just tiredness</li>
</ol>
</li>
</ol>
</li>
</ol>

This is nice and proper HTML but the numerals are just single figures rather than being 1.3.2.

CSS 2.1 to the rescue

Thankfully there is a solution (for some browsers) in the form of CSS 2.1. In CSS 2.1, you can define counters. These allow us to store the current level and populate it as we loop through the nested lists. With a bit of jiggery pokery, we can then output the number before the list item.


ol {
counter-reset: item;
}
ol li:before {
content: counters(item, ".") ". ";
counter-increment: item;
}


Now when you render this in Firefox/Safari you get nicely numbered list items.

Drawbacks

There are some drawbacks. It appears that IE (how did we know that was coming?) breaks at the statement. This means that anything appearing after it will not work, so put it at the end of your stylesheet.