Responsivity

Responsive Web Design

Responsive Web Design

Responsive Web Design

Email Fallback:

Responsive Visualizations

Responsive Visualizations

Responsive Visualizations

Responsive Web Design

Major form factors/devices:

• Desktops/Laptops
• Tablets
• Phones

Responsive Web Design

Differences:

• Screen size
• Input modality
• Sensors

Responsive Web Design

Differences:

• Environment
• Mindset
• Ease of use
• Context

Responsive Web Design

Device-centric -> User-centric

Responsive Web Design

How do you design for someone who ...

• is waiting for the bus
• is wearing gloves
• is bored

Interaction

Responsive Interaction

Responsive Interaction

Major question of responsive design: how to shrink interaction to different form factors?

Responsive Interaction

Do we even NEED interaction?

Archie Tse's "3 rules for visual storytelling"

1. If you make the reader click or do anything other than scroll, something spectacular has to happen.

Archie Tse's "3 rules for visual storytelling"

2. If you make a tooltip or rollover, assume no one will ever see it. If the content is important for readers to see, don't hide it.

Archie Tse's "3 rules for visual storytelling"

3. When deciding to make something interactive, remember that getting it to work on all platforms is expensive.

Exercise:
Pick one of Accurat's Corriere Della Sera graphics and turn them into something that could work on a phone/tablet.

Case studies

Case studies

Case studies

Case studies

Basic ideas

Basic Ideas

• Stack UI elements
• Use Small Multiples
• Rotate visualizations
• Work with fixed elements (tooltips, charts)

Basic Ideas

Good (clear) design becomes more important, the less space there is available!

HTML/CSS Techniques

HTML/CSS Techniques

Use the right meta tags:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
>

HTML/CSS Techniques

Use relative sizes instead of absolute ones:

#viz {
  width: 960px;
}

#viz {
  width: 80%;
}

HTML/CSS Techniques

Use (r)em instead of px/pt for font sizes:

.title {
  font-size: 2em;
}

body {
  font-size: 24px;
}

HTML/CSS Techniques

CSS media queries let you fine-tune for specific devices:

#nav {
  width: 100%;
}

@media screen and (min-width: 1368px) {
  #nav {
    float: left;
    width: 32.5%;
  }
}

HTML/CSS Techniques

To keep CSS and JS in sync, use window.matchMedia:

var query = '(min-width: 1280px)';

var isDesktop = window.matchMedia(query).matches
// >= 1280px => true
// < 1280px  => false

Grids

Grids

Organizing content in boxes and placing them in a grid not only makes for a cleaner design, but also helps with adapting to different screen sizes.

Grids

There are various CSS frameworks supporting grids out there. The bigger ones are Twitter's Bootstrap and Zurb's Foundation.

Grids

Let's have a look at Bootstrap's grids:

Grids

Let's work with an example:

SVG Techniques

SVG Techniques

As the name implies, SVG are scalable, which makes them automatically look nice on various types of devices.

SVG Techniques

You can fine-tune the scaling using the SVG viewBox and preserveAspectRatio attributes:

<svg width="600" height="400"
  viewBox="0 0 200 200"
  preserveAspectRatio="xMinYMax meet" />

Interaction

Interaction

Touch input has different event handlers. But they work just like their mouse counterparts.

circle.on('touchstart', ...)
  .on('touchmove', ...)
  .on('touchend', ...);

Interaction

Mobile browsers have to juggle touch-to-scroll with touch-to-interact. If you have a fullscreen page anyway, consider disabling scrolling:

document.ontouchstart = 
  function(e){
    e.preventDefault();
  };

Interaction

Consider adding enlarged (invisible) touch areas:

Interaction

.touch-help {
    opacity: 0;
    z-index: 99999;
}

Interaction

... or even take over interactivity completely:

Interaction

touchHelpers.on('touchstart', function(){
  console.log(d3.touches(this));
  // => [342.1, 283.5]
});
  

Interaction

Use voronoi diagrams for fine-grained interaction.

Interaction

Voronoi scatterplot:

Tooltips

Tooltips

Tooltips are pretty useful for data exploration - we don't want to lose them on mobile!

Tooltips

One solution: have a position: fixed tooltip at the bottom!

Tooltips

Two-step interaction: tap once to open, tap again to click, tap anywhere to close.

Sensors

Sensors

Mobile devices also have upsides: cool sensors!

Sensors

Geolocation:

navigator.geolocation.getCurrentPosition(
      function(position){
         console.log(
            position.coords.latitude +
            "," + position.coords.longitude
         );
      }
   );
    

Sensors

Geolocation:

Sensors

Multitouch/Gestural interactions: Supported by most d3 behaviors out of the box.

Sensors

You can also use a dedicated gesture library like QuoJS or HammerJS to support fancier interactions.

Sensors

Gyroscopes/Accelerometers

window.addEventListener(
    "deviceorientation",
    function(orientation){
       console.log(orientation.alpha +
       "," + orientation.beta +
       "," + orientation.gamma
       );
    },
    true
 );
  

Sensors

More

Scrollytelling

Scrollytelling

Let's go exploring!

Scrollytelling

Scrollytelling

Scrollytelling

Scrollytelling

Libraries

Scrollytelling

Libraries

Scrollytelling

Let's work with an example:

Scrollytelling

(Continued)

Scrollytelling

Let's put it all together:

One last detail

Would be even nicer with sticky positioning of the vis:

Performance

Performance

Speaking about responsiveness, oftentimes we bind redraw handler to the resize event:

window.on('resize', redraw);

Performance

This can lead to A LOT of redraws. Consider using some way of debouncing:

window.on('resize', _.debounce(redraw, 300))

Performance

Use requestAnimationFrame instead of setTimeout.

Performance

Sometimes: canvas/WebGL can be faster than SVG (usually with really massive amounts of shapes/animations).

Performance

Plus all the other details:

• put scripts, styles last
• minify your code/images
• ...

Performance