Fast Mobile UIs

  • 1,988 views
Uploaded 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 …

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,988
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
38
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Fast Mobile UIs You’re an Edge CaseThursday, 8 March, 12 1
  • 2. Who am I, right? Horia Dragomir UI Developer @ wooga HTML5 Social GamesThursday, 8 March, 12 2
  • 3. Mobile UI != Desktop UIThursday, 8 March, 12 3
  • 4. Mobile UI is Harder • Awesome standard support • No IE6 • Super hardwareThursday, 8 March, 12 4
  • 5. Forget What You KnewThursday, 8 March, 12 5
  • 6. Learn by DoingThursday, 8 March, 12 6
  • 7. Learn by Solving ProblemsThursday, 8 March, 12 7
  • 8. We Used to Have No DebuggingThursday, 8 March, 12 8
  • 9. Thank you, Adobe and Opera!Thursday, 8 March, 12 9
  • 10. ViewportThursday, 8 March, 12 10
  • 11. Viewport • Its actually hard to use the full screen • Use a custom hackThursday, 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 forThursday, 8 March, 12 12
  • 13. SpeedThursday, 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-benchmarksThursday, 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 pipeliningThursday, 8 March, 12 17
  • 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. Golf Everything! 140byt.esThursday, 8 March, 12 19
  • 20. Golf? • Make you application smaller and smaller and keep it as small as you canThursday, 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 APIsThursday, 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-javascriptThursday, 8 March, 12 29
  • 30. getElementsByClassName • blazing fast!Thursday, 8 March, 12 30
  • 31. getElementByIdThursday, 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 < 400Thursday, 8 March, 12 35
  • 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. pushState for navigation • hashChange if youre afraid of pushStateThursday, 8 March, 12 37
  • 38. requestAnimationFrameThursday, 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/997619Thursday, 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 cascadeThursday, 8 March, 12 40
  • 41. CSS is your friendThursday, 8 March, 12 41
  • 42. Animations are hard • Think of the poor CPU • Use transitions! • Use CSS3 transformsThursday, 8 March, 12 42
  • 43. Also, cheat and add dummy transforms just to get things HW acceleratedThursday, 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, thoughThursday, 8 March, 12 46
  • 47. Tread with care • CSS3 does not always follow live DOM eventsThursday, 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,liveThursday, 8 March, 12 48
  • 49. Small hacks go a long wayThursday, 8 March, 12 49
  • 50. onclick is broken for a good reasonThursday, 8 March, 12 50
  • 51. Roll your own “onclick” • use touchstart, touchmove and touchend • enable longtouch listenerThursday, 8 March, 12 51
  • 52. document.addEventListener(touchend, function () {}, false); This enables the :active selector and increases the perceived responsiveness of your appThursday, 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_uiThursday, 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 thereThursday, 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 graphicsThursday, 8 March, 12 60
  • 61. Use optimized images • pngnq • spritopia • Android has navigator.connectionThursday, 8 March, 12 61
  • 62. Android was broken, thoughThursday, 8 March, 12 62
  • 63. You should be an edge case this means youre doing something specialThursday, 8 March, 12 63
  • 64. You should be an edge case this means youre doing something special @hdragomir @woogaThursday, 8 March, 12 64