Don’t Teach Data Journalism Without Teaching Mobile-First Design
Big Data, Small Screens
Twice in two weeks, Columbia Journalism School has demonstrated that a) it considers data journalism to be a crucial part of journalism’s future but b) that it still doesn’t get how vital design thinking for data journalism to work on the medium where it will be consumed.
Let me be really blunt about this. You cannot teach data journalism without teaching how to make it look good on a screen smaller than a pack of cards.
Here’s a handy maxim, journalism academics:
BIG DATA? SMALL SCREENS.
Jonathan Stray launched his ebook ‘The Curious Journalist’s Guide To Data’ at a Columbia event recently. It’s good, go read it. It’s also free, so you have absolutely no excuse for not reading it.
On stage at the launch, three lecturers in journalism & statistics joined Jonathan and talked eloquently about calculating probabilities, the use of R, p values and more besides. It was some good in-the-weeds discussion about the concepts underpinning data gathering and analysis.
But then someone in the audience asked how to make all this wonderful data render beautifully on a small screen, and was met mostly with silence and a few shrugs. Scott Klein offered that you have to test everything — mobile is as important as desktop, which is a promising response (device agnosticism is obviously critical) but that answer wasn’t enough. Testing mostly happens after something visual has been made. You need to consider mobile presentation before you make any dataviz. Mobile comes first.
Mobile is now more important than desktop and hence must lead design thinking. Mobile is pretty near everything, being honest. Build for mobile, test for compatibility with everything else.
If you hope to make data journalism connect with an audience at scale, you need to have a plan for getting it onto a small screen in a way that looks appealing and tells your story. That means your visualisation loads quickly, is at-a-glance comprehensible and doesn’t take any work for the reader to navigate. And you have to do that every single time.
Making big data work on small screens is hard but important. At Vocativ, our audience hovers around 80% mobile on any given day, so if something doesn’t work on mobile, it doesn’t work. When it comes to visualisation, you’ll often see me chatting with the team, taking my iPhone 5 out of my pocket and pressing against a monitor to highlight how much space we have to play with in any given viz. We’ve built our dataviz style guide with mobile first as a priority, setting minimum sizes for most of our fonts, minimising and thinking deeply about color scales and palettes and creating everything in a mobile-first way. We favor visualisation styles that work consistently in a longer, more vertical frame rather than favoring the horizontal aspect ratio typical of the desktop screen.
When we make gifs for dataviz, we reduce the number of colors & frames to cut down file sizes and thus load times on the reader’s phone. Vocativ’s just-dropped presentation layer has been rebuilt in React to further help with load time. Because video can be so easily optimised for mobile, you’ll see more data storytelling incorporated into Vocativ video soon, too.
Back to the school thing.
The second publication that made me question how academics think about data journalism was an intro to a report from Columbia Journalism Review describing how to teach data journalism. I was optimistic, until I got to the data journalism within it.
It looks passable here, but do what I always do when I see visualizations online — grab the corner of your browser window and shrink it down as small as it will go, to see what the mobile experience will be like (assuming you’re not reading this on your phone, that is.) It means either zooming or squinting, right?
The above image looks fine if small-fonted on desktop, but it’s 800 pixels across at full resolution, with the text still very small at that. An iPhone5 screen is 320 pixels across. Squash an 800px image down to 320px, and you lose a lot of value. If it began as a just-about-legible dataviz on desktop, on mobile it’s likely a useless mess, unless it was designed mobile-first. The bar chart above is a case of very simple, quality data crippled by presentation that fails to consider the reader.
Here’s the exact same data, given a very simple, mobile-first treatment. If you’re not already doing so, check it out on your phone.
This was made in five minutes using Vocativ’s custom template in Datawrapper, to which we sometimes default for simpler graphics. In this case, it’s a static image (Medium can’t deal with the responsive iframe embeds) but when we use Datawrapper embeds, the fact that they are responsive is fabulous for mobile, and scales well for desktop.
After six months leading our charge into data journalism and visualisation at Vocativ, my two main goals remain the same:
Help more journalists understand how to tell stories with data
Make it work on mobile every single time.
J-schools, if the CJR report is anything to go by, are waking up to the first goal and seeking to improve how they teach computer-aided reporting— and the CJR report makes some important suggestions on that front. But the second goal—making it work on mobile every time—isn’t on the radar, and data visualization is a poor cousin to the data extraction element of the discipline. The word ‘mobile’ features only once in the entire CJR report. In a world where we communicate and read mostly on phones, that’s bad.
Those two goals are always interrelated. The first is easier: At Vocativ, we reduce the fear around data journalism by creating some really simple processes for journalists to bring data to our dataviz team, and then we involve the reporters in the process of telling stories with that data. Helping the reporters understand the limitations of mobile visualisation and think about visuals up front helps manage their expectations, but also helps them frame what they think is the most important point the data should convey. Two of our team are also building Dataproofer, a tool to help journalists proofread datasets, removing even more impediments to the process.
Making viz work for mobile is the harder of the two goals, and we don’t always get it right, but it’s absolutely crucial to try every time, even if that means over-simplifying. We share our static graphic drafts in a Slack channel, and I try to always to review them through the Slack app on my phone rather than on desktop so that I see them as the reader will. That informs any design-related edits I have, which are most often about finding ways to either reduce the amount of text or bump up its size.
We’d love to do more interactives, but frankly, we value load time, simplicity and ease of scrolling over interactivity and complexity. Forcing interaction risks introducing a cognitive burden for an already skittish reader, their attention span frayed by Twitter and media overload. Performance is important, too–they won’t hang around on a page slowed by waiting for something heavy to load. Archie Tse put it really well here, I don’t need to go on about it — go read his notes. Then go read Mike Bostock’s expanded thoughts on why scrolling is the most important interaction there is. Once our team grows to the point where we can spend more time thinking deeply about how to make interaction work well for mobile, we’ll move into that space. Right now, simple visual storytelling, done well, works for us.
Data journalism is a vital part of journalism’s future — the 2.7 terabytes of scandal in the Panama Papers underscores that. Parsing data for stories has never been a more crucial skill to have in a newsroom, and it’s great that colleges like Columbia have courses dedicated to that discipline in isolation.
But visualization of that data is part of that discipline and, frankly, integral to the whole storytelling process. Done well, a dataviz paints a thousand data points (or even more). Done badly, it needs a thousand more words to explain it. Visualisations should move the story along, and show movement that text may struggle to convey.
Increasingly, we can extract all the data we want, but if our journalists can’t distil that into something the reader can consume in the palm of their hand, it’s all rather pointless.
Big data, small screens. Remember that.
