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:


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. 

This bar chart is not great data journalism at all.

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.

Just one example of data journalism in this post. Some nice bars.

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, where this was originally posted 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.

Cross posted from Medium.

Put a little birdhouse in your soul

Birdhouses by See-Ming Lee

“It’s crazy. I would consider it one of the worst photos I’ve ever taken, but it has become the most popular photo on my stream.”

As someone who ends up reading a lot about journalism, online communities, Twitter and social media in general, this pic has cropped up regularly in the sites I tend to scan. It’s a pretty easy image to link to the bird-icon behemoth of Twitter, itself a huge flitting community of twittering folk. The more I saw it, the more I wondered about it, and where it came from. Part of the joy of social media is the shrunken proximity – you can generally find someone and reach out directly to them incredibly easily. And so I got in touch with See-Ming Lee.

See-Ming is a particularly forthcoming and chatty bloke, with numerous presences on Twitter and elsewhere online to support his design business, which he operates from Hong Kong.

He posts a lot of pics on his Flickr stream, allowing most of them be used widely via Creative Commons. I’ve posted about that aspect of things over on Storyful. He’s earned cash and profile from the use of some of his pics – this one being an unexpected success. He was planning to erase it, having taken the shot to test a new Canon 70-200mm f4 lens he had on his camera. He snapped a pic of the community garden near where he was living in New York (mapped below) to see how the lens performed, back in December 2007. The birdhouses can’t be seen from the Google Earth view (he shot with the lens zoomed at 126mm, according to the EXIF data – perhaps from outside the fence) but you can see where the blue paint stops at the north-east corner of the garden. A dust spot nearly persuaded him to deleted, but instead he stuck it on Flickr and intended to forget about it. Until it got picked up and went gangbusters.

View Larger Map

If you recognise it, you might be surprised as I was to hear that no-one has ever asked See-Ming about the genesis of this photo, despite its ubiquity. It’s been used widely in the 4 1/2 years it’s been on the web, its birdhouses and bright colours making it an easy target for people looking for something to loosely tie to Twitter, or community, or whatever. Most people have credited See-Ming Lee for its use, as asked. But no-one ever wondered who he was, or how his photo ended up on Flickr.

So now you know.

It’s just one example of how there’s a story behind every piece of content unleashed on the web. Sometimes the story is inordinately dull. Sometimes the content is posted with a purpose, and sometimes it’s an act of serendipity that finds it ending up online. It’s often worth probing, though.

Long Train Running

I’ve done two bona fide ‘classic’ journeys in my time travelling. The first was a slow boat along the coast of Patagonia, which didn’t go exactly to plan and now this, the Mombasa-Nairobi train journey. The train is an old iron snake, split into first, second and third classes, with those up front having cabins and access to a dining car for meals. €36 buys you a first-class ticket, 13 hours of relative comfort, and a 500-kilometre passage from the sweltering coast up to Kenya’s capital on the Maasai steppe.  That’s good value.

‘Classic’ travel denotes a certain olde-world charm, a sense of nostalgia. It’s a warm reminiscence of a simpler time before digital displays on train platforms, laminated plastic timetables and the swiping of smartcards. It’s steam and smoke, and polished chrome.

Of course, any owner of a ‘classic’ car will tell you that classics break down on a regular basis, are slower and less efficient than modern cars, and unless kept immaculately, demand that you sacrifice some comfort for the sake of aesthetics.

All this was present in spades when I arrived at Mombasa. I had already received a phonecall warning me not to turn up on time for the 7pm train, which would not be there, so I arrived at 8pm as per revised instructions, and would find myself hanging out on the platform until well after 2am the next morning, in hopeful expectation of a train appearing out of the dark.

When I arrived, there was a singsong going on, with a teacher from Kaugi Primary School on the guitar leading 40 or so primary school children in some folksy hymns. I took out my sound recorder to capture some of it, and drew a crowd (pictured above).

The podcast below gives a better impression of it, so I’ll leave you to listen to it.

Thirteen hours on a train is not something I’m accustomed to. The train bumped happily along the tracks, and sleeping was akin to lying down on a bouncy castle full of sugar-mad kids at a birthday party. You were gently rocked, not in the typical back-and-forth, but vertically up and down. Similarly, I felt seasick for the first six hours at the far end, having grown accustomed to the movement underfoot.

In Nairobi now for the next while, and looking forward to meeting some interesting groups of people over the coming days.

Markham is on a prolonged journey through Kenya and Tanzania partly funded by a Simon Cumbers Media Challenge Fund grant. Editors/producers looking to contact Markham for material or contributions from Kenya should email markham [dot] nolan [at] gmail [dot] com, or text +254 732 580 147.

John Cuts Himself

Every now and then you do a piece that catches you in the throat. This piece stemmed from an interview with a blogger who was tackling some intensely personal stuff on his blog about his own self-harm, which he has now ditched as he has stopped harming. Result.

Sunday Business Post – Jan 26, 2006

John cuts himself. He takes a razor blade, draws its edge slowly across his upper arm until it parts the skin and glides smoothly, steely into the soft flesh beneath. He says that when he sees the blood, it feels good; it feels like the sting of sunburn and a release of pressure. Continue reading “John Cuts Himself”

Desert Trolley

I’m no festivalgoer. All that mud, all those drunks. It’s not my bag, not in the hardcore sense, at least. I drove to Oxegen and drove home Saturday night, rather than have my head stepped on in my sleep, or have to brush my teeth with the end of a flagon of Linden Village. But a festival in the Sahara has a certain appeal. Gimme a cotton tent, some rebellious desert nomads, a few hundred camels and toilets with no water and I’m all set.

Sunday Business Post, February 20, 2005

For the smug, self-satisfied world traveller, nothing brings on a smile like a heavily-stamped passport. Above that, the greater goal is stamps that say ‘I’ve been there and back’ on the road less travelled. The trump of all passport stamps must be that inked in the fabled city of Timbuktu. Continue reading “Desert Trolley”

Doing the Marathon for Mum and MS

mum.jpgI had never seen this photo here before my mother died. It’s of her, aged about 21 (I assume), clutching a champagne bottle, with a glass on her head and obviously, from her facial expression, a fairly high blood/alcohol level. I found it as I sorted through her things in the house, tucked into an old briefcase she had kept since the 70s. I keep it in my wallet now.

This image of Mum is the best way to remember her. When myself and my sister were teenagers, the front door of our house was always open to every one of our mates, and parties were encouraged. Mum would often be the last up, drinking and chatting with our mates until the wee hours. It was fairly special, and we realised we had it pretty lucky.

Everything changed when she was diagnosed with MS. A substantial personality overhaul can be fairly common with MS, I found out later. Mum got less rational, more emotional and withdrawn, and then began the slide into physical deterioration. For someone so active, so alive, it was gut-wrenching to watch the person she was disappear. No more golf, tennis, sailing. We had to take the car away from her, and she went from using a stroller to needing a wheelchair. She could see it too, and the frustration of it drove her deeper into depression, and the spiral of decline steepened.

Mum spent the last year of her life, unable to walk and barely able to mumble a word or control her limbs, in a nursing home in Stillorgan. At 49, she was the youngest person in there by close to 20 years. Continue reading “Doing the Marathon for Mum and MS”