Creating Responsive
HTML5 Touch
Interfaces
Stephen Woods
Slide 2
Slide 2 text
Stephen Woods
Front End Engineer
Flickr
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
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);
Slide 5
Slide 5 text
On mobile we worry
about devices.
Slide 6
Slide 6 text
Wait!
Did you say they all
run webkit?
Slide 7
Slide 7 text
Wait!
Did you say they all
run webkit?
Slide 8
Slide 8 text
On mobile we worry
about devices.
Slide 9
Slide 9 text
Media Queries,
Break points,
liquid layouts
Screen
Sizes
http://www.alistapart.com/articles/responsive-web-design/
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
iPhone 3GS
256mb RAM
Geekbench: 271
Slide 12
Slide 12 text
iPhone 3GS
256mb RAM
Geekbench: 271
==
Slide 13
Slide 13 text
Modern mobile
devices are crappy
computers with
decent video cards.
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Perceived
Performance
Slide 16
Slide 16 text
On the desktop it’s
easy...
Throw up a spinner.
Slide 17
Slide 17 text
Touch interfaces are
tactile.
Slide 18
Slide 18 text
Touch interfaces are
tactile.
Feedback must be
continuous.
Slide 19
Slide 19 text
When the interface
stops moving
during a gesture it
feels like it died
Slide 20
Slide 20 text
Respect Convention
Slide 21
Slide 21 text
Mobile has
conventions
too
Slide 22
Slide 22 text
Mobile has
conventions
too
Slide 23
Slide 23 text
TouchEvent
•touchstart - fires once
•touchmove - fires continuously
•touchend - fires once
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
iOS Developer
Library
http://bit.ly/iOS-guide
Slide 26
Slide 26 text
And that works
everywhere!
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
IE 10 on Windows 8
•MSPointerDown
•MSPointerMove
•MSPointerUp
•(1 event per touch point)
-‐ms-‐touch-‐action:
none;
Slide 29
Slide 29 text
Making Gestures Work
•Prioritize user feedback
•Use hardware acceleration
•Manage your memory
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
Write-Only DOM
getOffsetHeight :
74% slower than get className
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
Slide 34
Slide 34 text
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)
First:
Use Matrix Transforms
Minimize DOM touches, make your transforms
simpler in the long run
Slide 39
Slide 39 text
http://xkcd.com/184/
Slide 40
Slide 40 text
It’s Not That Hard!
transform:
matrix(1, 0, 0, 1, 10, 10);
Translate
Scale
Slide 41
Slide 41 text
[
[1,0,0,0],
[0,1,0,0],
[0,0,1,0],
[tx,ty,tz,1]
]
With Hardware
Acceleration... (matrix3d)
Slide 42
Slide 42 text
Transforms keep
complex state
without DOM reads
Slide 43
Slide 43 text
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
Pro Tips
•Beware the virtual pixels
•Moving the transform-origin won’t
really work
•Remember to snap back
Slide 56
Slide 56 text
Dealing with
browsers
Slide 57
Slide 57 text
Dealing with
browsers
Slide 58
Slide 58 text
Remember
Progressive Enhancement?
Slide 59
Slide 59 text
•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
Slide 60
Slide 60 text
The Tool Chain
Slide 61
Slide 61 text
The dumbest thing
that works
Webkit
Browser with
UA Spoofing
“Simulate
touch events”
Slide 62
Slide 62 text
Safari Inspector!
Chrome Inspector!
Slide 63
Slide 63 text
Internet Sharing +
Charles Proxy
•Watch HTTP traffic
•Add breakpoints in ajax requests
•Serve web pages to your phone from
your computer
Slide 64
Slide 64 text
Pile of Devices
Slide 65
Slide 65 text
Pile of Devices
•iPad 1
•iPhone 3G
•iPhone 4
•Samsung
Galaxy S
•HTC Desire
•Galaxy Tab
•Motorola Xoom
•Kindle Fire
•HTC Titan
Swiping Process
•Event Listener on top level for touch
events
•Only visible nodes move via
translate3d
•Rebuild next/previous happens when
movement stops.
Slide 73
Slide 73 text
Performance Tricks
•Aggressive Pruning
•Clean off css transforms/transitions
•Write-only DOM.
•Do as little as possible during swipes
Slide 74
Slide 74 text
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