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
560
Other Decks in Technology
See All in Technology
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
2
830
すぐに始めるAWSコスト削減。短期でできる改善策と長期的な運用負荷軽減への取り組み方を解説
ncdc
1
550
Javaにおける関数型プログラミンへの取り組み
skrb
7
300
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
180
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
170
SORACOMで実現するIoTのマルチクラウド対応 - IoTでのクリーンアーキテクチャの実現 -
kenichirokimura
0
340
Oracle Cloud Infrastructure IaaS 新機能アップデート 2024/6 - 2024/8
oracle4engineer
PRO
0
110
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
530
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
140
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
41k
DuckDB雑紹介(1.1対応版)@DuckDB座談会
ktz
5
1k
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
4
890
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
36
7k
Optimizing for Happiness
mojombo
375
69k
How to name files
jennybc
75
98k
Become a Pro
speakerdeck
PRO
22
4.9k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Writing Fast Ruby
sferik
623
60k
Fireside Chat
paigeccino
31
2.9k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Six Lessons from altMBA
skipperchong
26
3.3k
What's new in Ruby 2.0
geeforr
340
31k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
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