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.7k
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
610
Other Decks in Technology
See All in Technology
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
150
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
520
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
270
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
130
生成AI時代に必要な価値ある意思決定を育てる「開発プロセス定義」を用いた中期戦略
kakehashi
PRO
1
270
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
200
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
510
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.1k
実践AIガバナンス
asei
3
350
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
7
2.3k
Flutterでキャッチしないエラーはどこに行く
taiju59
0
210
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
160
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why Our Code Smells
bkeepers
PRO
339
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Being A Developer After 40
akosma
90
590k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
A better future with KSS
kneath
239
17k
What's in a price? How to price your products and services
michaelherold
246
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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