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. 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);
  2. 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
  3. IE 10 on Windows 8 •MSPointerDown •MSPointerMove •MSPointerUp •(1 event

    per touch point) -­‐ms-­‐touch-­‐action:  none;  
  4. 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
  5. 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
  6. 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)
  7. 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
  8. •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
  9. Internet Sharing + Charles Proxy •Watch HTTP traffic •Add breakpoints

    in ajax requests •Serve web pages to your phone from your computer
  10. Pile of Devices •iPad 1 •iPhone 3G •iPhone 4 •Samsung

    Galaxy S •HTC Desire •Galaxy Tab •Motorola Xoom •Kindle Fire •HTC Titan
  11. Swiping Process •Event Listener on top level for touch events

    •Only visible nodes move via translate3d •Rebuild next/previous happens when movement stops.
  12. 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