MikePadgett.com

Progressive enhancement and Flash: no longer a pact with the Devil

— Using xHTML as an accessible data source for Flash objects just got a bit easier thanks to Faust.”

For me, Flash development pretty much dropped off the radar in 2004. Jakob Nielsen famously killed the idea of Flash as the be-all and end-all of websites and suddenly, like the stock market interest in the dotcoms, the buzz had gone.

I wrote about Flash again in 2006 on the occasion of the technology’s tenth birthday, noting at the time that it was thanks to Flash that the online video boom had happened.

Flash design 1.0

Why did everyone stop doing Flash sites?

1. Good design goes to heaven, it is often said, and bad design goes everywhere. Accessibility and usability suffered while the keyframes fizzed by. If you allowed your website to become a puzzle, as Nielsen concluded, users would just go elsewhere.
2. The Internet has always been a fickle sort of business, particularly once the marketers got into it. Flash as a key differentiator eventually and inevitably reached saturation point. There was no longer a wow factor to be had in whizzing keyframes: like the bodykitted Vauxhall Nova, every idiot had one.
3. The future of the Internet was predicated on ‘social’ (and therefore interactive), user-generated content and relationships yet 99.9% of Flash sites were 99.9% read-only.
4. Javascript libraries reignited, then accelerated, the capabilities of the ‘traditional’ XHTML-CSS interface.

A place in the sun

The environment in which Flash finds itself today is rather different. Accessibility, usability and web standards are essential factors. Browsers are generally much improved. Business efficiency and profitability are paramount.

And within that environment Flash still has a place that, when implemented correctly, continues to be unchallenged in terms of relevance and effectiveness. It’s the format of choice for online video and music delivery, it’s still interoperable with excellent XML support and it continues to gain traction in the ever-growing mobile market.

Progressive enhancement and visualisations

Though much maligned as a user experience killer in the bad old days, most developers recognise the benefits of Flash in small doses. Flash was and is incredibly useful for visualisations. The last time I used it heavily, for example, was in the development of a floorplanning tool. I use it more often, however, for graphing numbers and geographical mapping (though GoogleMaps has increasing advantages).

When the metaphor is necessarily visual and the data is dynamic, there isn’t much out there that can match Flash for quick, effective results.

Now with ‘modern’ methods, we can also provide an accessible experience. Any HTML table of data, or an ordered list of countries and their attributes, is a candidate for visualisation and pre-formatted data source. The original data will still be there on the page but a bit of simple DOM work can convert it into something Flash can use.

Faust and the DOM

As with many of these ‘development trends’, we’ve been doing it for years but some smart folks had to put a name to it. In this case, it’s the agency Space150 and they’ve named it after everyone’s favourite devil-dealer Faust.

The idea is to provide content on the page and have Flash use that content via its support for XML. The visualisation is displayed and, typically though not always, the original content is hidden by recourse to Javascript.

So it follows that the content exists without Flash requesting it, which means that it’s accessible and search-engine friendly.

What’s interesting though, is how the developers got around DOM limitations caused by Internet Explorer’s serialisation of HTML rather than XML. Consider the following example:

<ol id="countries">
<li id="cty-1"><a href="#">Algeria</a></li>
<li id="cty-2"><a href="#">Argentina</a></li>
<li id="cty-3"><a href="#">Australia</a></li>
<li id="cty-4"><a href="#">Belarus</a></li>
<li id="cty-5"><a href="#">Brazil</a></li>
<li id="cty-6"><a href="#">Canada</a></li>
<li id="cty-7"><a href="#">Chile</a></li>
</ol>


In Javascript, we ask:

alert(document.getElementById('countries').innerHTML);

or with JQuery if you prefer:

alert($('#countries').html());

Here’s the DOM excerpt from Firefox:

Now note the equivalent excerpt from Internet Explorer:

See how the nodes get capitalised and the @id is stripped of quotes? This isn’t “illegal” behaviour, but it is exceptionally irritating. Passing that IE excerpt as a string to Flash via flashvars is a recipe for trouble.

The developers “sanitise” this DOM output by converting it to XHTML (and therefore well-formed XML) using a (relatively) simple function contained in their innerxhtml.js:

// innerXHTML
// -------------------------------------------------------
// Copyright (c) 2006 space150, LLC and released under the CPL license:
// http://opensource.org/licenses/cpl1.0.php
// -------------------------------------------------------
function innerXHTML(obj, encode) {
   // It is an option to pass innerXHTML() a string indicating an id attribute
   if (typeof obj == "string") {
      obj = document.getElementById(obj)
   }
   var open = '';
   var content = '';
   var close = '';
   var tagname = obj.nodeName.toLowerCase();
   var emptytag = (obj.nodeName.match(/area|base|basefont|br|col|frame|hr|img|input|
      isindex|link|meta|param/i)) ? true : false;

   // Write open tag
   open = '<'+tagname;

   for (var i=0; i<obj.attributes.length; i++) {
      if (obj.attributes[i].specified && obj.attributes[i].value != "null") {
         open += ' '+obj.attributes[i].name.toLowerCase()+'="'
            +obj.attributes[i].value+'"';
      }
   } open += (emptytag) ? ' />' : '>';

   if (!emptytag) {
      // Write tag content
      for (var i=0; i<obj.childNodes.length; i++) {
         var node = obj.childNodes[i];
         if (node.nodeType==3) {
            content += node.data;
         else if (node.nodeType==1) {
            content += innerXHTML(obj.childNodes[i], false);
         else {
            content += " ";
         }
      } // Write closing tag
    close = '</'+tagname+'>';
    }
    // URI encode the content if desired
    return (typeof(encode)=="undefined" || encode==true) ? encodeURIComponent(open+
      content+close) : open+content+close;
}

Et voilà! Beautifully done.