As data journalists, we tend to focus on visualizing our numbers as beautifully and comprehensively as possible for desktops. We pore over D3.js line charts. We spend hours getting the tooltips on our maps to look just right. And right before our deadlines, we’ll throw in some CSS media queries for mobile screens and call it a day. I know I’ve been a culprit of this method more than once.

One of my favorite sessions at Mozilla Festival this year was Aaron Williams’ “Crafting new visualization techniques for mobile web”, where he emphasized a mobile-first, desktop-second focus to data visualization.

We're talking mobile dataviz at #mozfest2015 in 702. Come on by! pic.twitter.com/KCAmkJ4XnN

— Aaron Williams™ (@aboutaaron) November 7, 2015

“I’ve heard some people in our craft say that desktop is the best experience,” he says. “In my opinion, that ignores a huge chunk of the world, particularly people of lower income who might only have phones.”

As the interactive editor for the San Francisco Chronicle, Williams’ projects serve communities in the Bay Area. Although he thinks data visualization looks amazing on a big screen, he has to consider the audience of communities like Oakland or Berkeley, lower income neighborhoods in comparison to the tech bubble of the Silicon Valley. Besides, he says, he is always on his phone too, so it’s about his own user experience as much as anyone else’s.

This seems like an obvious concept, especially in a time when desktops have shrunk to the size of your palm and phone screens have grown to the size of your face. But I realized that as a budding data journalist, I’ve been thinking of mobile design as an obstacle to what I’ve already created for a desktop experience.

So we started off the MozFest session by making a few short lists:

Some Types of Data Visualizations

• Maps (choropleth, heat)
• Bar graphs
• Timelines
• Small multiples
• Tables
• Line charts

Advantages of Mobile Phone

• Multiple touch functionality + force touch with iPhone 6S
• GPS system
• Portability
• Normal and front-facing cameras
• Vibration
• Screen rotation

Disadvantages of Mobile Phone

• Thumb size affecting touch points
• Small screen size
• Battery life
• Bandwidth and weak internet connections
• No hover functionality
• No mouse
• Shorter time and attention span given from audience

Each group’s task was to consider and work with a certain advantage or disadvantage of data visualization on mobile web. My group chose the phone’s GPS system to work with a combination of maps and timelines. A few members of the group were designers for a tool called Histropedia, which helps users understand the historical timeline of their current location. Here were our brainstormed sketches.

Other groups tackled timelines as well, presenting the option of displaying the timeline as a whole on the screen in truncated sections, a vertical orientation or even a “snakes and ladders” curving situation. Our group decided to display one timeline card at a time. Each card would theoretically be accompanied by a small line graph of the whole timeline to symbolize the differences in length of time between events or clusters of many events around a short period of time. Aside from the fun paper phones and productive brainstorming, the session helped restructure my perception of data visualization and think about how different my previous projects might have been with a mobile-first mindset.

Williams thinks although much of the world uses mobile as the number one method of consuming news, newsrooms often make assumptions of what people think is important and how people might want to consume content.

“I wanted to challenge other people outside the big media companies to start thinking about these things,” Williams says, of his session. “The phone has so much capability and we limit what we do to putting articles on a webpage.”

For his projects at San Francisco Chronicle, Williams strips down the way he writes code and avoids library-heavy experiences. For example, The Airbnb Impact includes a map that is made of entirely SVG, yielding efficient browser support. His map of San Francisco’s complaints of encampments, human waste, and needles uses only Leaflet.js and D3.js. He’s even switched the way he writes CSS, using mobile-centric frameworks like Bourbon.io. This mindset is powerful for him to hone the focus of his projects, which often results in better mobile support by default.

“When I code, I set up my phone and desktop browser together,” Williams says. “As I code and refresh in real time, I am seeing the mobile changes in real time. I make decisions on mobile and translate them back to the desktop.”

Without many desktop-exclusive features, we as content creators have the opportunity to simplify and detangle our information. People are savvy enough to see a poor mobile experience, Williams says. But by thinking mobile first, we can enhance content to be more sensitive to a user’s location, take advantage of multiple touch functionality or even include vibration elements that may cater to visually impaired audiences. The mobile web should no longer be an obstacle to overcome, but a chance to better focus our storytelling and therefore our readers.

• Share on Twitter
• Share on Facebook