CSS3 and alternatives to Flash on the iPhone

As mobile devices become more prevalent and Apple sticks to their Flashless ideaology, there is a need to start investigating and developing alternatives to Flash for delivering rich content such as ads and animations. CSS3 is what most people will be using to accomplish this. CSS3 will be an open standard – though currently it is very much in development and all the cool stuff only works in Safari and Chrome as WebKit specific parameters. Firefox supports some of the CSS3 tags, but lags behind Safari and Chrome in the animation department.

An interesting topic for UX designers will be how to handle the lack of rollovers or even basic click and drag operations on mobile Safari. If you recall, in Steve Jobs’ anti-flash rant, he criticised Flash for not supporting multitouch (not true) and for relying on mouseovers (also not true). In my searches for cool CSS3 animations, a good portion of these did not work correctly even in mobile safari because clicking and dragging causes the page to scroll, whereas on the desktop it does nothing (or allows selection dependong on what you click on). These are regular HTML and Javascript pages, so it goes to show that this is an interface problem, not a Flash limitation. Both webpages and flash need special treatment if they want to work in a multitouch environment.

Some other things I’ve observed already:

• Basic animations that rely solely on CSS3 seem to work pretty well on the iPad and newer iPhones. My old 3G struggled a bit on some stuff.
• Javascript based animations are slow and expose the weak cpu performance on iDevices. These should be avoided if you are targetting these platforms. Fault Flash for poor perfomance as much as you want, actionscript still performs better than javascript, for now anyway.
• As far as I know, there aren’t any WYSIWYG tools for creating animations using CSS3. Bust open your text editors!

I’m gonna be digging into the specifics of building rich CSS3 content, so stay tuned for more..