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.4k
d3.js + mobile
binx
August 10, 2012
Tweet
Share
More Decks by binx
See All by binx
On the Importance of Iteration
binx
0
98
Designing for Spacecraft Operations
binx
2
580
Place and Space
binx
0
500
Error: Success
binx
0
510
Peak Visualization?
binx
1
530
The Data Visualization Hustle
binx
2
430
People, Not Users
binx
2
220
Data Collection and Memory
binx
1
210
The Road To Code
binx
1
360
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Speed Design
sergeychernyshev
32
1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Balancing Empowerment & Direction
lara
1
510
4 Signs Your Business is Dying
shpigford
184
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Invisible Side of Design
smashingmag
301
51k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
A designer walks into a library…
pauljervisheath
207
24k
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!
[email protected]
@rachelbinx