Responsive web design is an approach to web design that aims to make web pages look and function well on all screen sizes and devices. Responsive web design involves restructuring the content of a web page (for example placing elements on top of each other on small screens instead of next to each other on wider screens), adjusting font sizes and flexible image sizes.

Like modern web sites with a responsive design, data visualisations should ideally also be responsive and adapt their design to the device they are viewed on. If not, the data visualisations will be partially or completely unaccessible to both visually impaired users as well as to other viewers of your visualisation.

Responsive data visualisation entails many aspects of data visualisation design:

• a visualisation should fit the screen it is viewed on. This means that like images on a web page, their dimensions should be flexible
• a visualisation should take into account the aspect ratio of the screen it is viewed on. Desktop screens are usually used in landscape mode (wider than high), mobile phones are mostly used in portrait mode (higher than wide)
• visualisations that show many data points can become hard to read on smaller screens because the data marks (bars, circles, lines, …) will have less space and might start to overlap.
• text on a visualisation (annotations, labels, …) will have less space on smaller screens
• interaction is more difficult on mobile and smaller screens: targeting elements with touch is hard when the target elements are small.
• when a visualisation is created “on the fly” in the browser, the data loaded to generate the visualisation shouldn’t be too big, especially for users with mobile data connections. Heavy computational operations to generate visualisations are also problematic for low capacity mobile phones.

In the rest of this module some strategies to make visualisations responsive are discussed.

Strategies

Scaling

The easiest way to make visualisations fit different screen sizes, is by making them scale. This works in the same way as for images: the visualisation is shown bigger on big screens and smaller on small screens.

A chart with normal proportions... Source: Maarten Lambrechts, CC BY 4.0

But scaling data visualisations has its limitations. Small screens usually have a lower resolution, and because of smaller amount of pixels, finer details in a visualisation design might not be visible.

When scaled down, the text on a visualisation may also become too small to be read.

The same chart scaled down

Or vice versa: when scaled up, the text can be rendered disproportionally large.

The same chart scaled up. Source: Maarten Lambrechts, CC BY 4.0

Different scaling can be applied for text and non-text elements in a visualisation, to keep font sizes to appropriate levels. But this can lead to the problem that the text in a visualisation will not fit its designated space anymore and will start to overlap with other elements in a chart. Check for example the labels on the x axis in the following version of the chart, in which the text is not scaled down.