Flip, slice, trim
Creative ways of adapting your charts to mobile
Roughly 60%1 of all online traffic takes place on mobile. But when you make data graphics, how often do you start designing for mobile, then move to desktop? Probably not often enough. Me neither.
Why? It can be tricky to get creative when the real estate is so limited. So today, let’s look at strong yet unusual examples of turning a desktop graphic into a mobile one.
Flip it
Instead of making a horizontal chart smaller on mobile, how about making it vertical by flipping it? In a recent report for a client, we flipped a donut chart to give it all the vertical space it deserved. The result was quite fun, especially when animated.
Slice it
One of the hardest chart types to show on mobile are maps. They often look too small to actually be read. That’s why I love this approach by Jonas Oesch at NZZ: slicing the map and placing it on screen in a way that fits the vertical space. We used it in the Spina Bifida project and quite liked the result.
Stack it
If I say, “stack your graphics vertically”, I won’t be breaking any ground. I know. But keeping vertical stacking in mind can help you reconsider certain chart options. for example, small multiples take up a lot of space on desktop but can be stacked nicely on mobile and keep their attractiveness, like in this article by The End Fund.
Trim it
Mobile reading is meant to be quicker. So do you really need all the content you have in the desktop version? If you had to select just 2–3 key elements instead of all data points, what would those be? The Marshall Project did just that: trimmed down the number of columns in their mobile table.
Scroll it
When you can't use the entire vertical space for the mobile graphic, you can introduce a horizontal scroll. This lets you keep a big chunk of the screen for the key content, and reserve a small part for a selection panel or additional information. I love how the designers of the Protecting Blue Corridors site did that.
What are your favourite examples of mobile-adapted graphics? Share them in the chat 📱
Thanks for reading! The Plot will take a break in August. I’ll see you again in September,
—Evelina
Source: Statcounter
Those are all great tips! I've never thought of slicing a map. Will definitely consider it for future projects.
First time I faced that struggle was when some users told me yes, the dashboard looks amazing from your screen but my team spend most of the time at their cellphones and tablets 🫠. That's the moment when I learned from the product team the "mobile first" approach even for dataviz 🤓