Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating Responsive HTML5 Touch Interfaces

Stephen Woods
October 25, 2012

Creating Responsive HTML5 Touch Interfaces

New and updated!

Stephen Woods

October 25, 2012
Tweet

More Decks by Stephen Woods

Other Decks in Technology

Transcript

  1. Creating Responsive
    HTML5 Touch
    Interfaces
    Stephen Woods

    View full-size slide

  2. Stephen Woods
    Front End Engineer
    Flickr

    View full-size slide

  3. 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 full-size slide

  4. On mobile we worry
    about devices.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. On mobile we worry
    about devices.

    View full-size slide

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

    View full-size slide

  9. iPhone 3GS
    256mb RAM
    Geekbench: 271

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Perceived
    Performance

    View full-size slide

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

    View full-size slide

  14. Touch interfaces are
    tactile.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Respect Convention

    View full-size slide

  18. Mobile has
    conventions
    too

    View full-size slide

  19. Mobile has
    conventions
    too

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

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

    View full-size slide

  23. And that works
    everywhere!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. Avoid Event
    Abstraction

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. http://xkcd.com/184/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Transforms keep
    complex state
    without DOM reads

    View full-size slide

  39. 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 full-size slide

  40. The Naive Example

    View full-size slide

  41. The Naive Example

    View full-size slide

  42. The Naive Example

    View full-size slide

  43. The Right Example

    View full-size slide

  44. The Right Example

    View full-size slide

  45. The Right Example

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. Dealing with
    browsers

    View full-size slide

  49. Dealing with
    browsers

    View full-size slide

  50. Remember
    Progressive Enhancement?

    View full-size slide

  51. •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 full-size slide

  52. The Tool Chain

    View full-size slide

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

    View full-size slide

  54. Safari Inspector!
    Chrome Inspector!

    View full-size slide

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

    View full-size slide

  56. Pile of Devices

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. The Flickr Touch
    Light Box

    View full-size slide

  60. Untitled
    By protohiro

    View full-size slide

  61. Untitled
    By protohiro

    View full-size slide

  62. Untitled
    By protohiro

    View full-size slide

  63. Untitled
    By protohiro

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. 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 full-size slide

  67. 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 full-size slide