• It’s held separately by n different organizations and we can’t join it up.
• It will make people angry and scared without helping them.
• It is technically impossible.
• We do not own the data.
• The data is just too large to be published and used.
• Our website cannot hold files this large.
• We know the data is wrong.
• We know the data is wrong, and people will tell us where it is wrong.
• We know the data is wrong, and we will waste valuable resources inputting the corrections people send us.
• People will draw superficial conclusions from the data without understanding the wider picture.
• People will construct league tables from it.
• It will generate more Freedom of Information requests.
• It might be combined with other data to identify individuals/ sensitive information.
• It will cost too much to put it into a standard format.
• Our IT suppliers will charge us a fortune to do an ad hoc extract.

So just be prepared, these and other concerns will be expressed and need to be countered. Apparently administrations cling to “their” data and need to learn that it’s our data to begin with.

What would Rupert do?

The usual marketing scheme for a successful series would be selling licensed products. So there is a loveless website, t-shirts, coffee mugs, DVDs, comics, eventually the stars produce a mediocre pop song. Fan pages will be sued, and the industry would bitch about weak sales because of evil pirates. However we’ve seen more successful ways, for example when the fantasy and science fiction novels that came along with Forgotten Realms or Shadowrun became more popular than the original role-playing games. All those products are set in the same fictional world, but the different media remain closed in themselves: for understanding the novels it is not necessary to know the game.

Then what is transmedia? Here is a quick introduction:

“Heroes provides the most innovative and immersive interactive TV experience on the web.”

Central in that universe is the TV series, accompanied by a wiki, web comics (in JPEG, flash or PDF format), several websites, mobile strategies, webisodes exclusively published on the web and many more – and they all form a narrative whole!

Transmedia Storytelling

When a character doesn’t appear in the series for a couple of episodes, their story goes on in the webcomics. The fictional characters have their own blogs, pages on MySpace and Facebook and ask their fans for help via SMS. Hanna even publishes clips from news channels in her blog. A fictional candidate for the US congress has his own website hacked by Hanna. Another discusses scientific theories in his book Activating Evolution (would be even more convincing if it was out-of-sale at Amazon). Fictional companies appear in the series, fans can apply for jobs on their websites thus getting insider information, or they can “hack” their surveillance cameras. Fan fiction and art is supported and can eventually become part of the series.

That idea isn’t exactly new, emotionally drawing in the fan base through “secret” information. As early as 1997, before the Star Wars prequels, George Lucas registered numerous domains temporarily forwarding to starwars.com. Then the information was spread around in Usenet and they observed which domains generated the most page views. Then a mysterious swamp environment was created at naboo.com. Apart from the usual swamp noise we can hear the calls of the Peko bird and the Nuna toad. Subtly playing with the methods of easter eggs those animals will move across the screen when you enter “peko” or “nuna” hearing their sounds. After about five minutes the swamp water begins to ripple. If you click on it you originally landed on a simple page with background information. Of course ten years later Heroes is editing and interweaving the content more elaborately – originally there were five people on their web team, now there are more than fifty.

Heroes has a world wide fan community – even in countries where the series isn’t officially aired on TV. It’s one of the most unauthorized downloaded torrents on the web. At least producer Tim Kring doesn’t mind that: Kring says “we fish where the fish are.” The whole multimedia strategy is designed for numerous sources of income. If fans get hooked via illegal downloads, the company will earn money elsewhere with them.

Most importantly today’s fans want to participate in “their” series, and this means more than offering contests and sueing them when they actually adopt content. Heroes is the pioneer massively involving their fan community into that complex alternate reality. The web provides the central communication platform, technically but most important creatively. In that depth this is an entirely new challenge for TV providers and Internet agencies!

What can we learn from this?

