HTML5 Mobile - some experiences

Session at the "Next Web 2012" Barcamp in Linz

Transcript

1. If you want to view the full-fledged version of this talk, go to http://www.fettblog.eu/slides/HTML5Mobile
2. HTML5 Mobile some experiences
3. 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
4. Animations a short one
5. 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
6. 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');
7. BUT! • IE9 does not support CSS Transitions or Animations
8. GALAXY TAB! • I don't usually change the DOM, but when I do, i redraw the whole screen
9. CANVAS For more complex animations, just use canvas, right? It's supported everywhere!
10. DEMO on http://thewebrocks.com/demos/pigs by @codepo8
11. IN A NUTSHELL
12. Orientation also a short one
13. 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
14. BUT!
15. BETTER window.onorientationchange = function() { var mql = window.matchMedia("(orientation: portrait)"); if(mql.matches) { // do portrait stuff } else { // do landscape stuff } }
16. 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
17. HTML5 Audio
18. 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 ...
19. 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
20. 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
22. 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
24. 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
25. 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); }
26. (ALMOST) LAST WORDS Libs like SoundManager2 are great for exactly this task
27. 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)
28. @ddprrt | http://github.com/ddprrt stefan.baumgartner@netural.com