HTML5 Touch Interfaces: SXSW extended version.
Upcoming SlideShare
Loading in...5
×
 

HTML5 Touch Interfaces: SXSW extended version.

on

  • 14,730 views

SXSW Version...

SXSW Version...

Statistics

Views

Total Views
14,730
Views on SlideShare
13,524
Embed Views
1,206

Actions

Likes
39
Downloads
264
Comments
0

8 Embeds 1,206

http://www.frankwatching.com 1028
http://lanyrd.com 161
http://bo.lt 7
http://t.co 4
https://twitter.com 3
https://si0.twimg.com 1
http://www.twylah.com 1
http://172.23.3.4 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Touch Interfaces: SXSW extended version. HTML5 Touch Interfaces: SXSW extended version. Presentation Transcript

  • Creating Responsive HTML5 Touch Interfaces Stephen WoodsSunday, March 11, 12
  • Stephen Woods Front End Engineer FlickrSunday, March 11, 12
  • Sunday, March 11, 12
  • 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);Sunday, March 11, 12
  • On mobile we worry about devices.Sunday, March 11, 12
  • Wait! Did you say they all run webkit?Sunday, March 11, 12
  • Wait! Did you say they all run webkit?Sunday, March 11, 12
  • Wait! Did you say they all run webkit?Sunday, March 11, 12 X
  • On mobile we worry about devices.Sunday, March 11, 12
  • Screen Sizes Media Queries, Break points, liquid layouts http://www.alistapart.com/articles/responsive-web-design/Sunday, March 11, 12
  • Sunday, March 11, 12
  • iPhone 3GS 256mb RAM Geekbench: 271Sunday, March 11, 12
  • iPhone 3GS 256mb RAM Geekbench: 271 ==Sunday, March 11, 12
  • Modern mobile devices are crappy computers with decent video cards.Sunday, March 11, 12
  • Sunday, March 11, 12
  • Perceived PerformanceSunday, March 11, 12
  • On the desktop it’s easy... Throw up a spinner.Sunday, March 11, 12
  • Touch interfaces are tactile.Sunday, March 11, 12
  • Touch interfaces are tactile. Feedback must be continuous.Sunday, March 11, 12
  • When the interface stops moving during a gesture it feels like it diedSunday, March 11, 12
  • Respect ConventionSunday, March 11, 12
  • Mobile has conventions tooSunday, March 11, 12
  • Mobile has conventions tooSunday, March 11, 12
  • TouchEvent • touchstart - fires once • touchmove - fires continuously • touchend - fires onceSunday, March 11, 12
  • The touches Array • You only get one on Android • You get up to 11 on iOS • Each touch gives you position information, and sometimes scaleSunday, March 11, 12
  • iOS Gesture Events • gesturestart • gesturechange • gestureendSunday, March 11, 12
  • iOS Developer Library http://bit.ly/iOS-guideSunday, March 11, 12
  • Making Gestures Work • Prioritize user feedback • Use hardware acceleration • Manage your memorySunday, March 11, 12
  • 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 transitionsSunday, March 11, 12
  • Write-Only DOM • DOM touches are really expensive • You know where everything is • Use matrix transforms to queue up positionsSunday, March 11, 12
  • Swipe Basics distance = e.touches[0].pageX - startX; translate3d(+distance+px,0px,0px)Sunday, March 11, 12
  • 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 movingSunday, March 11, 12
  • 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)Sunday, March 11, 12
  • Avoid Event AbstractionSunday, March 11, 12
  • Image © Brian Lalor Used with permission Pinch to Zoom (there will be math)Sunday, March 11, 12
  • Why you can’t use native Pinch to ZoomSunday, March 11, 12
  • First: Use Matrix Transforms Minimize DOM touches, make your transforms simpler in the long runSunday, March 11, 12
  • http://xkcd.com/184/Sunday, March 11, 12
  • It’s Not That Hard! transform: Translate matrix(1, 0, 0, 1, 10, 10); ScaleSunday, March 11, 12
  • With Hardware Acceleration... (matrix3d) [ [1,0,0,0], [0,1,0,0], [0,0,1,0], [tx,ty,tz,1] ]Sunday, March 11, 12
  • Transforms keep complex state without DOM readsSunday, March 11, 12
  • 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 centerSunday, March 11, 12
  • The Naive ExampleSunday, March 11, 12
  • The Naive ExampleSunday, March 11, 12
  • The Naive ExampleSunday, March 11, 12
  • The Right ExampleSunday, March 11, 12
  • The Right ExampleSunday, March 11, 12
  • The Right ExampleSunday, March 11, 12
  • BreakdownSunday, March 11, 12
  • BreakdownSunday, March 11, 12
  • BreakdownSunday, March 11, 12
  • BreakdownSunday, March 11, 12
  • translateX = scalePointX * (newWidth - oldWidth) newWidth;Sunday, March 11, 12
  • Pro Tips • Beware the virtual pixels • Moving the transform-origin won’t really work • Remember to snap backSunday, March 11, 12
  • Dealing with browsersSunday, March 11, 12
  • Dealing with browsersSunday, March 11, 12
  • Remember Progressive Enhancement?Sunday, March 11, 12
  • Progressive Enhancement • 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 necessarySunday, March 11, 12
  • The Tool ChainSunday, March 11, 12
  • The dumbest thing that works Webkit Browser with UA SpoofingSunday, March 11, 12
  • Weinre Remote webkit debugger. http://phonegap.github.com/weinre/Sunday, March 11, 12
  • Internet Sharing + Charles Proxy • Watch HTTP traffic • Add breakpoints in ajax requests • Serve web pages to your phone from your computerSunday, March 11, 12
  • Adobe Shadow • Wrapper for Wienre • Neat • Has some limitationsSunday, March 11, 12
  • Pile of DevicesSunday, March 11, 12
  • Pile of Devices • iPad 1 • Galaxy Tab • iPhone 3G • Motorola Xoom • iPhone 4 • Kindle Fire • Samsung • HTC Titan Galaxy S • HTC DesireSunday, March 11, 12
  • Device Simulators & Emulators: Basically Useless.Sunday, March 11, 12
  • The Flickr Touch Light BoxSunday, March 11, 12
  • Untitled By protohiroSunday, March 11, 12
  • Untitled By protohiroSunday, March 11, 12
  • Untitled By protohiroSunday, March 11, 12
  • Untitled By protohiroSunday, March 11, 12
  • Swiping Process • Event Listener on top level for touch events • Only visible nodes move via translate3d • Rebuild next/previous happens when movement stops.Sunday, March 11, 12
  • Performance Tricks • Aggressive Pruning • Clean off css transforms/transitions • Write-only DOM. • Do as little as possible during swipesSunday, March 11, 12
  • 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-restrictionsSunday, March 11, 12
  • Stephen Woods @ysaw http://www.slideshare.net/ysaw/creating- responsive-html5-touch-interfaces 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/ Image Credits (http://flic.kr/y/kQ5cLh) 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/ Sunday, March 11, 12