Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Mobile - some experiences

HTML5 Mobile - some experiences

Session at the "Next Web 2012" Barcamp in Linz

Stefan Baumgartner

March 26, 2012

More Decks by Stefan Baumgartner

Other Decks in Programming


  1. If you want to view the full-fledged version of this

    talk, go to http://www.fettblog.eu/slides/HTML5Mobile
  2. PREMISE • Working 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
  3. 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
  4. 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');
  5. GALAXY TAB! • I don't usually change the DOM, but

    when I do, i redraw the whole screen
  6. LANDSCAPE AND PORTRAIT MODE @media only screen and (orientation: portrait)

    @media only screen and (orientation: landscape) 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; } } In CSS you have Media Queries to check your screen size and orientation In Javascript, just listen on the onorientationchange Event
  7. BETTER window.onorientationchange = function() { var mql = window.matchMedia("(orientation: portrait)");

    if(mql.matches) { // do portrait stuff } else { // do landscape stuff } }
  8. 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
  9. 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 created some sort of debate with their decision • But we know, Flash fallbacks are not even an option at all ...
  10. 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
  11. 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
  12. AND MOST IMPORTANT But, the iOS JS engine allows API

    calls if a user interaction happened, or if the file already has been downloaded completely iOS devices (and most mobile webkit browsers, like Android) only allow playing sound directly after a user interaction. So
  13. 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
  14. 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); }
  15. 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)