Creating Responsive HTML5 Touch Interfaces

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