Responsive webdesign is a design that facilitates reading a website on both desktop computers and mobile devices of all sorts of sizes. Smart solutions have been around for a number of years now and a non-responsive website is almost considered a sin nowadays.
Chart libraries like Highcharts are created with responsiveness in mind. But custom visualizations and infographics are often one-size only productions and can only be viewed in their full glory when viewed on a large desktop screen.
My first encounter with a responsive data visualization was when I started an assignment at NOS. Yoeran Luteijn showed me one of his responsive visualisations and explained how important it was for a news agency to support all kinds devices. Later on, I saw this inspiring talk by Garbiel Florit and I was convinced that I should dive deeper into the possibilities of responsive visualizations.
Last week, I got an assignment from OneWorld to create three visualizations. For one on the visualisations, I decided to use Isotype. The visualization was going to be embedded on two different websites, so I had to take responsiveness into account. Not so much for supporting different devices, but for supporting different website dimensions.
When displayed on a wide screen, the layout is shown as:
And when displayed on a narrow screen (or embedded in a narrow article) it is shown as:
Check out the visualization here
Technically speaking, the visualization is responsive. But the design is not optimal from a visualization perspective. By wrapping the icons, more vertical space is needed and it becomes more difficult to compare quantities among countries. But if you decide to design responsiveness this way, it is good to wrap the symbols in groups of five (or whatever unit you use to group symbols) as is shown in this production.
The demo contains different responsive states:
Using a symbol with most details (Iconic medium)
- Using a symbol with less details (Iconic small)
- Using a square instead of a figurative symbol
- Displaying a barchart
- Displaying just numbers
Try the demo:
I disabled the first state in the demo, because the icons by Iconic update very slowly on Chrome and Safari if you want to change their appearance on resize. But here is a screenshot of the demo in the first state, when it uses a symbol with more details:
The demo is not 100% Isotype as it scales down to a bar chart or even plain numbers. But I’m looking for practical answers to real life questions in this study. So for me this seems like a good way to design responsive Isotype.
I’m not completely convinced if one should use symbols with many levels of detail as is proposed by Joe Harrison.With modern high resolution screens on mobile devices, I wonder at what stage the details of an icon have a negative impact on readability. I should conduct further study in taking an original Isotype symbol and scale it down until we reach that point.
By the way, Iconic is not focussed on Isotype but on icons that are part of a user interface. I used their home icon because it comes in 3 versions with increased level of detail. The highest level of detail is obtained when one uses an icon of 128 x 128 pixels, and that is a size that I would probably never use in online Isotype charts.