Creating Responsive HTML5 Touch Interfaces

New and updated!

Transcript

1. Creating Responsive HTML5 Touch Interfaces Stephen Woods
2. Stephen Woods Front End Engineer Flickr
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/
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.
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!
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