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
d3.js + mobile
Search
binx
August 10, 2012
11
4.3k
d3.js + mobile
binx
August 10, 2012
Tweet
Share
More Decks by binx
See All by binx
On the Importance of Iteration
binx
0
80
Designing for Spacecraft Operations
binx
2
550
Place and Space
binx
0
480
Error: Success
binx
0
500
Peak Visualization?
binx
1
490
The Data Visualization Hustle
binx
2
400
People, Not Users
binx
2
200
Data Collection and Memory
binx
1
190
The Road To Code
binx
1
330
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
390
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
BBQ
matthewcrist
87
9.5k
Agile that works and the tools we love
rasmusluckow
328
21k
Making Projects Easy
brettharned
116
6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A Philosophy of Restraint
colly
203
16k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
GitHub's CSS Performance
jonrohan
1030
460k
Faster Mobile Websites
deanohume
306
31k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
d3.js + mobile Rachel Binx, Stamen Design
So the good news is that D3 works great on
mobile devices. The bad news is that you still have to build a mobile site.
1) Design 2) Interaction 3) Performance
Tools of the Trade
Viewport <link rel="stylesheet" media="screen and (max- device-width: 480px)" href=”iphone.css”/> <meta
name="viewport" content="width=device- width, initial-scale=1, maximum-scale=1"> @media screen and (max-device-width: 480px) { .column { float: left; } } Media Queries
Platform Detection navigator.userAgent IE iOS iPad iPhone Safari Firefox Chrome
SVG viewBox <svg width="300px" height="200px" viewBox="0 0 1500 1000" preserveAspectRatio="none">
<min-x> <min-y> <width> <height>
Tiny Screens! • Anything interactive on your page: make it
much larger • You will not have a cursor to indicate interaction models - consider labeling everything • Quite simply: remove all subtly
2011 MTV Video Music Awards http://sta.mn/hyd
Selected State
Interaction Models
Let’s Talk About Touch Limitations: click == hover drag ==
scroll Opportunities: multitouch!
Hover as Click 2011 Video Game Awards — http://sta.mn/cgq
Scroll as Drag maps.stamen.com Basically, beware of which elements on
the page will steal focus from whole-page interaction
Multitouch http://sta.mn/f3 d3.js jQuery .touches() touchstart touchmove touchend .drag() .zoom()
various plugins: touchstart/end swipes swipe/zoom/scale
Saucy Animations
Optimizing Framerate • Sadly, SVG is not hardware accelerated •
One solution: make the SVG element as small as it can be • Or, try removing setInterval / requestAnimationFrame in favor of event-based animation • If all else fails: refactor the animations!
Event-Based Animation 2012 NewNowNext Awards — http://sta.mn/rnm
Design + Interaction + Performance = Successful Mobile Project
Thanks! rachelbinx@gmail.com @rachelbinx