Notes and code for my MozFest session on mobile data visualization
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md

README.md

Crafting new visualization techniques for the mobile web

It’s time we treat the mobile web as first class and desktop experiences as secondary. In this session, we will discuss and design data visualization techniques that are mobile specific. Rather than design visuals for desktop that scale down, we’ll design for mobile and scale up. Mobile interaction is an open field, so how can we use tap, shake, and rotate as tools for storytelling and visualization? Let’s think about how both the mobile web and the devices themselves can illustrate data in ways a desktop browser or app cannot.

Session

  1. Think of different data visualization techniques
  • What makes this visualization effective?
  • How does it work on small screens?
  1. How can this visualization take advantage of the mobile web?
  • Mobile APIS
  • Screen Orentation/rotation
  • Interaction behavior (pinching, zooming, turning)
  1. Draft an interaction using paper prototypes

Some reading/resources

Examples

Extra Credit: Light Apps

Websites are so 2010. In 2015, Chinese companies are building light apps, or qing ying yong (轻应用). Light apps are one-off, zero-download, hyper-targeted mini-sites that are typically built (and often animated) with HTML5. Oh sure, they do have a dedicated URL and they’ll load in a desktop browser if you absolutely insist, but they’ll probably look awful on a desktop screen. In some cases, they don’t even function at all after the page loads, given that some of them require swipes to navigate.

Light apps are designed for fruit-fly attention spans. They’re often single-page, single-message and intended to be single-use. In other words, users would open a light app once, flip through it, ideally pass it on to friends via mobile sharing, and then never look at it again.

On China’s Bleeding Edge: Web Design Trends 2015

CHALLENGE: How can we apply the concept of "Light Apps" to mobile visual storytelling?

More reading: http://spyrestudios.com/light-app-development-indicative-of-chinas-online-consumption/

Examples

Contribute

Have ideas for mobile data viz? Add an issue! I hope this repo provides ideas for building fantastic mobile-first data visualizations.