Archive for October, 2010

Five things carrots can do that HTML5 can’t

I saw the marvellous 10 Flash Things You Can’t Do With HTML5 and it made me realise that HTML5 is rubbish.

In fact, it’s not even as good as a humble carrot. Here are five things carrots can do that HTML5 can’t, presented by Dr Archimedes Einstein.

(Captioned HTML5 video on Monday when I’ve worked out how to do it – it’s my day off and kids are nagging me to go swimming.)

Oh, and here’s the gag reel.

Why video, audio, canvas aren’t self-closing tags

I was having a chat with htmlboy about why some elements aren’t self-closing in HTML5, specifically <audio> and <video>.

One of the reasons is that by requiring a closing tag means you can delimit where fallback content begins and ends. It’s easy to see that in action:

<video src=nude-bruce.webm>
<p>Your browser doesn't support HTML5 video. Lucky you.</p>
<p>Millions panic when the above video caused retina failure.</p>

Everyone sees the line “Millions..” because it’s outside the starting and ending tags. The stuff between the tags is the fallback content.

The <canvas> element didn’t have an end tag when Apple dreamed it up, but Mozilla and Opera implemented a closing tag for exactly the same reason, and it got standardised with a closing tag.

Another model that could have been followed is having some kind of alt attribute on a self-closing element, much like <img> now, for example <video src=nude-bruce.webm alt="Your browser doesn't support HTML5 video. Lucky you." />.

The trouble with this is that attributes don’t contain markup, and we want to have download links in the fallback content:

<video src=kitten.webm>
<p><a href=kitten.webm>Download a kitten video</a>.</p>

Another problem with alt attributes is that generally authors have no control over the way they are presented – that’s up to the browser and beyond the control of CSS.

Interestingly (if you’re a weird geek like I am) the much-maligned XHTML2 understood this problem and changed good ol’ <img> so that it was no-longer a self-closing element, thus allowing fallback content between the tags just as I describe above:

In the following example, the W3C logo would be presented if it were available. If it were unavailable, then the enclosed text would be presented.

<img src="W3C.png">W3C</img>

So when HTML5 decided to adopt this idea from XHTML2 for <audio>, <video> and <canvas>, why didn’t they change the content model for <img> too?

Because of backwards compatibility. All existing browsers that I can find show the image and the fallback content. Neither do they allow me to change the colour of the fallback content in CSS (Try it out).

But the canvas and multimedia elements are new and have no backwards-compatibility to break, so they get the content model that allows for better fallback content.

Last speaking gigs of 2010

As the colder nights harden, splashing autumn on gardens, I’m charging off to exotic climes to do the last few talks of 2010.

– Stafford University: HTML5, CSS 3

A live coding demo of some HTML5, and a bit of a rant about CSS 3. Non-students welcome.

The lecture will be 1-2pm in the blue lecture theatre Octagon building, and the Q and A session after in K129, Octagon Building at 2pm.

– Tokyo, Japan: HTML5: semantics and structure

A full-day workshop (with translation into Japanese) on using HTML5 markup. Sold out

The new HTML5 specification gives you 28 new markup elements to choose from. What do they mean? How do they work together? Bruce will answer these questions, and ”” most importantly ”” show how to apply them to real world sites. There are also many changes to HTML 4 elements, and even some obsolete elements, and you’ll find out the important differences. Finally, you’ll get a glimpse of the amazing things people are doing with HTML5 now, and an insight into the future of the web.

– Tokyo, Japan: Be an Iron Chef of HTML5

A one-hour talk with simultaneous translation into Japanese at the Web Directions East conference.

23 November – 1 December – Australia: The A Team: ARIA & HTML5

Five dates in Australia (Sydney, Melbourne, Canberra, Perth, Brisbane) speaking with The Mighty Steve Faulkner of The Paciello Group. Organised by the Web Industry Professionals Association, the 3+ hour long workshops cost $60 for members, $90 for non-members.

Melbourne is full; others are selling out fast. Book soon.

London Web, 20 January, 7.30pm

(Last Updated on 16 November 2010)

Notes on Birmingham Council website post mortem

The city I live in, Birmingham, launched a new Council website. It made the headlines because it was three years late, and considerably over-budget. I’ve been reading their post-implementation report Web CMS Project Post Implementation Review – Final Report (PDF, 440K) (check out the humane URL of that document: thank goodness for the new Fatwire CMS!)

One day, I am going to get rich by doing post-implementation reports on public sector websites (if such a thing as “public sector” remains, of course).

