Creating Responsive HTML5 Touch Interfaces

Creating ResponsiveHTML5 TouchInterfacesStephen Woods

Stephen WoodsFront End Engineer Flickr

On the desktop weworry 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);

On mobile we worryabout devices.

ScreenSizesMedia Queries,Break points,liquid layoutshttp://www.alistapart.com/articles/responsive-web-design/

iPhone 3GS 256mb RAMGeekbench: 271

iPhone 3GS 256mb RAMGeekbench: 271 ==

Modern mobiledevices are crappy computers withdecent video cards.

PerceivedPerformance

On the desktop it’seasy... Throw up a spinner.

Touch interfaces aretactile.

Touch interfaces aretactile. Feedback must be continuous.

When the interface stops movingduring a gesture it feels like it died

Respect Convention

Mobile hasconventionstoo

TouchEvent• touchstart - fires once• touchmove - fires continuously• touchend - fires once

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

iOS Gesture Events• gesturestart• gesturechange• gestureend

iOS Developer Libraryhttp://bit.ly/iOS-guide

Making Gestures Work • Prioritize user feedback • Use hardware acceleration • Manage your memory

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

Write-Only DOM• DOM touches are really expensive• You know where everything is• Use matrix transforms to queue up positions

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

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

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)

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

Why you can’t use native Pinch to Zoom

First:Use Matrix TransformsMinimize DOM touches, make your transformssimpler in the long run

http://xkcd.com/184/

It’s Not That Hard!transform: Translatematrix(1, 0, 0, 1, 10, 10); Scale

With HardwareAcceleration... (matrix3d) [ [1,0,0,0], [0,1,0,0], [0,0,1,0], [tx,ty,tz,1] ]

Transforms keep complex statewithout DOM reads

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

The Naive Example

The Right Example

Breakdown

translateX =scalePointX * (newWidth - oldWidth) newWidth;

Pro Tips• Beware the virtual pixels• Moving the transform-origin won’t really work• Remember to snap back

The Flickr Touch Light Box

UntitledBy protohiro

Swiping Process• Event Listener on top level for touch events• Only visible nodes move via translate3d• Rebuild next/previous happens when movement stops.

Performance Tricks• Aggressive Pruning• Clean off css transforms/transitions• Write-only DOM.• Do as little as possible during swipes

Frustrating Limitations• Retina screen is huge, device memory is small• Hardware acceleration is a crash festival• Fighting automatic optimizationhttp://bit.ly/apple-image-size-restrictions

Stephen Woods @ysawImage Credits (http://flic.kr/y/kQ5cLh)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/

http://a0.twimg.com	90
http://perspectivevoxel.posterous.com	69
http://www.scoop.it	13
http://zootool.com	3
http://www.twylah.com	3
http://www.onlydoo.com	2
http://us-w1.rockmelt.com	2
https://twitter.com	2
http://blackboard.cpsb.org	1
http://translate.googleusercontent.com	1
http://10.217.34.207	1

Creating Responsive HTML5 Touch Interfaces

by Stephen Woods on Feb 06, 2012

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 187

Statistics

Creating Responsive HTML5 Touch Interfaces Presentation Transcript