└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Crafting new visualization techniques for the mobile web 2 | 3 | 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. 4 | 5 | ## Session 6 | 7 | 1. Think of different data visualization techniques 8 | - What makes this visualization effective? 9 | - How does it work on small screens? 10 | 2. How can this visualization take advantage of the mobile web? 11 | - Mobile APIS 12 | - Screen Orentation/rotation 13 | - Interaction behavior (pinching, zooming, turning) 14 | 3. Draft an interaction using paper prototypes 15 | 16 | 17 | ## Some reading/resources 18 | - [How The Wall Street Journal creates mobile-friendly interactives](https://www.journalism.co.uk/news/how-the-wall-street-journal-approaches-data-interactives-on-mobile/s2/a574385/) [Article] 19 | - [Data Viz for All | Mobile documentation](https://github.com/julia67/data-viz-for-all/tree/master/Mobile) [Repo] 20 | 21 | ### Examples 22 | 23 | - http://www.theguardian.com/society/ng-interactive/2015/sep/02/unaffordable-country-where-can-you-afford-to-buy-a-house 24 | - http://graphics.wsj.com/mapped-europes-pollution-problem/#51.5225,-0.1546 25 | - http://www.nytimes.com/interactive/2014/03/31/science/motorcycle-helmet-laws.html?_r=1 26 | - http://www.npr.org/2015/04/01/396757476/the-neighborhood-wal-mart-a-blessing-or-a-curse 27 | - https://www.washingtonpost.com/graphics/local/2015-papal-visit/pope-visits/ 28 | 29 | ## Extra Credit: Light Apps 30 | 31 | > 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. 32 | 33 | > 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. 34 | 35 | > — [On China’s Bleeding Edge: Web Design Trends 2015](http://www.smashingmagazine.com/2015/02/china-web-design-trends-2015/) 36 | 37 | CHALLENGE: **How can we apply the concept of "Light Apps" to mobile visual storytelling?** 38 | 39 | More reading: http://spyrestudios.com/light-app-development-indicative-of-chinas-online-consumption/ 40 | 41 | ### Examples 42 | 43 | - http://image.thepaper.cn/html/zt/2014/ynhx/index.html 44 | - http://news.qq.com/zt2014/look/index.htm 45 | - http://www.liveapp.cn/HTML/dev_mi/index.html 46 | 47 | 48 | ## Contribute 49 | Have ideas for mobile data viz? [Add an issue!](https://github.com/aboutaaron/mobile-dataviz-mozfest-2015/issues) I hope this repo provides ideas for building fantastic mobile-first data visualizations. 50 | --------------------------------------------------------------------------------