From my experience at the Law Society, and reading reports such as this one, I could easily produce a template document citing the usual reasons for the deadline-breaking, budget-demolishing usability atrocities that get commissioned, and then I’d just slot in the client organisation’s name and charge them a few grand.

I would use the Birmingham report as a basis, as I’ve already paid for it with my council tax and it lists (or hints at) all the depressingly usual suspects:

  • Scope creep
  • CMSs are bought off-the-shelf, massively customised to the point that they’re unstable and no-one knows how they work any more
  • organisational disdain for their own employees’ accumulated vital knowledge and experience
  • obsessive organisational risk-aversion
  • managers with no understanding of how the web works being put in charge of projects
  • endemic mis-communication

Joking aside, I’m not qualified to judge how accurate this report is, but it rings true, except for one vital area.

The report’s authors offer advice on enhancing the accessibility of the site. The advice is wrong.

I can’t find the names of the authors to judge their qualifications to pontificate on accessibility but the inaccuracy of terminology of the assertion “W3C rules state that an ”˜alt tag’ should be used on all images” makes me uncertain that they really know what they’re talking about (there is no “alt tag” as there is no alt element in HTML).

Section 13.3.2 says

…a visually-challenged visitor should be able to increase the font-size and to change text and background colours to make the site legible for him or her. It is possible for an individual to change the font size using their browser settings but it is not possible on the BCC site to do this on the web pages themselves.

I challenge the assertion that you need text resize widgets on the page. It wastes space, only works per page (unless you set cookies), and requires JavaScript. At the very least, this should be usability tested with representatives of those who would allegedly benefit.

Section 13.3.3 says

… Browsealoud ( ) is recommended by many bodies including the RNIB. Many visually-impaired people use the system and it is enabled on many government and local government websites – including a subsidiary standalone site of the BCC ( – see below).

Systems like these allow a visitor to listen to the content of a site, thereby making it accessible to those with visual, literacy, and dyslexia challenges.

We recommend that Browsealoud or another similar system be implemented on the main BCC site.

Browsealoud costs money. It’s basically a plugin that reads text, but has none of the navigational functionality that fully-fledged screenreaders have. The site owner pays to have their web site added to a whitelist contained within the plugin.

Extensions such as Opera’s Voice (select text, right click, “speak”), Firevox for Firefox, built-in screenreaders on the operating system such as Micrsoft Narrator or Apple Voiceover perform this job without requiring the council to spend money, and (most importantly) at greater utility for the consumer. Browsealoud (or similar plugin) requires that the user learn a new way of interacting with this specific website; using the alternatives I list above enhance the user’s experience on every site she visits.

It appears that during development of the site, Birmingham City Council procured four third-party accessibility audits of the website, all of which mention non-resizeable text (but recommend setting it in CSS with relative units rather than coding text resize widgets). None recommends browsealoud or similar plugins.

I hope that Birmingham does not follow the two accessibility recommendations of the post-implementation report, until it can demonstrate that the authors of that report have significantly greater experience and knowledge of accessibility than the authors of the 4 accessibility audits I obtained under my Freedom of Information request.

This is a personal post and not the opinions of my employer, wife, children or hamster.

Birmimgham also features in another of my Usability Atrocities with its legendary Strategy to develop Short Breaks for Disabled Children.

CSS 2.1 “not ready for use” says journalist

In a further devastating blow to the Web industry, a man on Twitter said that CSS 2.1 is “still not final”, although some irresponsible developers are already using it.

“CSS 2.1 suffers from severe interoperability problems”, said an excitable person. “If you set the height of a box, older browsers will nevertheless allow that box to grow to the height of its contents. This is disastrous to the credibility of these so-called ‘Stylish sheets'”.

“There is absolutely no way that CSS 2.1 can be used in production,” thundered a woman from behind a FrontPage CD. “There’s not even reliable cross-browser support for list-style-type: armenian!” (Test).

“It’s a scandal!” said a journalist who once saw a mildly pornographic image on a computer. “It shows that social networking, when combined with CSS, causes cancer and moral decline.”

Shares in office furniture manufacturing firms rocketed as IT Directors spontaneously and simultaneously evacuated themselves on learning that CSS 2.1 is still in development and not yet a full standard.

“The CSS 2.1 spec may not be finished until next Thursday, or even later” a bewildered-looking man with spectacles said breathlessly, clutching newly-purchased trousers tightly to his chest.

“We’ll have to go back to tables and spacer GIFs until further notice!” he continued while wheeling a chair out of Ikea and putting on a tinfoil hat.