I will show you how to use the new features in HTML5 to create mobile games and the hoops you have to jump through to build a sleek and responsive user interface while trying to avoid most of the headaches that come with the job when you are always an edge case.

1. Fast Mobile UIs
You’re an Edge Case
Thursday, 8 March, 12 1

2. Who am I, right?
Horia Dragomir
UI Developer @ wooga
HTML5 Social Games
Thursday, 8 March, 12 2

3. Mobile UI != Desktop UI
Thursday, 8 March, 12 3

4. Mobile UI is Harder
• Awesome standard support
• No IE6
• Super hardware
Thursday, 8 March, 12 4

5. Forget What You Knew
Thursday, 8 March, 12 5

6. Learn by Doing
Thursday, 8 March, 12 6

7. Learn by Solving Problems
Thursday, 8 March, 12 7

8. We Used to Have No
Debugging
Thursday, 8 March, 12 8

9. Thank you, Adobe and
Opera!
Thursday, 8 March, 12 9

10. Viewport
Thursday, 8 March, 12 10

11. Viewport
• It's actually hard to use the full screen
• Use a custom hack
Thursday, 8 March, 12 11

12. Viewport
• Viewporter tries to solve this problem, but
fails
• You webapp will run in far too many
environments to create profiles for
Thursday, 8 March, 12 12

13. Speed
Thursday, 8 March, 12 13

14. iOS versus Android
Android is usually half as fast*
Thursday, 8 March, 12 14

15. iOS versus Android
Android is usually half as fast
http://daringfireball.net/linked/2012/03/05/ios-android-html5-benchmarks
Thursday, 8 March, 12 15

16. Loading Speed
• Show first, load later
• Loading JS can freeze the UI
• Lazy-loading?
Thursday, 8 March, 12 16

17. HTTP Hates You
Roundtrips are expensive
Try pipelining
Thursday, 8 March, 12 17

18. applicationCache is a lie
• Loads in one gulp
• Loads in order
• the UI will hate this
• Use it with care
Thursday, 8 March, 12 18

19. Golf Everything!
140byt.es
Thursday, 8 March, 12 19

20. Golf?
• Make you application smaller and smaller
and keep it as small as you can
Thursday, 8 March, 12 20

21. Be Awesome!
Thursday, 8 March, 12 21

22. Be Awesome?
Thursday, 8 March, 12 22

23. Thursday, 8 March, 12 23

24. You Don’t Need jQuery!
• I <3 jQuery, but not on mobile.
• jQuery fills in gaps in APIs
Thursday, 8 March, 12 24

25. HTML5 is Awesome!
Thursday, 8 March, 12 25

26. USE IT!
Thursday, 8 March, 12 26

27. .querySelectorAll()
• [].map.call
• super fast!
Thursday, 8 March, 12 27

28. .querySelectorAll()
[].map.call(node.querySelectorAll('a .super'),
function (child) {
//awesome stuff here
});
Thursday, 8 March, 12 28

29. .querySelectorAll()
http://snook.ca/archives/javascript/going-
simple-with-javascript
Thursday, 8 March, 12 29

30. getElementsByClassName
• blazing fast!
Thursday, 8 March, 12 30

31. getElementById
Thursday, 8 March, 12 31

32. Use Event Bubbling!
Thursday, 8 March, 12 32

33. Use Event Bubbling!
instead of addingEventListeners to every
node, just add one to their parent.
It’s what the cool kids are doing!
Thursday, 8 March, 12 33

34. XMLHttpRequest
rocks the boat
• req.overrideMimeType('text/plain;
charset=x-user-defined');
Thursday, 8 March, 12 34

35. req.responseCode < 400
Thursday, 8 March, 12 35

36. req.responseCode < 400
An AJAX request to an asset already stored
in applicationCache will sometimes yield a
responseCode of 0
Thursday, 8 March, 12 36

37. pushState for navigation
• hashChange if you're afraid of pushState
Thursday, 8 March, 12 37

38. requestAnimationFrame
Thursday, 8 March, 12 38

39. requestAnimationFrame
• function(a,b){while(a--&&!
(b=this["oR0msR0mozR0webkitR0r".split(0
)[a]+"equestAnimationFrame"]));return b||
function(a){setTimeout(a,15)}}(5)
• https://gist.github.com/997619
Thursday, 8 March, 12 39

40. Redraws Hate You
• The feeling will be mutual
• Use as little DOM nodes as possible
• Make top level changes that cascade
Thursday, 8 March, 12 40

41. CSS is your friend
Thursday, 8 March, 12 41

42. Animations are hard
• Think of the poor CPU
• Use transitions!
• Use CSS3 transforms
Thursday, 8 March, 12 42

43. Also, cheat and add dummy transforms just
to get things HW accelerated
Thursday, 8 March, 12 43

44. Android hates multiple
transforms
You will end up having simplified animations
for Android. That’s OK.
Thursday, 8 March, 12 44

45. Also, turn off Hardware Acceleration for
Android 2.x
Thank you, Ben Green!
Thursday, 8 March, 12 45

46. node[data-mode=”super”]
• set attributes, not just classes
• classes are cool for binary switches, though
Thursday, 8 March, 12 46

47. Tread with care
• CSS3 does not always follow live DOM
events
Thursday, 8 March, 12 47

48. Tread with care
• CSS3 does not always follow live DOM
events
• See this for an example:
http://jsbin.com/orolov/12/edit#html,live
Thursday, 8 March, 12 48

49. Small hacks go a long way
Thursday, 8 March, 12 49

50. onclick is broken
for a good reason
Thursday, 8 March, 12 50

51. Roll your own “onclick”
• use touchstart, touchmove and touchend
• enable longtouch listener
Thursday, 8 March, 12 51

52. document.addEventListener('touchend', function () {}, false);
This enables the :active selector and
increases the perceived responsiveness of
your app
Thursday, 8 March, 12 52

53. Perceived Responsiveness
Delay JS heavy execution to allow the UI to
respond fast.
Thursday, 8 March, 12 53

54. Perceived Responsiveness
http://alexmaccaw.co.uk/posts/async_ui
Thursday, 8 March, 12 54

55. Thursday, 8 March, 12 55

56. Thursday, 8 March, 12 56

57. Thursday, 8 March, 12 57

58. format-detection telephone=no
This will not always work, so you will need
to insert dummy <span>s here and there
Thursday, 8 March, 12 58

59. pointer-events: none;
user-select: none;
user-drag: none;
Thursday, 8 March, 12 59

60. name=viewport content="initial-scale=0.5"
• Use CSS3 transforms to scale things back
to size
• Or just use bigger graphics
Thursday, 8 March, 12 60

61. Use optimized images
• pngnq
• spritopia
• Android has navigator.connection
Thursday, 8 March, 12 61

62. Android was broken,
though
Thursday, 8 March, 12 62

63. You should be an edge case
this means you're doing something special
Thursday, 8 March, 12 63

64. You should be an edge case
this means you're doing something special
@hdragomir @wooga
Thursday, 8 March, 12 64