Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creating Responsive HTML5 Touch Interfaces
Search
Stephen Woods
October 25, 2012
Technology
4
1.6k
Creating Responsive HTML5 Touch Interfaces
New and updated!
Stephen Woods
October 25, 2012
Tweet
Share
More Decks by Stephen Woods
See All by Stephen Woods
Optimizing JavaScript Runtime Performance for Touch - Velocity 2013
ysaw
2
520
Other Decks in Technology
See All in Technology
Node-AI のリッチな WEB フロントエンドを支える技術
nenonaninu
2
980
GitHub composite actions
hkusu
1
120
『QAという人』が必要ではなく、『QAという技術』が必要
sadonosake
2
280
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
1.8k
OpenStack再入門「アーキテクチャ編」
kajinamit
0
250
Webエンジニアのためのデータエンジニアリング概説
mtoriyama000
5
400
Uniting Rust Servers and Clients through OpenAPI
ahl
0
430
書を捨てよ、現場へ出よう
nwiizo
11
8.9k
『LeanとDevOpsの科学』をきちんと解読する 〜Four Keys だけじゃ絶対もったいなくなる話〜
bonotake
27
6.6k
【OpsJAWS】EC2 のセキュリティの運用と監視について考えてみた件
hssh2_bin
4
600
スケジュール指定のFargate Spotと友達になれた話
news_it_enj
0
240
Datadog による 自己完結的アプリケーションモニタリング
recruitengineers
PRO
3
130
Featured
See All Featured
Side Projects
sachag
451
41k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
The Invisible Side of Design
smashingmag
293
49k
Debugging Ruby Performance
tmm1
68
11k
Atom: Resistance is Futile
akmur
258
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Navigating Team Friction
lara
177
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Embracing the Ebb and Flow
colly
78
4.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
18
1.8k
Documentation Writing (for coders)
carmenintech
59
3.7k
Transcript
Creating Responsive HTML5 Touch Interfaces Stephen Woods
Stephen Woods Front End Engineer Flickr
None
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);
On mobile we worry about devices.
Wait! Did you say they all run webkit?
Wait! Did you say they all run webkit?
On mobile we worry about devices.
Media Queries, Break points, liquid layouts Screen Sizes http://www.alistapart.com/articles/responsive-web-design/
None
iPhone 3GS 256mb RAM Geekbench: 271
iPhone 3GS 256mb RAM Geekbench: 271 ==
Modern mobile devices are crappy computers with decent video cards.
None
Perceived Performance
On the desktop it’s easy... Throw up a spinner.
Touch interfaces are tactile.
Touch interfaces are tactile. Feedback must be continuous.
When the interface stops moving during a gesture it feels
like it died
Respect Convention
Mobile has conventions too
Mobile has conventions too
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 Developer Library http://bit.ly/iOS-guide
And that works everywhere!
None
IE 10 on Windows 8 •MSPointerDown •MSPointerMove •MSPointerUp •(1 event
per touch point) -‐ms-‐touch-‐action: none;
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 getOffsetHeight : 74% slower than get className
Swipe Basics distance = 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)
Avoid Event Abstraction
Pinch to Zoom (there will be math) Image © Brian
Lalor Used with permission
Why you can’t use native Pinch to Zoom
First: Use Matrix Transforms Minimize DOM touches, make your transforms
simpler in the long run
http://xkcd.com/184/
It’s Not That Hard! transform: matrix(1, 0, 0, 1, 10,
10); Translate Scale
[ [1,0,0,0], [0,1,0,0], [0,0,1,0], [tx,ty,tz,1] ] With Hardware Acceleration... (matrix3d)
Transforms keep complex state without 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 Naive Example
The Naive Example
The Right Example
The Right Example
The Right Example
Breakdown
Breakdown
Breakdown
Breakdown
translateX = scalePointX * (newWidth - oldWidth) newWidth;
Pro Tips •Beware the virtual pixels •Moving the transform-origin won’t
really work •Remember to snap back
Dealing with browsers
Dealing with browsers
Remember 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 necessary Progressive Enhancement
The Tool Chain
The dumbest thing that works Webkit Browser with UA Spoofing
“Simulate touch events”
Safari Inspector! Chrome Inspector!
Internet Sharing + Charles Proxy •Watch HTTP traffic •Add breakpoints
in ajax requests •Serve web pages to your phone from your computer
Pile of Devices
Pile of Devices •iPad 1 •iPhone 3G •iPhone 4 •Samsung
Galaxy S •HTC Desire •Galaxy Tab •Motorola Xoom •Kindle Fire •HTC Titan
Device Simulators & Emulators: Basically Useless. Pretty Useful!
The Flickr Touch Light Box
Untitled By protohiro
Untitled By protohiro
Untitled By protohiro
Untitled By 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 optimization http://bit.ly/apple-image-size-restrictions
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