Wouldn’t it be nice if you could write your site only once, reach 100% of your audience, adhere to web standards, optimize your site for search, AND use Flash?

If you’re willing to make a deal, you can use a process space150 calls Faust: Flash Augmenting Standards.

Every web developer faces the problem sooner or later. The client – or the designer – wants to use interactive animation, video or sound to communicate their ideas. Flash is your best option.

However, Flash is not an open web standard like HTML, CSS and JavaScript. Because of its popularity, Flash is really a “de facto” standard, widely available to many users, but not all.

Should you build two separate sites? One in Flash and one with web-standard HTML? This can be very time consuming. It’s also very hard to keep the content synchronized. Now you have two versions of the content, which can be a problem for search engines.

Many developers build a “hybrid” site: mainly HTML, with some Flash embedded in the page. This works well for video from sites like YouTube and Vimeo.

But what if you want a Flash menu for navigation? Even if 89.1% of your users have Flash, there are still 10.9% who don’t. They won’t be able to browse your site. And that includes your most connected users: search engine web crawlers like GoogleBot who can help people find your site.

Wouldn’t it be nice if you could write the site only once, reach 100% of your audience, adhere to web standards, optimize your site for search, AND use Flash?

If you’re willing to make a deal, you can use a process space150 calls Faust: Flash Augmenting Standards.

Faust in Four Parts

Web Standards are like a delicious layer cake.

• HTML for structure and content
• CSS for style
• JavaScript for behavior

The layered approach is called Progressive Enhancement, and when it’s part of your site’s recipe from the start, you can feed at least some piece of content to any user who visits. This is especially important for search engines. For the most part, search engine web crawlers like GoogleBot are picky eaters. If you don’t give them a taste of HTML, they’ll find a meal elsewhere.

At space150, we add a fourth layer to the cake:

• Flash, for UI features the browser doesn’t have, and for multimedia (video, animation, sound)

The Faust Process

Here’s the principle: Every element of Flash content should have a corresponding HTML representation.

• For Flash video, add a still image, text description, and link to the video file
• For Flash slideshows, add an ordered list with links to the thumbnails and large images
• for Flash navigation, parse an ordered list of links from the HTML of the page to create the Flash menu

When Flash isn’t available, the user still gets HTML content styled with CSS, and behavior in JavaScript.

We call the entire process Faust, which stands for “Flash Augmenting Standards”. We’ve launched many sites with Faust, and have found it to offer quite a few benefits.

• Faust is search engine friendly

  Search engines will read and index your content, navigate all levels of your website, score, index and rank your website pages accordingly. There are no tricks involved – a search engine robot will see the same content the user sees.

• You only need one codebase

  In Faust, content for Flash is a single source of data: the HTML. You don’t need a new XML structure. The same lists, images, and links you display for users without Flash are consumed for users with Flash.

• It’s easy for your CMS

  Any content management system that outputs valid HTML will work.

• Add multimedia without compromising basic accessibility

  Although users without the Flash player will not see video or animated content, they will benefit from the alternate content you provide. We don’t claim our sites are perfectly accessible. We are looking to the community for help with Faust, to push it forward, and improve accessibility.

I’m a Developer. How Do I Build A Site With Faust?

The recipe for Faust is simple. Start with a base layer of descriptive HTML. Add CSS to taste. Extend with JavaScript where necessary.

From Geoff Stearns article Using alternate content as content in Flash:

The idea is that you build your pages without Flash, then add in the Flash parts later using Javascript if the user has the correct version of the Flash player.

For the Flash layer, we need two additional scoops of JavaScript:

• SWFObject.js to detect and embed Flash (UFO would work as well)
• space150’s innerXHTML.js to collect and pass valid HTML elements into Flash for re-use as XML

Remember, in Faust, every element of Flash content should have a corresponding HTML representation. We’re providing alternative content, and in Faust it’s required—just like an alt attribute is required for images in valid HTML.

For example, let’s say you want to create a Flash slideshow. First, you would add the markup:

<div id="slides">
  <ul class="slides photos">
    <li>
      <a title="The Beach" href="photo1.jpg">
        <img alt="Thumbnail of The Beach" title="Thumbnail of the Beach" 
            src="photo1_t.jpg" />
      </a>
    </li>
    <li>
      <a title="The Sky" href="photo2.jpg">
        <img alt="Thumbnail of the Sky" title="Thumbnail of the Sky" 
            src="photo2_t.jpg" />
      </a>
    </li>
  </ul>
</div>

Now the content is out there for Google, and users without JavaScript and Flash.

Next, we’ll use SWFObject to embed the Flash module. But check out the third line:

<script type="text/javascript">
  var so = new SWFObject("slideshow.swf", "slideshow", "580", "445", "7", "#ffffff");
  so.addVariable("strXML", innerXHTML("slides"));
  so.write("slides");
</script>

space150’s innerXHTML parses the HTML right out of the slides div, passing it to Flash as the variable strXML.

You may be familiar with innerHTML, which returns the HTML inside an element. Unfortunately, the browsers’ internal representations of HTML documents vary widely. Internet Explorer’s version is characteristically egregious:

<UL class="slides photos">
<LI><A title="The Beach" href="photo1.jpg">
<IMG title="Thumbnail of the Beach" alt="Thumbnail of The Beach" src="photo1_t.jpg">
 </A>
<LI><A title="The Sky" href="photo2.jpg">
<IMG title="Thumbnail of the Sky" alt="Thumbnail of the Sky" src="photo2_t.jpg">
 </A></LI></UL>

Yikes! Why are all the element names capitalized? Where did the closing tags go? Firefox and Safari were (much) better, but still inconsistent.

So, we wrote innerXHTML.js which extracts from the HTML a consistant XML fragment that Flash can parse. innerXHTML.js is included in the example code we’re releasing to the community.

In your ActionScript code, create a new XML object from the string returned by innerXHTML:

var xmlData:XML = new XML();
    xmlData.ignoreWhite = true;
    xmlData.parseXML(unescape(_root.strXML));

Now the HTML of your page is available as an XML object in Flash.

It’s quiet. Too quiet …

Ideally, a page built with the Faust process will display so seamlessly that a user without Flash will never know what they’re missing. But you probably want to give them some clue to incite them to get the full experience. Here’s how to invite users to upgrade:

<div id="warning">
  To view the videos and animation on this site, please install the latest 
  <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player</a>
  <noscript> and activate JavaScript in your browser</noscript>.
</div>

Here’s the JavaScript:

if (deconcept.SWFObjectUtil.getPlayerVersion().major >= 7) {
  var element = document.getElementById("warning");
  element.parentNode.removeChild(element)
}

The warning tells the user to install the Flash Player. If the user doesn’t use JavaScript, they receive the additional warning in the noscript tag. If JavaScript works, and the required version of the Flash Player is installed, we remove the warning.

Examples

• Faust Slideshow demo (w/ Flash)
• Faust Slideshow demo (w/o Flash)

The website for Ivy Hotel is an example of Faust in production. Try it without JavaScript. Try it without Flash. Try it without CSS. Same content, all from HTML.

Code Downloads

• faust-slideshow-v1.zip
• innerXHTML.js (utility script from space150)

All code © 2006 space150, LLC. Released under the CPL license

Known Issues

innerXHTML doesn’t work in IE 5.0. We’re working on it.

Read More

• Developing Flash websites using progressive enhancement
• Using alternate content as content in Flash
• Christian Giordano’s Accessible Bar Chart in Flash
• Mike Davidson’s sIFR
• SEFFS
• Jeff Croft on naming “the Flash revival”