The Changing Architecture of Online Infographics

Transcript

1. Geoff McGhee Show Don’t Tell Workshop | Malofiej 21 12 March 2013 The Changing Architecture of Online Infographics
2. The Changing Architecture of Online Graphics The Typical Modern Interactive Graphic
9. What’s the Thinking Here?
11. ~960p ~700p
12. • Dictated by needs of standard 1024x768 monitor resolution (lowest common denominator for PCs) • “960 Grid” invented to create mathematically elegant base for 12 or 16 column grids • 1024 px was the horizontal resolution of the iPad, the first modern tablet device • 700 px is about the amount of display space visible “above the scroll” The 960 Pixel “Page” The Architecture of Online Infographics ~960px ~700px • Predominant design pattern since ~2006 • Made good sense when Flash was predominant infographics tool, because of fixed-size canvas (very hard to extend content from original boundaries)
16. Is 960 Still the Right Answer?
19. D’oh!
20. Ok, better... But still too small to use
21. Are smartphones the only problem?
23. So much empty white space
24. Are devices the only problem?
25. • Full-page infographics live on an “island” all their own • They have little presence on the rest of a website, can’t be put on front • They cannot be embedded or otherwise “quoted” elsewhere, except with a static image • For organizations that use syndication as a business model or social media strategy, they are a big problem • For sites with a usable space of less than 960 (say 600 or 700 pixels), the maximum workspace is permanently limited to a very small size • Yes, you can use a lightbox, but... More Problems with Fixed Size Infographics
26. • Coined by designer Ethan Marcotte in 2010 • “Mobile-first” design that progressively adds more richness to larger and larger screens • Sizes of elements are declared in percentages relative to their containers instead of absolute px • Styles are declared two more more times in CSS file, for different page dimensions • “Media queries” identify type of device and size of screen (or browser window), and switch instantly One Design to Fit All Sizes The Rise of Responsive Design
28. Does it work for infographics?
30. Ok, fine, but can a news organization pull this off?
36. • Text overlays on graphics “squeeze out” at smaller sizes, reappear elsewhere through numbers or callouts • When clickable buttons or icons get too small or close together, sequential slide show navigation replaces individual buttons • Not all elements should or need to extend to fill widest layout – design can break into multiple columns as window gets larger • Think of breaking down large graphics the way you would convert a large-format print graphic: split it into separate units Key Tricks and Techniques Responsive Infographics
37. • Floating panels can “dock” together to reduce footprint Responsive Design Tricks and Techniques
38. • Continuously variable window sizes can embed comfortably Responsive Design Tricks and Techniques
39. Tools that make responsive design easier
40. Dreamweaver Fluid Grid layouts Three sizes – but only three
42. html.adobe.com/edge/reflow
44. html.adobe.com/edge/animate
46. The Changing Architecture of Online Graphics Scrolling Our Way to the Future
48. Who Needs Buttons?
50. Meet “Parallax Scrolling”
52. And the “Curtain”
54. How does this look in action?
57. So what does this have to do with infographics?
58. Overloaded with Interface Elements – Navs, Buttons, Headlines, Summaries
59. Print = No interface!
60. • Scrolling is the one behavior that exists across all devices, whether it’s a mouse-wheel, swipe on a trackpad, magic mouse, tablet surface or smartphone screen • It has little or no visual interface that needs to be directly manipulated (in fact, Mac OS 10.7 virtually banished the scroll bar) • As we saw in the responsive design examples, directly clickable controls are very complicated to manage at varying resolutions... get rid of them? • Action of “scrolling” is co-opted to trigger other reactions than down movement - cuing a video, rotating, flipping through images, whatever! Infographics Where You Never Get Lost Scroll or Swipe-Based Interaction
63. What about non-linear stories / random access? Waypoints!
66. How about media that controls the page? In this paradigm, the page controls media
68. Difficult.
70. Easy! http://popcorn.webmadecontent.org/rkb
71. Beyond scrolling... the next big thing?
76. Inspecting Your Data Before You Build Changing the Subject for a Moment
77. Free and Web-Based Applications Tableau Public http://www.tableausoftware.com/public Price: Free Pros: Great design Supports many chart forms Interactive and searchable Combine charts in single Information “dashboard” Cons: Windows-only Your data is public Slow performance Getting Started with Visualization Prototyping Data-Rich Infographics
84. http://www.tableausoftware.com
85. Thanks! gmcghee@stanford.edu Twitter: @mcgeoff