d3.js + mobile

Transcript

1. d3.js + mobile Rachel Binx, Stamen Design
2. 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.
3. 1) Design 2) Interaction 3) Performance
4. Tools of the Trade
5. 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
6. Platform Detection navigator.userAgent IE iOS iPad iPhone Safari Firefox Chrome
7. SVG viewBox <svg width="300px" height="200px" viewBox="0 0 1500 1000" preserveAspectRatio="none"> <min-x> <min-y> <width> <height>
8. 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
9. 2011 MTV Video Music Awards http://sta.mn/hyd
10. Selected State
11. Interaction Models
12. Let’s Talk About Touch Limitations: click == hover drag == scroll Opportunities: multitouch!
13. Hover as Click 2011 Video Game Awards — http://sta.mn/cgq
14. Scroll as Drag maps.stamen.com Basically, beware of which elements on the page will steal focus from whole-page interaction
15. Multitouch http://sta.mn/f3 d3.js jQuery .touches() touchstart touchmove touchend .drag() .zoom() various plugins: touchstart/end swipes swipe/zoom/scale
16. Saucy Animations
17. 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!
18. Event-Based Animation 2012 NewNowNext Awards — http://sta.mn/rnm
19. Design + Interaction + Performance = Successful Mobile Project
20. Thanks! rachelbinx@gmail.com @rachelbinx