Creating Responsive HTML5 Touch Interfaces

New and updated!

Transcript

1. Creating Responsive
   HTML5 Touch
   Interfaces
   Stephen Woods
   

   View Slide

2. Stephen Woods
   Front End Engineer
   Flickr
   

   View Slide

3. View Slide

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);
   

   View Slide

5. On mobile we worry
   about devices.
   

   View Slide

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

   View Slide

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

   View Slide

8. On mobile we worry
   about devices.
   

   View Slide

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

   View Slide

10. View Slide

11. iPhone 3GS
    256mb RAM
    Geekbench: 271
    

    View Slide

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

    View Slide

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

    View Slide

14. View Slide

15. Perceived
    Performance
    

    View Slide

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

    View Slide

17. Touch interfaces are
    tactile.
    

    View Slide

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

    View Slide

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

    View Slide

20. Respect Convention
    

    View Slide

21. Mobile has
    conventions
    too
    

    View Slide

22. Mobile has
    conventions
    too
    

    View Slide

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

    View Slide

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
    

    View Slide

25. iOS Developer
    Library
    http://bit.ly/iOS-guide
    

    View Slide

26. And that works
    everywhere!
    

    View Slide

27. View Slide

28. IE 10 on Windows 8
    •MSPointerDown
    •MSPointerMove
    •MSPointerUp
    •(1 event per touch point)
    -­‐ms-­‐touch-­‐action:  none;  
    

    View Slide

29. Making Gestures Work
    •Prioritize user feedback
    •Use hardware acceleration
    •Manage your memory
    

    View Slide

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
    

    View Slide

31. Write-Only DOM
    getOffsetHeight :
    74% slower than get className
    

    View Slide

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

    View Slide

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
    

    View Slide

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)
    

    View Slide

35. Avoid Event
    Abstraction
    

    View Slide

36. Pinch to Zoom
    (there will be math)
    Image © Brian Lalor
    Used with permission
    

    View Slide

37. Why you can’t use
    native Pinch to
    Zoom
    

    View Slide

38. First:
    Use Matrix Transforms
    Minimize DOM touches, make your transforms
    simpler in the long run
    

    View Slide

39. http://xkcd.com/184/
    

    View Slide

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

    View Slide

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

    View Slide

42. Transforms keep
    complex state
    without DOM reads
    

    View Slide

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
    

    View Slide

44. The Naive Example
    

    View Slide

45. The Naive Example
    

    View Slide

46. The Naive Example
    

    View Slide

47. The Right Example
    

    View Slide

48. The Right Example
    

    View Slide

49. The Right Example
    

    View Slide

50. Breakdown
    

    View Slide

51. Breakdown
    

    View Slide

52. Breakdown
    

    View Slide

53. Breakdown
    

    View Slide

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

    View Slide

55. Pro Tips
    •Beware the virtual pixels
    •Moving the transform-origin won’t
    really work
    •Remember to snap back
    

    View Slide

56. Dealing with
    browsers
    

    View Slide

57. Dealing with
    browsers
    

    View Slide

58. Remember
    Progressive Enhancement?
    

    View Slide

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
    

    View Slide

60. The Tool Chain
    

    View Slide

61. The dumbest thing
    that works
    Webkit
    Browser with
    UA Spoofing
    “Simulate
    touch events”
    

    View Slide

62. Safari Inspector!
    Chrome Inspector!
    

    View Slide

63. Internet Sharing +
    Charles Proxy
    •Watch HTTP traffic
    •Add breakpoints in ajax requests
    •Serve web pages to your phone from
    your computer
    

    View Slide

64. Pile of Devices
    

    View Slide

65. Pile of Devices
    •iPad 1
    •iPhone 3G
    •iPhone 4
    •Samsung
    Galaxy S
    •HTC Desire
    •Galaxy Tab
    •Motorola Xoom
    •Kindle Fire
    •HTC Titan
    

    View Slide

66. Device Simulators &
    Emulators:
    Basically Useless.
    Pretty Useful!
    

    View Slide

67. The Flickr Touch
    Light Box
    

    View Slide

68. Untitled
    By protohiro
    

    View Slide

69. Untitled
    By protohiro
    

    View Slide

70. Untitled
    By protohiro
    

    View Slide

71. Untitled
    By protohiro
    

    View Slide

72. Swiping Process
    •Event Listener on top level for touch
    events
    •Only visible nodes move via
    translate3d
    •Rebuild next/previous happens when
    movement stops.
    

    View Slide

73. Performance Tricks
    •Aggressive Pruning
    •Clean off css transforms/transitions
    •Write-only DOM.
    •Do as little as possible during swipes
    

    View Slide

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
    

    View Slide

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
    

    View Slide