On YouTube alone on this topic there are some 1,500 videos with a total duration of 25.2 hours. There are videos on almost every topic, however bizarre they may be. Even on topics that aren’t any topic at all, like “we got some food at McDonald’s and film now how we eat burgers.” Who watches that stuff? Hardly anybody. Welcome to the “long tail,” the niches of exponential decline accounting for a large amount of more than 100 million videos on YouTube.

There is a point when those niches become unmarketable. We’ve seen in the video above how larksome kids set their car on fire, or half a forest. Others test flamethrowers in their bedroom or try to light a cigarette with a flamethrower. These are rather silly actions, not mentioning obviously illegal things – alone on the consuming of psychoactive salvia (prohibited in Germany) there are 13,700 videos on YouTube.

Nobody would buy adverts on such a video. However, YouTube is financed by advertising. At the same time it becomes exponentially easier to produce and upload videos with a camera on your mobile: the “long tail” gets longer, thus the costs for hosting and streaming. Well, at the same time those latter factors get cheaper by the hour, but with the commercialization of those platforms the question arises: are those microgenres endangered? And what would we miss if we didn’t have these obscure contents any more?

Microgenres are the primeval soup of the Internet. Here the trends of tomorrow crop up, therefore they are also an economic driving force.

Even if there’s no such things as a community, a subculture of youth with self-made flamethrowers – for example the discussion whether there is a danger of flames flashing back into the container appears over and over again – still those contents create social relationships.

With those single irrelevant snapshots in time our society has the unique opportunity to create a comprehensive archive of everyday life of the 21st century. Just think of the scientific value of these recordings today or in a hundred years! Therefore yes, what we consider trivial today will have considerable historic-documentary or scientific value tomorrow.

And yes, in the hands of a company like Google that is subject to commercial constraints and changes, this content is in danger of getting deleted. Out of the top 100 companies existing a hundred years ago, today still three exist. While commercial, expensively produced content has linear growth, non-commercial content grows exponentially. When there is a point where the marketable part cannot support the other any longer, we are facing the loss of this archive of amateur recordings. Unless Google knows and speculates with that value?

A possible solution might be a new initiative by Wikimedia: let’s get video on Wikipedia. Because even while today 1,500 flamethrower videos are still irrelevant for an article on Wikipedia, they could find a new home at Wikimedia Commons.

1. What are the issues of accessibility in HTML 5?
2. What is the canvas element?
3. What is the difference between video built in natively in the browser or provided through a Flash plugin?
4. Why are people in the HTML 5 working group so nasty to each other?
5. Why is accessibility important in an emerging standard?
6. Can’t accessibility be added later?
7. What is the state of support of HTML 5 in browsers?
8. When can we start to use HTML 5?
9. What can geolocation do for accessibility?
10. Does assistive technology support HTML 5 features?

So please vote for it now, and while you’re at it, show your love to some other accessibility and web standards proposals as well. </thxkbay>

The main idea is to present leading innovators and their perspectives on eAccessibility from the technical, political, and economic side. Experts on seven panels will briefly describe their own work and their view of accessibility and then discuss the issues.

There’s an illustrious line-up of speakers including Deutsche Bahn, the European Commission, France Télécom, the German Federal Ministry of Labour and Social Affairs, Google, IBM, Microsoft, Mozilla, Opera, the W3C, the Web Standards Project, and Yahoo! talking about these topics:

• Accessible Web Applications
• Mobile Access — Device-independent or Accessible?
• Comparison of National Accessibility Guidelines
• Accessible Rich Internet Applications (ARIA)
• Web Standards and Accessibility in Higher Education
• Harmonising European Accessibility Guidelines
• The Business Value of Accessibility

If you have been following my posts in the last two years this will sound slightly familiar. Furthermore I’m honored to have Linda Mauperon, Member of Cabinet of the European Commissioner for Information Society and Media (Viviane Reding) as our keynote speaker. Please see the detailed description of the panels in the conference program.

