Go to line 126, change

p.setHtml('');

to

if (p) { p.setHtml(''); }

Update: LibraryThing is back online.

We know clickability is an issue for seniors, but when it comes to the set of barely-separated-small-fonted numbers that so often comprise a website’s pagination, the increased click target area improves usability for everyone.

Bad examples of this abound—I’m sure I don’t need to point any out, as they constitute probably upwards of 90% of the pagination you encounter. Even Google isn’t great on this account (though you don’t often find yourself wanting to jump directly to page 8 of your search results).

Some decent examples of how to do it right can be found on this Smashing Magazine article (though even many of these could, I think, offer the user a bigger target), while a post from the 37signals blog (padded link targets for better mousing)  demonstrates fairly clearly some of the benefits of padding your links in the way I’m suggesting.

Normally I’d just include a conditional comment, something seen by most developers to be a best practice, but in this case we can’t modify the php template files, so I had to break out the CSS hacks that I thought I had said goodbye to a few years ago.

There are several ways to go about this. First, I tried these tips from Ed Eliot, using the underscore trick to target just IE6. But interestingly (and perhaps unsurprisingly) Wordpress.com apparently won’t let you save any code that isn’t valid. I had it confirmed by support that my _margin-top: -200px; wouldn’t work.

After briefly considering @importing another stylesheet, I instead went with the CSS2 child selector approach outlined in a 24ways article from 2005. Basically, since IE6 doesn’t support the child selector ‘>’, you can make one declaration for IE6 then another for more advanced browsers using the child selector. E.g.

#content { /* for IE6 */
   margin-top: -200px;
}
#page > #content { /* for other browsers, incl. IE7+ */
   margin-top: 40px;
}

This might not get you all the mileage you need, but will probably help.

Who knows how useful the little “thumbs down” functionality is in getting the misleading ads removed.

But the biggest problem is not with the core. A little bit of hacking can get around that. The bigger problem is the poorly coded extensions (plugins, components, modules). Running a website off an open-source CMS means you almost invariably are going to need to rely on 3rd party extensions, and there’s nothing inherently wrong with that.

What’s wrong is the shoddy state of Joomla’s extension landscape. Credit to the extension authors is of course due more than blame, as they’re working (generally) for free, out of goodwill. But having to re-work over the HTML generated by pretty much each and every extension–whether it’s removing tables used for layout, getting rid of deprecated elements and attributes, or just fixing plain old errors–gets tedious quickly. People should know better than to just throw <style> tags into the middle of a document. I shouldn’t be seeing  <td align="center"> anywere.

Arguably, most of the ten mistakes he lists are not so hard and dry. For instance, it is not too hard to imagine situations in which opening a new browser window (mistake #2) is not a clear cut screw-up. And some of the mistakes are less serious than the others, e.g. #8, “jumping at the latest internet buzzword.”

But there is one holiest of holies that you just don’t mess with: breaking the “back” button. The back button is the second most used browser action, right after clicking a link to follow it. Breaking the back button is a clear signal that you haven’t thought, or don’t care, about your users.

So why does Fido.ca’s Phones & Accessories store think they’re above this? It’s aesthetically pleasing, but trying to compare phones on their website was easily the most frustrating web browsing experience I’ve had in a long time. While I usually think it’s not very helpful or informative to be so flippant, in this case I call: user experience FAIL.

The default WYSIWYG editor, for instance, seems to purposely prevent you from entering your ampersands (&) as & which is required for XHTML validation. The way around this is simply to use a different editor; namely, JCE, or the Joomla! Content Editor. JCE will, among other nice features, automatically appropriately encode your typed ampersands, making it easier to ensure your code validates.

One annoying “feature” I’ve encountered with JCE so far, though, is the inability to insert empty alt attributes. Often, particularly in the case of an icon that is more than adequately explained by surrounding text, adding alt text would actually just be at best redundant and at worst confusing to people using screenreaders. However, to validate, you have to include an empty alt attribute (alt=""). JCE doesn’t seem to like this, and will strip your empy alt attribute. I’m sure there is a relatively simple hack to circumvent this.

While many of the complaints are valid, I can’t help but feel like their legitimacy is overshadowed by the fact that >90% of these complainers would probably never get so riled up about, say, an Amazon product that was produced under exploitative or dangerous working conditions, that seriously threatened biodiversity, or that leached toxic checmicals into landfills when you were done using it.

No, these people will only get fired up if their video game doesn’t work just right. Don’t be surprised if I don’t have a lot of sympathy.