Upgrade to Pro — share decks privately, control downloads, hide ads and more …

d3.js + mobile

binx
August 10, 2012
4.3k

d3.js + mobile

binx

August 10, 2012
Tweet

Transcript

  1. 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.
  2. 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
  3. 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
  4. Scroll as Drag maps.stamen.com Basically, beware of which elements on

    the page will steal focus from whole-page interaction
  5. 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!