Progressive Enhancement with Flash
•Download as ZIP, PDF•
5 likes•3,586 views
How to make your Flash websites more accessible. The 7 habits of highly acessible RIAS and solutions to deploy alternate content with web standards while keeping your experience rich. Post here: http://www.asourceofinspiration.com/2009/02/28/progressive-enhancement-with-flash/
Recommended
More Related Content
Viewers also liked
Viewers also liked (14)
More from Armando Alves
Recently uploaded
Recently uploaded (20)
Progressive Enhancement with Flash
- 1. Progressive Enhancement Enlarge your Flash Accessibility Saturday, February 28, 2009
- 2. Armando Alves asourceofinspiration.com twitter.com/armandoalves armandoalves@gmail.com Saturday, February 28, 2009
- 3. Progressive Enhancement Saturday, February 28, 2009
- 4. Inclusive Web Design Steve Champeon + Nick Finck hesketh.com Saturday, February 28, 2009
- 5. Degradation vs. Looking backward Looking forward Graceful Degradation Progressive Enhancement Saturday, February 28, 2009
- 6. Why should I care? Saturday, February 28, 2009
- 7. Why should I care? Acessibility Saturday, February 28, 2009
- 8. Why should I care? Acessibility Ad Blocking Saturday, February 28, 2009
- 9. Why should I care? Acessibility Ad Blocking Search Marketing Saturday, February 28, 2009
- 10. SWF Searchability ★ An inside look to RIAs and gadgets ‣ AS1 to AS3 support ★ Indexing Flash is limited ‣ Textual Content and URLs ‣ Diminished support to Javascript embedded SWFs ‣ External sources separately indexed ‣ Bidirectional languages are out ‣ Deep linking forgotten Saturday, February 28, 2009
- 11. Why should I care? New devices and platforms Saturday, February 28, 2009
- 12. The 3 layers Saturday, February 28, 2009
- 13. The 3 layers Content Saturday, February 28, 2009
- 14. The 3 layers Content XHTML Saturday, February 28, 2009
- 15. The 3 layers Content XHTML Presentation Saturday, February 28, 2009
- 16. The 3 layers Content XHTML Presentation CSS Saturday, February 28, 2009
- 17. The 3 layers Content XHTML Presentation CSS Interaction Saturday, February 28, 2009
- 18. The 3 layers Content XHTML Presentation CSS Interaction Javascript/Flash Saturday, February 28, 2009
- 21. From Zero to Hero ★ XHTML / CSS ★ Javascript / Ajax ★ Flex / Flash Saturday, February 28, 2009
- 22. “In truth, there are no bad technologies. There are just bad uses of a technology. The cruel hand that fate had dealt JavaScript reminds me of another much maligned technology: Macromedia’s Flash.” - Jeremy Keith, Dom Scripting Saturday, February 28, 2009
- 23. Solutions Saturday, February 28, 2009
- 24. The 7 habits of highly accessible RIAs 1. Be Proactive 2. Come with the End in Mind 3. Put First Things First 4. Think Win/Win 5. Seek First to Understand, Then to be Understood 6. Synergize 7. Sharpen the Saw Saturday, February 28, 2009
- 25. 1. Be Proactive ★ Start with a goal: ‣ Acessibility and Distribution of Information Saturday, February 28, 2009
- 26. 2. Come with the End in ★ Function over form ‣ Essential functions without 3rd layer ★ Consider Different Platforms ‣ Fallback on input devices Saturday, February 28, 2009
- 27. 3. Put First Things First ★ Markup first ‣ Additional functionality enhances experience ★ Basic fallback ‣ Native interactive elements: links, forms Saturday, February 28, 2009
- 28. 4. Think Win/Win ★ Test for Developers, Test for Users ‣ Enhancement according to device capability Saturday, February 28, 2009
- 29. 5. Seek First to Understand, Then to be Understood ★ Understand the devices ‣ Limitations ‣ Capabilities Saturday, February 28, 2009
- 30. 6. Synergize ★ Selective delivery ‣ Device/Browser detection ‣ Stylesheet by media Saturday, February 28, 2009
- 31. 7. Sharpen the Saw ★ Modular code ‣ Extendable to new technologies Saturday, February 28, 2009
- 32. Enhancement in Practice Saturday, February 28, 2009
- 33. SWFObject Alternate Flash Content Content Saturday, February 28, 2009
- 34. XHTML Saturday, February 28, 2009
- 35. XHTML + CSS Saturday, February 28, 2009
- 36. XHTML + CSS + SWFObject Saturday, February 28, 2009
- 37. SWFObject + Alternate Flash + Deep Content Content Linking Saturday, February 28, 2009
- 38. XML +SWFObject + SWF Address Saturday, February 28, 2009
- 39. SWFObject + Alternate Flash + Deep Content Content Linking Saturday, February 28, 2009
- 40. XSLT Transformation in PHP Saturday, February 28, 2009
- 41. Alternate Content Enhancement Saturday, February 28, 2009
Editor's Notes
- A concept brought from engineering, brought to mainstream web development in 2003by Steve Champeon and Nick Finck on their 2003 SXSW talk “Inclusive Web Design For the Future”. Until then, most web development companies were doing what it’s called Graceful Degradation, focusing on the current technologies and offering a small support to older browsers. Back then, most of concerns were related to graphical browsers, with acessible experiences constrained by economical pressures.
- So what’s the difference between the older Graceful Degradation and today’s Progressive Enhancement? Graceful Degradation The website development was targeted for the latest browsers, with some backward support. The main concern was to create a richer experience, with a high focus on presentation. Progressive Enhancement The focus here is on content, and no longer on presentaion for graphic browsers. The main concern is to assure the optimal distribution of content. In modern web development we should look forward, to other kind of displays and platforms. But it does it a concern for all devices, starting with the least capable and walking all the way up to newer devices, enricheing the experiences but still separating presentation from information, with greater concern regarding acessibility and universal distribution, by using current web standards.
- So, the web design isn’t always about the visuals, but also to assure that information is available to the widest audience possible, to make it acessibity. Another recent problem when deploying web applications based on the Flash Platform, is the increasing number of people using Flash blocking extensions, like Ad Block Plus. And for those thinking that a 97% adoption rate of the Flash Player is enough, better think again, because amongst those 3% is one of the highest sources of traffic: search engines.
- So, the web design isn’t always about the visuals, but also to assure that information is available to the widest audience possible, to make it acessibity. Another recent problem when deploying web applications based on the Flash Platform, is the increasing number of people using Flash blocking extensions, like Ad Block Plus. And for those thinking that a 97% adoption rate of the Flash Player is enough, better think again, because amongst those 3% is one of the highest sources of traffic: search engines.
- So, the web design isn’t always about the visuals, but also to assure that information is available to the widest audience possible, to make it acessibity. Another recent problem when deploying web applications based on the Flash Platform, is the increasing number of people using Flash blocking extensions, like Ad Block Plus. And for those thinking that a 97% adoption rate of the Flash Player is enough, better think again, because amongst those 3% is one of the highest sources of traffic: search engines.
- Despite the previous attempts, mostly from Google, to index SWFs, it was only with Adobe’s release of their Searchable SWF library, that rich media became part of the indexed web. The main reasons to improve SWF searchability were the increasing amount of Rich Internet Applications, gadgets and games that were available to large audiences. However, the indexation is pretty much limited. The bot algorithm works much like a real person, exploring the SWF file, clicking in buttons, inserting inputs and traversing on the multple states of the application. For now, it only indexes text and URLs, and ignores images and dynamic content. When first integrated by Google, it also didn’t supported Javascript embedding techniques like SWFObject, but recently that has changed with support for the most common embedding techniques. Other limitations includes the lack of support for dynamic languages and deep linking. The most problematic is still the absence of dynamic content indexing. With so many of RIAs and websites getting data from external sources, like XML files, a lot of the hidden web is still left outside, with no context whatsoever. And even if individual XML documents are indexed, they are mostly useless as they have no context and semantic value whatsoever, thus no help to search engines.
- And, last but not the least, one of the reasons you should care: devices that aren’t supporting (yet) the Flash Platform like the iPhone
- Modern web development is separated in 3 layers: 1) Content From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities 2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2 3) Interactivity While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about. We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
- Modern web development is separated in 3 layers: 1) Content From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities 2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2 3) Interactivity While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about. We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
- Modern web development is separated in 3 layers: 1) Content From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities 2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2 3) Interactivity While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about. We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
- Modern web development is separated in 3 layers: 1) Content From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities 2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2 3) Interactivity While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about. We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
- Modern web development is separated in 3 layers: 1) Content From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities 2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2 3) Interactivity While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about. We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
- Modern web development is separated in 3 layers: 1) Content From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities 2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2 3) Interactivity While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about. We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
- We’ll work our way up from Zero to Hero, from basic web standard based pages to Rich Internet Application. Web experiences don’t have to be dull, but they don’t have to be unaccessible either. We can have it both. Instead of starting by building the rich experinece first, we’ll start with the basics. Content first. Then we add a presentation layer. And then, we apply the rich media and interactivity (Javascript, Flash).
- A interesting comparison to what RIAs can be, with regards to accessibility are the 7 habits of Highly effective people, by Stephen Covey, that i freely adapted for this talk.
- Start with a goal in mind: Accessibility and Distribution, by separating Content / Presentation / Interactivity It will be easier in the end, easier for maintenance at least.
- Functionality first. We should have the basic functionality working without having to use the 3rd layer: If Javascript / Ajax / Flash aren’t there we should still be able to do basic actions. Also, don’t forget where it’s going to be used: in a graphical browser we can use the TAB key to jump between inputs,but on a cellphone there’s no TAB key, so we should keep that in minf and add support for directional navigation with arrow keys.
- Start with the first things: semantic markup Only add additional elements when it gets the experience richer.
- Check if the devices/browsers/platforms support the additional 3rd layer. So don’t add device specific events (onchange and onblur) unless you’re covered all others, so users don’t get frustated with your application on your device.
- Understand the plataform/device/browser From screen resolution to conectivity it all affects how your application behaves.
- Deliver the experience with regards to what your users devices are able to interpret For instance, on Ajax applications, you can use @include to bypass non graphic browsers. Or use media target for stylesheets: print, mobile, screen.
- If you have you code by modules, it will be easier to adapt to richer experiences. From includes with conditional comments to external scripts, it will be easier to maintain the application and extending it when new technologies are available.