We would like to take a look on accessibility from different perspectives presenting pioneering thinkers whose organizations have established accessibility in their business and communication long since — and making serious money with it. There should be something of interest for everybody among the topics: for techies, consultants, employees from universities and companies. The conference is limited to a maximum of 200 attendees. Registration opens next week.

Of course there are various gems under the hood of the website, too. Naturally it is extensively accessible (check the cool skip links), but it is also incredibly fast because Yahoo!’s best practices for frontend performance are regarded. There are separate style sheets for printing, for iPhones, and for handhelds. The CMS is WordPress µ, having the advantage of administrating both the English and the German version with the same installation.

You can see and download the slides at Slideshare (German). As I promised to write a detailed post about ARIA enhanced tab navigation for the Webkrauts web standards advent calendar (think of a German version of 24 ways) you will be able to enjoy an English tutorial soon. Never mind the references to Chris in the slides — I had to choose an example from my flickr pictures, and I believe there are too many presentations already with kittens.

The conference was surprisingly innovative: I half expected a crowd of suits as the event was co-organized by the Austrian Ministry of Health, Family and Youth, instead there were many young faces and a fair percentage of women. Things I have learned (and tweeted about) include:

• As of January 2009, websites sponsored by the Austrian Ministry of Health will only receive funding when they are accessible. That doesn’t come as a surprise as a European Ministerial Declaration in 2006 announced that accessibility and best practices could become mandatory in public procurement in 2010.
• Artur Ortega showed examples of Dirk Ginader’s accessibility features for Yahoo! Finance, including two input fields where the labels were dynamically updated after a currency was chosen. So a screenreader read “convert pound sterling to euros” instead of “convert currency to currency.”
• One reason for JavaScript enhanced HTML controls for Flash objects like Yahoo! video is that the Flash object cannot get tab focus when the wmode param is set to opaque or transparent. Still without that param it is impossible to tab into a Flash object in Firefox 3. Or did I overlook something?
• Designer Maria Putzhuber quoted an interesting delusion: 70% of designers believe that visitors are almost always able to maintain orientation while in fact just 10% of the visitors are able to achieve this. What do you think is the reason?

Deutsche Fassung

Other conferences

The next geek meeting held in Frankfurt will be the Webmontag (Web Monday) on September 1st where I will give my presentation about canvas a short test drive.

A few days later on September 4 I have the honor of the opening talk at the Web Congress at the University of Erlangen, again about canvas, only this time a full hour.

On September 25 there’s the Best of Accessibility Symposium in Düsseldorf where I hold a workshop about hands-on ARIA (you recognize the pattern?).

On October 10-11 an internal namics conference called T-Camp is held in Basel, with my colleague Alex Stirn and me speaking about Professional Frontend Engineering.

A conference I’m looking forward to because of the many experts attending and the fair prices is the A-Tag (Accessibility Day) in Vienna, Austria, on November 21. Again I will sing praises of ARIA. This innovative technique can’t be evangelized enough! There’s no website yet for the A-Tag, but I’d recommend to book your journey well in advance to catch the inexpensive flights to Vienna. The conference itself cost only € 35 last year is free because it is sponsored by the Austrian government.

If you happen to be around, don’t hesitate to speak to me.

What are the alternatives? Using background-images with off-screen text? Bad code:

1. <a href="foo" class="button">
2. <span>Alternative Text</span>
3. </a>

1. a.button, button {
2. background: url(foo.gif) 0 −26px no-repeat;
3. display: block;
4. height: 52px;
5. overflow: hidden;
6. position: relative;
7. width: 150px;
8. }
9. span {
10. left: −9999px;
11. position: absolute;
12. top: auto;
13. }

That’s a bad idea with accessibility issues. Screen readers will be able to read the text, but if somebody with low vision has high-contrast custom stylesheets, it is likely that the background-image won’t be displayed. Still the alternative text will be invisible off-screen, so the link or button becomes unusable.

A better solution

Now Google’s accessibility specialist T.V. Raman explained their idea for replacing images with sprites. Here are screenshots of Google search results with images, and with background images disabled:

