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
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1k
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
0
120
Modern Linux
oracle4engineer
PRO
0
100
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
250
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
180
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
330
Practical Agentic AI in Software Engineering
uzyn
0
110
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
570
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Why Our Code Smells
bkeepers
PRO
339
57k
Become a Pro
speakerdeck
PRO
29
5.5k
How to Ace a Technical Interview
jacobian
279
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Speed Design
sergeychernyshev
32
1.1k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Statistics for Hackers
jakevdp
799
220k
Writing Fast Ruby
sferik
628
62k
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