9 Responsive visualizations
This chapter covers
- Discussing the main approaches to responsive design.
- Dynamically adapting the size of text elements to fit smaller screens.
- Using a responsive grid layout.
- Adapting the density of information to different screen sizes.
- Changing the orientation of a chart.
In web design, deciding whether a website or a web application should be responsive is no longer a question. We take it for granted that users will access our projects from phones, tablets, and desktop screens. We have clear guidelines and best practices, and adapting standard digital features to different screen sizes is straightforward. But when it comes to digital data visualizations, the process is more challenging and often highly dependent on the type of visualization that we are working on and our target audience.
In this chapter, we will transform the line chart built in chapter 4 and the dashboard built in chapter 8 to make them responsive. As we progress, we’ll introduce key tips and ideas for making responsive digital visualizations.