Google puts the alternative text behind the background image simply by attaching it on the span element, not the anchor. So when CSS or background images are turned off, the text just reappears.

1. <a id="logo" title="Go to Google Home" href="http://www.google.com/">
2. Google
3. <span></span>
4. </a>

1. #logo {
2. display: block;
3. height: 52px;
4. overflow: hidden;
5. position: relative;
6. width: 150px;
7. }
8. #logo span {
9. background: url(foo.gif) 0 −26px no-repeat;
10. height: 100%;
11. left: 0;
12. position: absolute;
13. top: 0;
14. width: 100%;
15. }

There’s only an issue if you have a lot of alternative text, perhaps combined with text zoom, so that it doesn’t fit in the reserved space. But I can live with that.

Congratulations to Google for this ellegant solution, and it’s so simple! Why didn’t I think of it?

I started my conference program with a case study by the BBC. They did a redesign and managed to squeeze formerly 60 images into 3 sliding doors and sprites. Their home page is now under 300K and 30 HTTP requests. Nice to see Yahoo’s Exceptional Performance guidelines go mainstream. About 5% of their users access the site without JavaScript. They don’t get identical features, but they get identical care. For them accessibility isn’t a buzzword, it’s become a natural part of their daily work. So they were able to find out that blur() is not a friend with JAWS. Also the BBC plays well with the other kids: they joined the OpenID foundation, and with BBC backstage they open their content through an API. Another charming idea is their public beta where people can testdrive new features. About 60% have personalized their home page, although one of the speakers described the personalization features with “my mom’s head exploded.” They used agile development with 2 week sprints, run the website in 12 languages, but don’t have a CDN yet because of the license fees.

Another case study about the LOHAS community Edenbee wasn’t that exiting, mostly because I knew the platform since beta and didn’t get quite why I should speak with other people about changing their lightbulbs. But it’s nice to keep track of your carbon footprint, a feature that uses the AMEE open API.

I was curious about HTML 5, so I went to the presentation of Lachlan Hunt and James Graham. Still I don’t see any advantage of having a bunch of new elements that are incompatible with older browsers when I can achieve the same with ARIA attributes. But I understand the rationale behind some of their decisions, although that doesn’t mean I come to the same conclusions.

For example people use a lot of “nav” and “menu” classes. To make their live easier, the WHATWG came up with the idea to create a nav element. A block level element, so you wouldn’t have to use those <div class="nav"> any more. But every time I use something like class="navigation" it will be an unordered list! I don’t need another div, I’m perfectly happy with my ul and role="navigation". It’s truly backward compatible, it’s semantic, I can use it today, and there isn’t a steep learning curve.

Then I went to two design talks by Andy Clarke and Dan Rubin, and though their designs were beautiful, the code examples were not. Imagine the flexibility of a newspaper article and compare that with the inflexibility of absolutely positioned paragraphs with fixed heights. Exactly. Apart from that Andy’s main inspiration came from comic books. It never hurts to throw in some colorful images.

Like in comic books, usability is not about getting from A to B, it’s about the experience of getting from A to B. In comic books the size of a panel and the amount of text strongly influences the reading speed. So you can emphasize content and add dynamics in your web design. That doesn’t mean necessarily that everything has to be in boxes. Emphasis can also be added by removing the boxes.

Dan Rubin used a lot of effects on his designs, like a noise filter to add texture on monochrome surfaces. Nice idea, though that implies the designer explaining the rationale of such a feature to the front-end engineers. They would either ignore it because they overlooked the subtle texture or because they assumed it would be just noise. Some less intrusive hint I will readily adopt was using a letter-spacing of −1 on headlines to prevent tiny rivers between letters.

What slightly worries me is that Dan talked about re-using patterns for some effects in Photoshop. Re-using patterns is the same in CSS, but re-usable effects in Photoshop can mean an unusable amount of work in CSS and lots of pictures making the website slow. What I miss so far is a common understanding of effects and patterns that are both easy to work with in Photoshop and in frontend programming.

