Slide 1

Slide 1 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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)

Slide 35

Slide 35 text

Avoid Event Abstraction

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Why you can’t use native Pinch to Zoom

Slide 38

Slide 38 text

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

Slide 44

Slide 44 text

The Naive Example

Slide 45

Slide 45 text

The Naive Example

Slide 46

Slide 46 text

The Naive Example

Slide 47

Slide 47 text

The Right Example

Slide 48

Slide 48 text

The Right Example

Slide 49

Slide 49 text

The Right Example

Slide 50

Slide 50 text

Breakdown

Slide 51

Slide 51 text

Breakdown

Slide 52

Slide 52 text

Breakdown

Slide 53

Slide 53 text

Breakdown

Slide 54

Slide 54 text

translateX = scalePointX * (newWidth - oldWidth) newWidth;

Slide 55

Slide 55 text

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

Slide 66

Slide 66 text

Device Simulators & Emulators: Basically Useless. Pretty Useful!

Slide 67

Slide 67 text

The Flickr Touch Light Box

Slide 68

Slide 68 text

Untitled By protohiro

Slide 69

Slide 69 text

Untitled By protohiro

Slide 70

Slide 70 text

Untitled By protohiro

Slide 71

Slide 71 text

Untitled By protohiro

Slide 72

Slide 72 text

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

Slide 75

Slide 75 text

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