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.

9.1 What is responsive design

 
 
 

9.1.1 Mobile-first approach

 
 
 
 

9.1.2 Desktop-first approach

 

9.2 A responsive line chart

 
 
 
 

9.2.1 Adapting the size of the text labels

 
 
 
 

9.2.2 Adjusting the axes labels

 
 
 

9.2.3 Adopting a minimalistic approach

 
 
 

9.3 A responsive dashboard

 
 

9.3.1 Using a responsive grid

 

9.3.2 Adapting the density of information

 

9.3.3 Changing the orientation of a chart

 
 

9.4 Additional tips

 
 
 

9.5 Summary

 
 
 
sitemap

Unable to load book!

The book could not be loaded.

(try again in a couple of minutes)

manning.com homepage
test yourself with a liveTest