The next day started with Nate Koechley’s keynote about professional frontend engineering. He chose the topic because he thinks this is critical to the advancement of the Internet, and I couldn’t agree more. As Frontend Engineers we write software with XHTML, CSS, JavaScript, and quite some amount of PHP. Douglas Crockford calls this “the most hostile software development environment imaginable,” and if you take a look at this graphic from Nate’s slides you will understand why. There are a number of knowledge areas that can be applied in a number of ways on three operating systems and half a dozen browsers in two rendering modes. If you ever wondered why you sometimes see little clouds of smoke coming out of your frontend engineering heads, that’s why.

There are four guiding principles:

1. Availability and accessibility for all users worldwide
2. Openness: share, learn, support, advocate
3. Richness: provide, but not too much
4. Stability

Then there are three core techniques: Graded Browser Support, Progressive Enhancement, and Unobtrusive JavaScript.If you haven’t heard about those concepts, please read about them now.

At that point the presentation turned into giving advice for quite a number of best practices and tips, like using JSLint, YUI Unit Testing, or YUI Profiler to enhance the quality of your code. Or serving cacheable assets from cookie-free domains. Or anticipated preloads: sneak in your new JavaScript and CSS files a week before the relaunch. Or did you know that the iPhone 2G can keep only 19 assets in cache, and that it doesn’t cache anything larger than 25K? Uncompressed 25K? Needless to say, Nate’s presentation was one of the conference highlights.

Later I heard a few things about building applications with existing frameworks and APIs, a timely comparison between JavaScript libraries held by no other than jQuery’s John Resig, some tips on internationalization by Richard Ishida, and a panel about accessibility. The one sentence that stuck most in that panel was: “Don’t be the guy with the problems, be the guy with the solutions.” In fact it’s very hard to be passionate about your job while being pragmatic and providing solutions instead of just saying “no.” Something Richard Schwerdtfeger wrote about in a different context:

Working in the accessibility field is extremely difficult. It requires very specialized skills — including incredible persistence. Accessibility is often viewed as additional work that is not always planned for. It requires a person who is tough, committed, patient, and caring to deliver an accessible solution that is usable to our customers. To do this you must have tremendous passion for your job as there is always someone or something to trip you up.

Combining passion and diplomacy is a goal many web evangelists still have to work on… In the meantime remember that accessibility is most likely to have a sustainable impact when it is supported by senior management, when there is an accessibility policy for a company, and when smart companies realize that there is money to be made by maximizing the target audience.

Also ARIA became a bit of a buzz since only three days before Microsoft announced support for it in Internet Explorer 8. So there is partial support in Firefox 1.5, more in Firefox 2.0, and full support including liveregions for dynamically updated content in Firefox 3.0. Also Opera 9.5 has it. It can be used today as it doesn’t break old browsers, they will simply ignore the new attributes. Don’t hesitate, you can do good with it right now.

In the meantime Aaron Leventhal and his fellows were busy negotiating with members of the HTML5 working group to find a way of implementation without namespacing. So as of Firefox 3.0 it will be <img role="checkbox" aria-checked="false" /> instead of the previous namespaced notation aaa:checked="false".

Microsoft also thought about addressing the new attributes in the DOM, alas they did it the old proprietary way instead of sitting at a virtual or real table with the other browser vendors and thinking of a common way to do this. Opera’s Anne van Kesteren and the participants at the Browser Wars panel at SXSW were picking heavily on that subject. I believe the IE team got the message, but for the moment I would suggest to ignore the non-standard DOM attributes.

Thanks again to Gez, Becky, Lisa, and Shawn for their input and help. You made this a first-class experience!

Further reading

• W3C WAI-ARIA Overview
• Mozilla Developer Center ARIA FAQ
• A List Apart: Accessible Web 2.0 Applications with WAI-ARIA