The Changing Architecture of Online Infographics

The Changing Architecture of Online Infographics


Geoff McGhee

March 13, 2013


  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

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. What’s the Thinking Here?

  10. None
  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)
  13. None
  14. None
  15. None
  16. Is 960 Still the Right Answer?

  17. None
  18. None
  19. D’oh!

  20. Ok, better... But still too small to use

  21. Are smartphones the only problem?

  22. None
  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
  27. None
  28. Does it work for infographics?

  29. None
  30. Ok, fine, but can a news organization pull this off?

  31. None
  32. None
  33. None
  34. None
  35. None
  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

  41. None

  43. None

  45. None
  46. The Changing Architecture of Online Graphics Scrolling Our Way to

    the Future
  47. None
  48. Who Needs Buttons?

  49. None
  50. Meet “Parallax Scrolling”

  51. None
  52. And the “Curtain”

  53. None
  54. How does this look in action?

  55. None
  56. None
  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
  61. None
  62. None
  63. What about non-linear stories / random access? Waypoints!

  64. None
  65. None
  66. How about media that controls the page? In this paradigm,

    the page controls media
  67. None
  68. Difficult.

  69. None
  70. Easy!

  71. Beyond scrolling... the next big thing?

  72. None
  73. None
  74. None
  75. None
  76. Inspecting Your Data Before You Build Changing the Subject for

    a Moment
  77. Free and Web-Based Applications Tableau 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
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None

  85. Thanks! Twitter: @mcgeoff