Creating Responsive HTML5 Touch Interfaces

7789780aef9007e64e1ea4af4898e4c4?s=47 Stephen Woods
October 25, 2012

Creating Responsive HTML5 Touch Interfaces

New and updated!

7789780aef9007e64e1ea4af4898e4c4?s=128

Stephen Woods

October 25, 2012
Tweet

Transcript

  1. Creating Responsive HTML5 Touch Interfaces Stephen Woods

  2. Stephen Woods Front End Engineer Flickr

  3. None
  4. On the desktop we worry about browsers -moz-transform:rotate(-270deg); -moz-transform-origin: bottom

    left; -webkit-transform: rotate(-270deg); -webkit-transform-origin: bottom left; -o-transform: rotate(-270deg); -o-transform-origin: bottom left; filter:progid:DXImageTransform.Microsoft .BasicImage(rotation=1);
  5. On mobile we worry about devices.

  6. Wait! Did you say they all run webkit?

  7. Wait! Did you say they all run webkit?

  8. On mobile we worry about devices.

  9. Media Queries, Break points, liquid layouts Screen Sizes http://www.alistapart.com/articles/responsive-web-design/

  10. None
  11. iPhone 3GS 256mb RAM Geekbench: 271

  12. iPhone 3GS 256mb RAM Geekbench: 271 ==

  13. Modern mobile devices are crappy computers with decent video cards.

  14. None
  15. Perceived Performance

  16. On the desktop it’s easy... Throw up a spinner.

  17. Touch interfaces are tactile.

  18. Touch interfaces are tactile. Feedback must be continuous.

  19. When the interface stops moving during a gesture it feels

    like it died
  20. Respect Convention

  21. Mobile has conventions too

  22. Mobile has conventions too

  23. TouchEvent •touchstart - fires once •touchmove - fires continuously •touchend

    - fires once
  24. The touches Array •You only get one on Android •You

    get up to 11 on iOS •Each touch gives you position information, and sometimes scale
  25. iOS Developer Library http://bit.ly/iOS-guide

  26. And that works everywhere!

  27. None
  28. IE 10 on Windows 8 •MSPointerDown •MSPointerMove •MSPointerUp •(1 event

    per touch point) -­‐ms-­‐touch-­‐action:  none;  
  29. Making Gestures Work •Prioritize user feedback •Use hardware acceleration •Manage

    your memory
  30. Prioritize User-feedback •Don’t do any loading during gestures •Treat the

    DOM as write-only (do your own math) •When at all possible, use css transitions
  31. Write-Only DOM getOffsetHeight : 74% slower than get className

  32. Swipe Basics distance = e.touches[0].pageX - startX; 'translate3d('+distance+'px,0px,0px)'

  33. Snap back/snap forward • Keep track of last position, use

    transitions with easing to snap back •Pick a swipe distance threshold, use that to snap forward (ontouchend) •If the user is gesturing, the element must be moving
  34. A Word about scrolling •Use native if at all possible:

    •-webkit-overflow-scrolling: touch; •If not, use a library to simulate momentum scroll (iScroll 4, Scrollability)
  35. Avoid Event Abstraction

  36. Pinch to Zoom (there will be math) Image © Brian

    Lalor Used with permission
  37. Why you can’t use native Pinch to Zoom

  38. First: Use Matrix Transforms Minimize DOM touches, make your transforms

    simpler in the long run
  39. http://xkcd.com/184/

  40. It’s Not That Hard! transform: matrix(1, 0, 0, 1, 10,

    10); Translate Scale
  41. [ [1,0,0,0], [0,1,0,0], [0,0,1,0], [tx,ty,tz,1] ] With Hardware Acceleration... (matrix3d)

  42. Transforms keep complex state without DOM reads

  43. What is happening? •Determine Center of the touch points •Determine

    the scale factor (touch.scale) •Scale the element by the scale factor, with the center of the touch points as the scale center
  44. The Naive Example

  45. The Naive Example

  46. The Naive Example

  47. The Right Example

  48. The Right Example

  49. The Right Example

  50. Breakdown

  51. Breakdown

  52. Breakdown

  53. Breakdown

  54. translateX = scalePointX * (newWidth - oldWidth) newWidth;

  55. Pro Tips •Beware the virtual pixels •Moving the transform-origin won’t

    really work •Remember to snap back
  56. Dealing with browsers

  57. Dealing with browsers

  58. Remember Progressive Enhancement?

  59. •Feature Detect •Add transitions, don’t depend on them •Gesture interaction

    is an enhancement, clicks should still work •Be able to disable features per user- agent, if necessary Progressive Enhancement
  60. The Tool Chain

  61. The dumbest thing that works Webkit Browser with UA Spoofing

    “Simulate touch events”
  62. Safari Inspector! Chrome Inspector!

  63. Internet Sharing + Charles Proxy •Watch HTTP traffic •Add breakpoints

    in ajax requests •Serve web pages to your phone from your computer
  64. Pile of Devices

  65. Pile of Devices •iPad 1 •iPhone 3G •iPhone 4 •Samsung

    Galaxy S •HTC Desire •Galaxy Tab •Motorola Xoom •Kindle Fire •HTC Titan
  66. Device Simulators & Emulators: Basically Useless. Pretty Useful!

  67. The Flickr Touch Light Box

  68. Untitled By protohiro

  69. Untitled By protohiro

  70. Untitled By protohiro

  71. Untitled By protohiro

  72. Swiping Process •Event Listener on top level for touch events

    •Only visible nodes move via translate3d •Rebuild next/previous happens when movement stops.
  73. Performance Tricks •Aggressive Pruning •Clean off css transforms/transitions •Write-only DOM.

    •Do as little as possible during swipes
  74. Frustrating Limitations •Retina screen is huge, device memory is small

    •Hardware acceleration is a crash festival •Fighting automatic optimization http://bit.ly/apple-image-size-restrictions
  75. http://www.flickr.com/photos/wafer/5533140316/ http://www.flickr.com/photos/latca/2265637876/ http://www.flickr.com/photos/spine/1471217194/ http://www.flickr.com/photos/williamhook/3656233025/ http://www.flickr.com/photos/isriya/4656385586/ http://www.flickr.com/photos/yandle/3076451873/ http://www.flickr.com/photos/uberculture/6632437677/ http://www.flickr.com/photos/blalor/4934146981/ http://www.flickr.com/photos/torek/3280152297/ http://www.flickr.com/photos/nilsrinaldi/5157809941/

    Stephen Woods @ysaw Image Credits (http://flic.kr/y/kQ5cLh) http://www.slideshare.net/ysaw/creating- responsive-html5-touch-interfaces