Fast Mobile UIs

2,227
-1

Published on

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.

Published in: Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,227
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Fast Mobile UIs

  1. 1. Fast Mobile UIs You’re an Edge CaseThursday, 8 March, 12 1
  2. 2. Who am I, right? Horia Dragomir UI Developer @ wooga HTML5 Social GamesThursday, 8 March, 12 2
  3. 3. Mobile UI != Desktop UIThursday, 8 March, 12 3
  4. 4. Mobile UI is Harder • Awesome standard support • No IE6 • Super hardwareThursday, 8 March, 12 4
  5. 5. Forget What You KnewThursday, 8 March, 12 5
  6. 6. Learn by DoingThursday, 8 March, 12 6
  7. 7. Learn by Solving ProblemsThursday, 8 March, 12 7
  8. 8. We Used to Have No DebuggingThursday, 8 March, 12 8
  9. 9. Thank you, Adobe and Opera!Thursday, 8 March, 12 9
  10. 10. ViewportThursday, 8 March, 12 10
  11. 11. Viewport • Its actually hard to use the full screen • Use a custom hackThursday, 8 March, 12 11
  12. 12. Viewport • Viewporter tries to solve this problem, but fails • You webapp will run in far too many environments to create profiles forThursday, 8 March, 12 12
  13. 13. SpeedThursday, 8 March, 12 13
  14. 14. iOS versus Android Android is usually half as fast*Thursday, 8 March, 12 14
  15. 15. iOS versus Android Android is usually half as fast http://daringfireball.net/linked/2012/03/05/ios-android-html5-benchmarksThursday, 8 March, 12 15
  16. 16. Loading Speed • Show first, load later • Loading JS can freeze the UI • Lazy-loading?Thursday, 8 March, 12 16
  17. 17. HTTP Hates You Roundtrips are expensive Try pipeliningThursday, 8 March, 12 17
  18. 18. applicationCache is a lie • Loads in one gulp • Loads in order • the UI will hate this • Use it with careThursday, 8 March, 12 18
  19. 19. Golf Everything! 140byt.esThursday, 8 March, 12 19
  20. 20. Golf? • Make you application smaller and smaller and keep it as small as you canThursday, 8 March, 12 20
  21. 21. Be Awesome!Thursday, 8 March, 12 21
  22. 22. Be Awesome?Thursday, 8 March, 12 22
  23. 23. Thursday, 8 March, 12 23
  24. 24. You Don’t Need jQuery! • I <3 jQuery, but not on mobile. • jQuery fills in gaps in APIsThursday, 8 March, 12 24
  25. 25. HTML5 is Awesome!Thursday, 8 March, 12 25
  26. 26. USE IT!Thursday, 8 March, 12 26
  27. 27. .querySelectorAll() • [].map.call • super fast!Thursday, 8 March, 12 27
  28. 28. .querySelectorAll() [].map.call(node.querySelectorAll(a .super), function (child) { //awesome stuff here });Thursday, 8 March, 12 28
  29. 29. .querySelectorAll() http://snook.ca/archives/javascript/going- simple-with-javascriptThursday, 8 March, 12 29
  30. 30. getElementsByClassName • blazing fast!Thursday, 8 March, 12 30
  31. 31. getElementByIdThursday, 8 March, 12 31
  32. 32. Use Event Bubbling!Thursday, 8 March, 12 32
  33. 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. 34. XMLHttpRequest rocks the boat • req.overrideMimeType(text/plain; charset=x-user-defined);Thursday, 8 March, 12 34
  35. 35. req.responseCode < 400Thursday, 8 March, 12 35
  36. 36. req.responseCode < 400 An AJAX request to an asset already stored in applicationCache will sometimes yield a responseCode of 0Thursday, 8 March, 12 36
  37. 37. pushState for navigation • hashChange if youre afraid of pushStateThursday, 8 March, 12 37
  38. 38. requestAnimationFrameThursday, 8 March, 12 38
  39. 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/997619Thursday, 8 March, 12 39
  40. 40. Redraws Hate You • The feeling will be mutual • Use as little DOM nodes as possible • Make top level changes that cascadeThursday, 8 March, 12 40
  41. 41. CSS is your friendThursday, 8 March, 12 41
  42. 42. Animations are hard • Think of the poor CPU • Use transitions! • Use CSS3 transformsThursday, 8 March, 12 42
  43. 43. Also, cheat and add dummy transforms just to get things HW acceleratedThursday, 8 March, 12 43
  44. 44. Android hates multiple transforms You will end up having simplified animations for Android. That’s OK.Thursday, 8 March, 12 44
  45. 45. Also, turn off Hardware Acceleration for Android 2.x Thank you, Ben Green!Thursday, 8 March, 12 45
  46. 46. node[data-mode=”super”] • set attributes, not just classes • classes are cool for binary switches, thoughThursday, 8 March, 12 46
  47. 47. Tread with care • CSS3 does not always follow live DOM eventsThursday, 8 March, 12 47
  48. 48. Tread with care • CSS3 does not always follow live DOM events • See this for an example: http://jsbin.com/orolov/12/edit#html,liveThursday, 8 March, 12 48
  49. 49. Small hacks go a long wayThursday, 8 March, 12 49
  50. 50. onclick is broken for a good reasonThursday, 8 March, 12 50
  51. 51. Roll your own “onclick” • use touchstart, touchmove and touchend • enable longtouch listenerThursday, 8 March, 12 51
  52. 52. document.addEventListener(touchend, function () {}, false); This enables the :active selector and increases the perceived responsiveness of your appThursday, 8 March, 12 52
  53. 53. Perceived Responsiveness Delay JS heavy execution to allow the UI to respond fast.Thursday, 8 March, 12 53
  54. 54. Perceived Responsiveness http://alexmaccaw.co.uk/posts/async_uiThursday, 8 March, 12 54
  55. 55. Thursday, 8 March, 12 55
  56. 56. Thursday, 8 March, 12 56
  57. 57. Thursday, 8 March, 12 57
  58. 58. format-detection telephone=no This will not always work, so you will need to insert dummy <span>s here and thereThursday, 8 March, 12 58
  59. 59. pointer-events: none; user-select: none; user-drag: none;Thursday, 8 March, 12 59
  60. 60. name=viewport content="initial-scale=0.5" • Use CSS3 transforms to scale things back to size • Or just use bigger graphicsThursday, 8 March, 12 60
  61. 61. Use optimized images • pngnq • spritopia • Android has navigator.connectionThursday, 8 March, 12 61
  62. 62. Android was broken, thoughThursday, 8 March, 12 62
  63. 63. You should be an edge case this means youre doing something specialThursday, 8 March, 12 63
  64. 64. You should be an edge case this means youre doing something special @hdragomir @woogaThursday, 8 March, 12 64

×