Responsive Web Design

A single web site (design) which dynamically responds (adapts) to the characteristics (screen width, resolution, capabilities, ...) of the user's device.

• Ethan Marcotte; Responsive Web Design; A List Apart, 25 May 2010. http://alistapart.com/article/responsive-web-design
• Ethan Marcotte; Responsive Web Design; A Book Apart, 2^nd Edition, 03 Dec 2014. 978-1-9375571-8-8
• Ethan Marcotte; Responsive Design: Patterns and Principles; A Book Apart, 18 Nov 2015. 978-1-937557-33-1

Being Responsive

Responsive web design is a combination of:

• Responsive Layout: Layout dynamically adjusts to best suit available window size (reflow at breakpoints, rescale in between).

• Responsive Content: Embedded content dynamically adjusts (tables, images, videos, charts, visualisations, adverts, etc.) to best suit the device characteristics (space, resolution, etc.).

• Responsive Interaction: Interaction and navigation elements (menus, buttons, search boxes, etc.) dynamically adjust to best suit the device characteristics (size, touch, voice, etc.).

Further Considerations

• Progressive Enhancement: HTML → CSS → JS. Then add selective support for specific features such as touch, keyboard, mouse, tilt, or location. Detect features not devices!

• Content Parity: Users should have access to the same content, regardless of which device they use.

Breakpoint Diagram

Breakpoints

• Between breakpoints: fluid (scalable) layout.
  • Heights in em or rem.
  • Widths in %, em, or rem.
  • Absolute units (px, mm, cm, in) are forbidden!
  • Use vector graphics (SVG) wherever possible.
• At breakpoint: change layout.
  • Say, from 1-column to 2-column to 3-column.

Specifying Breakpoints with CSS3 Media Queries

/* settings for window-width: narrow */
@media only all and (max-width: 40rem) {
...
}

/* settings for window-width: medium */
@media only all and (min-width: 40rem) and (max-width: 60rem) {
...
}

/* settings for window-width: wide */
@media only all and (min-width: 60rem) {
...
}

Media Queries Inside SVG

• Responsive SVG Logo: Demo

  See the original discussions at:
  http://blog.cloudfour.com/media-queries-in-svg-images/
http://people.opera.com/andreasb/demos/demos_svgopen2009/update/svgscalelogo.html

• Responsive SVG Line Chart: Demo

Responsive Interaction

• Orientation
  

  @media all and (orientation: landscape) {...}
  

• Larger target sizes for tap
• Swipe
• Pinch
• Keyboard
• Mouse/Pointer
• Shake
• Tilt
• Location

Scalable vs Responsive Data Visualisation

• Scalable:

  • Scales fluidly (but nothing else).

• Responsive Data Visualisation:

  • Responsive Layout: Changes layout at breakpoints, scales fluidly between breakpoints.
  • Responsive Interaction: Provides selective support for touch, keyboard, mouse, etc.

1. Responsive Line Charts

At narrower widths:

• Thin out the axis labels.
• Switch to a sparkline (click/tap to standard line chart).
• Reduce data density (sample the points). [Caution]

Demo:

• Responsive Line Chart

2. Responsive Bar Charts

At narrower widths:

• Rotate the axis labels (or abbreviate them).
• Adjust data density (remove some bars). [Caution]
• Flip from vertical bars to horizontal bars.

Demos:

• Vertical Bar Chart
• Horizontal Bar Chart

3. Responsive Scatterplots

• Pinch zoom.
• Filtering.
• Fisheye and Cartesian distortion.
• Disambiguation. If data points overlap, list them and/or displace them temporarily.

Demo:

• Responsive Scatterplot

See also:

• Gabriel Florit; On Responsive Design and Data Visualization; OpenVis 2013 talk. http://youtu.be/BrmwjVdaxMM
• Ramik Sadana and John Stasko; Designing and Implementing an Interactive Scatterplot Visualization for a Tablet Computer; Proc. AVI 2014. doi:10.2312/eurovisshort.20141155
http://www.cc.gatech.edu/~stasko/papers/avi14-touch.pdf
http://vimeo.com/97798460

4. Responsive Parallel Coordinates

• Provide raw data as HTML table (fallback in case JS fails, accessibility).
• Selectively remove some of the dimensions (but allow the user to override!).

Demo:

• Responsive Parallel Coordinates

Books

• Christoph Körner; Learning Responsive Data Visualization; Packt Publishing, 23 Mar 2016. 978-1785883781
• Bill Hinderman; Building Responsive Data Visualization for the Web; Wiley, 09 Nov 2015. 978-1119067146

Alternatives to D3

Web data visualisations do not have to be built with D3!

WebGL can be much faster, if you have more than a few hundred data items.

Check out:

• Mat Groves; PixiJS; pixijs.com
• Jono Brandel; Two.js (and Three.js); two.js.org
• Keith Andrews and Benedict Wright; FluidDiagrams:Web-Based Information Visualisation using JavaScript and WebGL; Proc. EuroVis 2014. doi:10.2312/eurovisshort.20141155
http://ftp.iicm.tugraz.at/pub/papers/andrews-eurovis2014-fd.pdf

Credits

Thanks to the following students for helping to prepare the demos:

• Rizwan Mehmood
• Gregor Christandl
• Simon Kloiber
• Matthias Link
• Lukas Skofitsch

Thank You

Web site:
http://www.iicm.tugraz.at/keith/

Slides:
http://keithandrews.com/talks/2016/graphical-web-2016-11-02/