This chapter covers
- Understanding 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’re working on and our target audience.
In this chapter, we’ll transform the line chart from chapter 4 and the dashboard from chapter 8 to make them responsive. As we progress, we’ll introduce key tips and ideas for making responsive digital visualizations with D3.