Flash Windowless Mode (wmode)

Just over a year ago when we were done ideating the “nextgen” Ford vehicles site and moved into prototyping and early production I put this document together. Disabling wmode had long been the practice of my company and being on the team charged with developing the next generation site we felt that enabling it was a compulsory step to stay competitive with our websites moving forward. It stemmed from a discussion with our multimedia team, I can’t remember now the exact words they used but according to them the whole idea of wmode was a bad hack by the Flash development team many years ago and it was the industry practice to never used it. Until then the Ford site had been a pure Flash site so the issue had never seriously arisen, but our whole strategy moving forward was for the site to be pure HTML (with Flash nuggets) so it was imperative that the we enabled wmode moving forward. My aim was to prove that the idea of wmode being bad was ancient and that it was now the common practice to enable it, which I think I did quite nicely and it hasn’t ever come up again.

I wonder what experiences others have regarding this? Was it your practice to not enable it and you now do? Or maybe you still don’t? Or maybe you never did?

Next Gen and Flash Windowless Mode

What is Windowless Mode?

Windowless Mode (WMODE) enables control over Flash applications within a webpage. It is necessary to enable WMODE to allow JavaScript and CSS to fully control the layout and functionality of a webpage that includes a Flash app. Its main benefits include:

· Stacking – allow the flash object to go on top of some elements but underneath others

· Transparency – show content beneath the flash object

The default WMODE is Window. When a Flash app is in its default mode it actually doesn’t belong to the browser, even though it appears to. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. The other two are:

· Opaque: Enables stacking

· Transparent: Enables stacking and transparency, is the most processor intense

Examples:

Disabled

http://www.communitymx.com/content/source/E5141/wmodenone.htm

Opaque

http://www.communitymx.com/content/source/E5141/wmodeopaque.htm

Transparent

http://www.communitymx.com/content/source/E5141/wmodetrans.htm

Who has WMODE enabled?

Sample of Alexa.com top 50 ranking sites that have WMODE enabled:

http://www.yahoo.com/ – Transparent

http://espn.go.com/ – Opaque

http://www.cnn.com/ – Transparent

http://www.flickr.com/ – Opaque

http://www.weather.com/ – Opaque

http://dashboard.aim.com/aim – Opaque

http://www.nytimes.com/ – Opaque

https://www.bankofamerica.com/index.jsp – Transparent

http://www.nba.com/playoffs2008/index.html – Transparent

http://www.bbc.co.uk/?ok – Transparent

http://www.cnet.com/ – Transparent

http://www.netflix.com/ – Transparent

http://www.adobe.com/ – Transparent

http://abc.go.com/ – Transparent

Sample of competitor sites:-

http://www.toyota.com/ – Transparent

http://www.chevrolet.com/ – Transparent

http://www.chrysler.com/en/ – Transparent

http://www.audiusa.com/audi/us/en2.html – Opaque

http://www.gm.com/shop/ – Transparent

http://www.hyundaiusa.com/index.aspx – Transparent

http://www.jeep.com/en/ – Transparent

http://www.dodge.com/en/ – Transparent

http://www.bmwusa.com/Default.aspx – Transparent

http://www.ferraristore.com/ – Transparent

http://www.saturn.com/saturn/SaturnIndex.jsp – Transparent

http://www.miniusa.com/#/MINIUSA.COM-m – Transparent

http://automobiles.honda.com/ – Opaque

http://www.mazdausa.com/MusaWeb/displayHomepage.action?bhcp=1 – Transparent

http://www.gmperformanceparts.com/ – Transparent

Known issues

In IE frame count stays current but interval count lags behind:

http://justin.everett-church.com/wmode/

- Only affects user experience if flash requires a high refresh rate, such as games

- Avoid WMODE for these apps

Animation slow and jumpy with slow processors:

- Our sites currently already experience this with the full flash framework without WMODE enabled, though an html version is available

- HTML site will provide more seamless experience with only Flash apps being affected

- Capture slow experience and offer alternative content?

In Firefox text entry fields do not function correctly with international keyboards:

http://www.5etdemi.com/blog/archives/2005/06/firefox-wmodetransparent-is-completely-screwy-and-breaks-textfields/

- Only applies to user input

- Barely applies to sites built to only serve North America

- Make sure input is captured outside of Flash

- Disable WMODE for flash modules requiring input

- Hacks can be applied to the flash is necessary

Mac Firefox Flash disappears when using translucent overlays:

http://www.hedgerwow.com/360/bugs/opacity-disable-flash-on-mac-firefox.html

- Avoid translucent overlays with Flash

- If absolutely necessary use base 64 encoding for translucent image

Screen Readers cannot see Flash when WMODE is enabled:

http://dynamicflash.com/2006/10/flash-accessibility-and-wmode/

- Use html instead of flash for blocks of text

- Make text contained within Flash available outside of Flash

- Current site lacks accessibility and HTML/CSS layout will go a long way to improve this

Supported Browsers and Platforms

All our supported browsers and platforms allow WMODE to be enabled.

Conclusion

It is important to enable WMODE for modern web page design and functionality. We must embrace WMODE to remain competitive. There are negative issues surrounding WMODE but they can be eliminated by being aware of these issues at design and development stage as the majority of our Flash needs are not CPU intensive. The users negatively impacted by WMODE are a tiny minority. Only enable WMODE when necessary, using opaque setting over transparent when possible. If a Flash app is severely affected by WMODE find a seamless way to serve it with WMODE disabled.

Sources

http://www.communitymx.com/content/article.cfm?cid=e5141