Examining a complete progressive enhancement workflow

At Refunk we use the following workflow when we apply progressive enhancement to a Flash project:

1. Create the Flash content.
2. Translate the Flash content into an HTML equivalent markup.
3. Add the proper semantics.
4. Put it in a logical order.
   Consider how your “low specs” target audiences will view your content. For a visitor using a text browser or mobile device, the order of the basic content is important.
5. Create CSS and add “presentational” markup.
   For styling purposes, add div and span elements and id and class attributes. For the latter, we try to use meaningful names that explain what an element is rather than how it is presented.
6. Create JavaScript and add “behavioral” markup.
   As in Step 5, we only add JavaScript to improve the usability of the CSS enhanced version—for example, for tabbed navigation or client-side input validation.

Let’s put this into practice. Example 3 (available in the accompanying ZIP file) shows a progressively enhanced microsite that consists of basic markup, a CSS-enhanced version, and a Flash-enhanced version. Figures 7 and 8 show what the different versions of the same website look like.

Figure 7. Example 3 web page using a web browser with the required Flash and JavaScript support

Figure 8. Example 3 web page using a CSS-enabled browser without the required Flash and JavaScript support

To get a feeling what your website looks like on a mobile device or a text browser, Opera includes a few handy browser style sheets to emulate both the view of text browsers (select View > Style > Emulate text browser) and handheld devices (select View > Small screen). Figures 9 and 10 shows what Example 3 looks like with Opera’s “small screen” and “emulate text browser” style sheets applied.

Note: To see these differences, you have to disable either JavaScript (select Opera or Tools > Quick Preferences > deselect Enable JavaScript) or your plug-ins (select Opera or Tools > Quick Preferences > deselect Enable Plug-ins).

Figure 9. Example 3 web page using Opera’s “small screen” style sheet

Figure 10. Example 3 web page using Opera’s “emulate text browser” style sheet

As Example 3 demonstrates, progressive enhancement makes it easy to create complete user experiences that are visible to your whole target audience, independent of their browser technology support and optimized for search engine indexing.

The cost of progressive enhancement

One concept that’s often misunderstood is the extra cost associated with progressive enhancement. Some people even think that progressive enhancement will multiply the scope of a project.

The real cost varies from project to project, and depends largely on both the type of content and functionality, and amount and complexity of the enhancements. Keep in mind that often the simple approach already suffices to be effective. If you have a small budget, it is key to keep things simple.

You should realize that a lot of the work required for design and content creation has to be done only once for the entire project. In addition, developing a simple HTML and CSS version is far less labor-intensive than developing rich Flash content.

In the end, progressive enhancement has to sell itself by careful weighing of its benefits and costs. If it is a project requirement to deliver search engine–friendly, accessible content, a client will often have enough budget available to go the extra mile.

Where to go from here

This article gives you an overview of what progressive enhancement can mean for Flash development. The article itself contains several departure points to more in-depth documentation. However, there are a few more directions I would like to mention.

First there is the possibility to use a server-side language and XML to reuse content for both Flash and HTML. You could also apply stateful limking and reuse named anchors as a way to both navigate through the states of your Flash application and jump through your basic content.

For developers who use Flex or build a lot of Flash forms, Hijax can be an interesting principle.

Finally, another option to explore is the power of linked XML formats, like RSS or RDF.

Personally, I am a big fan of both Flash and web standards. For me it is great to see both worlds are slowly growing together. Although some people like to believe that both toolsets are exclusive, I believe the opposite and think they can greatly complement each other. Progressive enhancement for Flash is all about using the best practices of both worlds to create great and complete user experiences.