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
ChatGPT for IT Service Management (IT Pro)
dahatake
2
150
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
5.2k
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
オーナーシップを持つ領域を明確にする
konifar
11
2.5k
強みを伸ばすキャリアデザイン
yug1224
0
200
小さな開発会社がWebサービスを作る理由
polidog
PRO
1
160
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
220
現代CSSフレームワークの内部実装とその仕組み
poteboy
2
540
「共通基盤」を超えよ! 今、Platform Engineeringに取り組むべき理由
jacopen
25
5.9k
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
330
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
120
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
Featured
See All Featured
It's Worth the Effort
3n
180
27k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Become a Pro
speakerdeck
PRO
10
4.5k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
The Cult of Friendly URLs
andyhume
74
5.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Into the Great Unknown - MozCon
thekraken
10
980
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
How to train your dragon (web standard)
notwaldorf
72
5.1k
A better future with KSS
kneath
231
16k
What's in a price? How to price your products and services
michaelherold
237
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
154
14k
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