Fast Mobile UIs                           You’re an Edge CaseThursday, 8 March, 12                            1
Who am I, right?                        Horia Dragomir                        UI Developer @ wooga                        ...
Mobile UI != Desktop UIThursday, 8 March, 12                             3
Mobile UI is Harder                        • Awesome standard support                        • No IE6                     ...
Forget What You KnewThursday, 8 March, 12                          5
Learn by DoingThursday, 8 March, 12                    6
Learn by Solving ProblemsThursday, 8 March, 12                               7
We Used to Have No                            DebuggingThursday, 8 March, 12                        8
Thank you, Adobe and                               Opera!Thursday, 8 March, 12                          9
ViewportThursday, 8 March, 12              10
Viewport                        • Its actually hard to use the full screen                        • Use a custom hackThurs...
Viewport                        • Viewporter tries to solve this problem, but                          fails              ...
SpeedThursday, 8 March, 12           13
iOS versus Android                           Android is usually half as fast*Thursday, 8 March, 12                        ...
iOS versus Android                                        Android is usually half as fast                 http://daringfire...
Loading Speed                        • Show first, load later                        • Loading JS can freeze the UI        ...
HTTP Hates You                          Roundtrips are expensive                               Try pipeliningThursday, 8 M...
applicationCache is a lie                        • Loads in one gulp                        • Loads in order              ...
Golf Everything!                             140byt.esThursday, 8 March, 12                      19
Golf?                        • Make you application smaller and smaller                          and keep it as small as y...
Be Awesome!Thursday, 8 March, 12                 21
Be Awesome?Thursday, 8 March, 12                 22
Thursday, 8 March, 12   23
You Don’t Need jQuery!                        • I <3 jQuery, but not on mobile.                        • jQuery fills in ga...
HTML5 is Awesome!Thursday, 8 March, 12                       25
USE IT!Thursday, 8 March, 12             26
.querySelectorAll()                        • [].map.call                        • super fast!Thursday, 8 March, 12        ...
.querySelectorAll()                        [].map.call(node.querySelectorAll(a .super),                        function (c...
.querySelectorAll()                        http://snook.ca/archives/javascript/going-                        simple-with-j...
getElementsByClassName                        • blazing fast!Thursday, 8 March, 12                            30
getElementByIdThursday, 8 March, 12                    31
Use Event Bubbling!Thursday, 8 March, 12                         32
Use Event Bubbling!                        instead of addingEventListeners to every                        node, just add ...
XMLHttpRequest                                rocks the boat                        • req.overrideMimeType(text/plain;    ...
req.responseCode < 400Thursday, 8 March, 12                            35
req.responseCode < 400                        An AJAX request to an asset already stored                        in applica...
pushState for navigation                        • hashChange if youre afraid of pushStateThursday, 8 March, 12            ...
requestAnimationFrameThursday, 8 March, 12                           38
requestAnimationFrame                        • function(a,b){while(a--&&!                          (b=this["oR0msR0mozR0we...
Redraws Hate You                        • The feeling will be mutual                        • Use as little DOM nodes as p...
CSS is your friendThursday, 8 March, 12                        41
Animations are hard                        • Think of the poor CPU                        • Use transitions!              ...
Also, cheat and add dummy transforms just                        to get things HW acceleratedThursday, 8 March, 12        ...
Android hates multiple                              transforms                        You will end up having simplified ani...
Also, turn off Hardware Acceleration for                        Android 2.x                        Thank you, Ben Green!Th...
node[data-mode=”super”]                        • set attributes, not just classes                        • classes are coo...
Tread with care                        • CSS3 does not always follow live DOM                          eventsThursday, 8 M...
Tread with care                        • CSS3 does not always follow live DOM                          events             ...
Small hacks go a long wayThursday, 8 March, 12                               49
onclick is broken                        for a good reasonThursday, 8 March, 12                             50
Roll your own “onclick”                        • use touchstart, touchmove and touchend                        • enable lo...
document.addEventListener(touchend, function () {}, false);                        This enables the :active selector and  ...
Perceived Responsiveness                        Delay JS heavy execution to allow the UI to                               ...
Perceived Responsiveness                        http://alexmaccaw.co.uk/posts/async_uiThursday, 8 March, 12               ...
Thursday, 8 March, 12   55
Thursday, 8 March, 12   56
Thursday, 8 March, 12   57
format-detection telephone=no                        This will not always work, so you will need                        to...
pointer-events: none;                         user-select: none;                          user-drag: none;Thursday, 8 Marc...
name=viewport content="initial-scale=0.5"                        • Use CSS3 transforms to scale things back               ...
Use optimized images                        • pngnq                        • spritopia                        • Android ha...
Android was broken,                              thoughThursday, 8 March, 12                         62
You should be an edge case                        this means youre doing something specialThursday, 8 March, 12           ...
You should be an edge case                        this means youre doing something special                        @hdragom...
Upcoming SlideShare
Loading in...5
×

Fast Mobile UIs

2,150

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,150
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×