Uploaded byBill Hinderman
Table-First : Building Responsive Data Visualization for the Web
The document discusses the evolution and importance of responsive web design (RWD) and responsive data visualization (RDV) for improving user experience across various devices. It emphasizes the significance of creating adaptable content that enhances engagement and conversion rates while acknowledging common misconceptions and technical challenges surrounding mobile and web development. Ultimately, it advocates for embracing future-friendly design strategies that prioritize user needs and accessibility.
More Related Content
Similar to Table-First : Building Responsive Data Visualization for the Web
![Responsive Design Studio [Mountain View 2013]](https://cdn.slidesharecdn.com/ss_thumbnails/responsivedesignstudiomountainview-131018101452-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Table-First : Building Responsive Data Visualization for the Web
- 1. <table>-first. Building responsivedata visualization for the web Bill Hinderman | @billHinderman
- 2. Let’s talk about the 90’s.
- 3.
- 4.
- 6. Internet: an abridgedhistory. 0 250 500 750 1000 1250 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 Yearly Unit Sales (MM)
- 10. Fig. N°2 “TheMobile Web”
- 11. Where are wenow? No mobile experience Link to app Separate sites for the following: Mobile/desktop Mobile/tablet/desktop
- 13. Separate mobile experiences. Recent effort Cutting-edge technology Content targeted to mobile No legacy overhead
- 14. Bang for yourbuck. Create separate: Domain Development Content Design Create no desktop improvement Lose conversion
- 17. Fig. N°3 “ResponsiveWeb Design”
- 18. What is RWD? Mobile-first thought Unobtrusive JavaScript Fluid grids Progressive enhancement with techniques like: CSS @media queries JS feature detection Lazy-loading images
- 19. Bang for yourbuck. Have one site Adapt to any device Create faster experiences Improve conversion
- 20. Excuses, excuses. Redesignsare expensive Yes, but… Long-term value Site is too complex BBC.com Time.com BarackObama.com Microsoft.com
- 21. US mobile holiday shopping. 2011 : 14% 2012 : 30% 2013 : 50%
- 22. We’ve crossed theline. 50.3%
- 23.
- 24. Where are wenow? No mobile experience Works in the app Visualization shows up: Huge Tiny
- 28. Fig. N°5 “ResponsiveData Visualization”
- 29. What is RDV? Content-first thought Unobtrusive visualization Fluid containers Progressive enhancement with techniques like: CSS @media queries JS feature detection Lazy-loading information
- 30. Bang for yourbuck. Your visualizations become: Device-targeted Dynamic Easier to update Way more lightweight Future-friendly You’re doing it anyway …Plus everything RWD gets you
- 31. Excuses, excuses. Technicalproblems Can’t support old browsers Solutions require JavaScript Political problems Too much work People won’t look at it Data is too complex
- 32. “If you can’texplain it simply, you don’t understand it well enough.” Albert Einstein
- 33. Not a developer (Maybe Einstein again?) “I’m not a developer.”
- 34. Fig. N°6 “Nuts& Bolts”
- 35. Think small. Buildfor mobile
- 37. Asset dependent. Growup & out Present more robust content when you can Cater to: Screen size Device PPI Viewing distance
- 38. Asset dependent. .data-viz{ "background-image: url(“./foo.png”); svg”); } " @media screen and (min-width: 34em) { ".data-viz { " "background-image: url(“./bar.foo34.jpg”); svg”); "} }"
- 39. Drawing with data. Don’t hide your data Start with numbers Render information with code Adapt to the user’s device
- 40.
- 41. Let’s put it all together. Responsive website Mobile-first Adaptive assets D3-drawn chart Touch interaction Non-JS backup plan
- 42.
- 43.
- 44.
- 45.
- 46. Fig. N°7 “Me,me, me”
- 47. You’re a special snowflake.
- 48. One more time, with feeling. PC 350M sold in 2012 1.6B in use Home & work Mobile 1.7B sold in 2012 3.2B in use Taken everywhere
- 49. “It's one thingto write code. It's another to humanize technology so it serves a purpose in people's lives.” Luke Wroblewski
- 50. The gist. Informationis beautiful Treat data as: Static Content Treat design as: Adaptive Enhancement
- 51. What now? Bea creator Be a conduit Be an advocate Be future-friendly Embrace unpredictability Help others do the same
- 55.
- 56.
- 57. Thank you. Sentfrom my iPhone Bill Hinderman | @billHinderman
- 58. The tools. http://d3js.org/ http:// gionkunz.github.io/ chartist-js/ http:// raphaeljs.com/
- 59. Credit where it’sdue. http://en.wikipedia.org/wiki/Moon_shoes http://qz.com/145704/slides-mobile-is-eating-the-world/ http://www.pewinternet.org/2011/11/02/half-of-adult-cell-phone- owners-have-apps-on-their-phones/ http://www.adweek.com/news/advertising-branding/ glimpse-marketers-social-media-strategies-159962 http://www.shopify.com/blog/15206517-mobile-now-accounts- for-50-3-of-all-ecommerce-traffic https://digitalhumanities.stanford.edu/responsive-data-visualization- 0 http://blog.visual.ly/responsive-information-design/ http://bl.ocks.org/llimllib/841dd138e429bb0545df http://designmind.frogdesign.com/blog/the-ux-of-data.html http://futurefriendlyweb.com/ http://www.thecocktailgui.de/
Editor's Notes
- #3 Golden age of sitcoms Segway prototype Moon shoes – 1970s – popular in 90s (Nickelodeon – Pinwheel in 1977) National center for supercomputing applications - Mosaic DON’T MOVE
- #4 Mosaic – Netscape 1994 DON’T MOVE
- #5 Mosaic – Netscape 1994 DON’T MOVE
- #6 1996 - ~70M DON’T MOVE
- #7 2000 - .com burst 2007 – “mobile” 2011 – flip point DON’T MOVE
- #8 More than 45% of US adults own smartphones Over 70% of 18-29 year olds own smartphones
- #9 More than 30% of US adults own a tablet ~30M adults use mobile as PRIMARY internet 2015: Mobile web usage will overtake desktop usage
- #10 ~30M adults use mobile as PRIMARY internet 2015: Mobile web usage will overtake desktop usage
- #11 DON’T MOVE
- #12 DON’T MOVE
- #13 DON’T MOVE
- #14 DON’T MOVE
- #15 Domain Development Content Design
- #16 More than 30% of US adults own a tablet 2015: Mobile web usage will overtake desktop usage
- #17 Billion Android sizes Three *new* sizes of iPhone Tablets Computers
- #18 Ethan Marcotte - AListApart
- #19 Adapt, respond, and overcome
- #20 Domain Development Content Design
- #22 US shopping trends “Bought using a mobile device”
- #23 Shopify blog end of August 2014, more than 100,000 eCommerce websites – mobile shopping surpassed desktop
- #24 We have a lot of data, and we want to show it off.
- #25 Google analytics app – nice, but misses the underlying problem. DON’T MOVE
- #26 Big visualizations stretched / tiny on mobile screens. (Is this better than the full site crap?)
- #27 Is it better than this? DON’T MOVE
- #28 Or this? (Is this better than the full site crap?)
- #29 Not doing anything revolutionary here. Taking principles we’ve already established for web design, and applying them to our visualization design.
- #32 D3 supported in everything modern, and back to IE8. (Can provide fallback). Yes, can provide fallback. Data is too complex – Einstein quote next
- #34 That’s fine. You’re here because you have a stake in this. Want company to succeed. Plus, it’s not /that/ hard.
- #35 Three different classes of ways to do this. Think small Switching assets Drawing with your actual data
- #37 Your canvas has shrunk (but that’s a good thing)
- #39 Only code you’ll see. I SWEAR.
- #40 D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an -- HTML table from an array of numbers. -- Or, use the same data to create an interactive SVG line chart with smooth transitions and interaction.
- #41 It’s all markup, and can be styled / interacted with just like the rest of the web. Not locked in some asset / applet / Flash container
- #42 theCocktailGui.de Built as a pet project (riff from Medium entry).
- #43 Mobile
- #44 Tablet / bigger mobile
- #45 Horizontal tablet?
- #46 My laptop
- #48 I don’t have the right answer for you alone Device independence - State as data - Sharing with people - Sharing with computers - Devices as data generators
- #49 Web design: 29 years of PC design to unlearn 6, 7 years of mobile to learn Data design: Only added interaction Now need to think about varying screens, allow people to consume data
- #51 Either people want this information, or we want them to want it.
- #52 Take a deep breath, you’re in the home stretch, kid. Make this happen Share this information Help people in your organization – shock them with numbers (we’re data people)
- #53 This isn’t our whole universe
- #54 Devices that seem kind of dumb.
- #55 Devices whose potential we’ve only started to grasp
- #57 Things will continue to shift. Nickelodoen isn’t called Nickelodeon anymore. (Nick) Build with the adaptability to say we don’t know, we can solve these problems without a radical change.
- #59 D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.