HTML5 Mobile

Premise

Working at Netural, mostly on mobile HTML5-Apps
It's a jungle out there, but HTML5 features are in most cases well documented. A lot of good tutorials are for example on html5rocks.com
On mobile devices, some things are a lot different compared to your desktop browser
So these are just some tips and tricks for web developers, who want to deploy their (multimedia) web-apps on different browsers
Three topics: Animation, Orientation and Audio

Smaller Animations

We have been used to do DOM Animations (with jQuery or consorts), but DOM manipulation always costs on mobile devices
iOS5 devices handle them quite well, but you can feel the difference to the desktop browser even there.
So, whenever possible, use CSS3 Transitions or Animations instead of DOM Manipulation

jQuery vs. CSS3

//Old Way
$('.le-animate').animate({
  width: 300px,
  height: 400px,
  opacity: 1
}, 3000);

//New Way
.le-animate {
  width: 0px; height: 0px; opacity: 0;
  -webkit-transition: all 3s ease-in;
     -moz-transition: all 3s ease-in;
      -ms-transition: all 3s ease-in;
          transition: all 3s ease-in;
}

.le-animate.anim {
  width: 300px; height: 400px; opacity: 1;
}

$('.le-animate').addClass('anim');

BUT!

IE9 does not support CSS Transitions or Animations

Galaxy Tab!

I don't usually change the DOM, but when I do, i redraw the whole screen

Canvas

For more complex animations, just use canvas, right? It's supported everywhere

Flying pigs (by @codepo8) on IE 9 Mobile

Flying pigs (by @codepo8) on Android

Landscape and Portrait

In CSS you have Media Queries to check your screen size and orientation
In Javascript, just listen on the onorientationchange Event

@media only screen and (orientation: portrait)
@media only screen and (orientation: landsacpe)

window.onorientationchange = function() {
  var orientation = window.orientation; // orientation in degrees
  switch(orientation) {
    case 0:   //iOS portrait
      ...
      break;
    case 90:  //iOS landscape
      ...
      break;
    case -90:
      ... 
      break;
  }
}

Better

window.onorientationchange = function() {
  var mql = window.matchMedia("(orientation: portrait)");
  if(mql.matches) {
    // do portrait stuff
  } else {
    // do landscape stuff
  }
}

Best

var mql = window.matchMedia("(orientation: portrait)");
mql.addEventListener(function(m) { 
  if(m.matches) {
    // do portrait stuff
  } else {
    // do landscape stuff
  }
})

Drawback: Is not implemented on all systems (iOS4, Android 2.3)

So in worst case, you have to rely on UA sniffing (urks) or some dirty, dirty tricks

HTML5 Audio in general

Even on desktop browsers, HTML5 Audio is still at an early stage, and we're not talking about the usual format debate
Implementations are very unreliable as of now. This is still one of the main reasons for developers to switch back to Flash fallbacks
e.g. cuttherope.ie. They create some sort of debate with their decision
But we know, Flash fallbacks are not even an option at all ...

HTML5 Audio on mobile devices

First rule: Don't think the support is wide-spread or stable, even if those lists out there say so

Forever alone

Be aware that you can only play one sound at a time, so if you want to have BG music and effects, forget it

And most important...

iOS devices (and most mobile webkit browsers, like Android) only allow playing sound directly after a user interaction. So

But, the iOS JS engine allows API calls if a user interaction happened, or if the file already has been downloaded completely

Common workaround

Use so called "sound sprites". Just have one sound file containing all sound effects back to back.
Define start and ending time of each entry in your sound sprite
Give the user some sort of starting point where he can load the sound file for the first time, e.g. "START APP" - Button

Example

<audio src="sprite.mp3" controls="none" id="myaudio" />

var maudio = document.getElementById('myaudio');

var soundSprite = [
  {start: 0, end: 3000},
  {start: 3500, end: 6789}             
];

element.addEventListener('touchstart', function(event) {
  maudio.play();
  playSoundFile(0);
})

function playSoundFile(idx) {
  maudio.currentPosition = soundSprite[idx].start;
  var x = setInterval(function() {
    if(maudio.currentPosition >= soundSprite[idx].end) {
      maudio.pause(); // There is no stop() in HTML5
      clearInterval(x);
    }
  }, 50);
}

(Almost) last words

Libs like SoundManager2 are great for exactly this task

Do not forget

IE9 Mobile ... just works fine. Not as expected, but overall OK. Soundsprites don't work, but you can play files on demand (without user interaction)

@ddprrt | http://github.com/ddprrt
stefan.baumgartner@netural.com

HTML5 Mobile

some experiences

Premise

Animations

a short one