Book coming via Wiley Publishing autumn 2015! Responsive design has changed the way that designers and developers create content for the web. How can data design learn from web design as a whole, as we move to a mobile-driven, multi-device internet? In this session, I'll discuss distilling data to its base: numbers. And I’ll treat design, presentation, and interaction as enhancement. Mirroring the mobile-first approach to responsive design, we represent data <table>-first, and rely on web technologies as a presentation layer. This way, we can build scalable, smart, maintainable visualizations. When we create for the web, we design and code for an audience that no longer is consuming on a traditional computer screen. By 2015, more people will access the internet via mobile devices than on traditional computers. This is as disruptive as the shift from physical to digital content, and we, as content creators, need to evolve to stay relevant in this new mobile-driven landscape.

1. <table>-first.
Building responsive data visualization for the web
Bill Hinderman | @billHinderman

2. Let’s talk
about
the 90’s.

3. Fig. N°1
“Internet”

4. 59M

6. Internet: an abridged history.
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
“The Mobile Web”

11. Where are
we now?
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
your buck.
Create separate:
Domain
Development
Content
Design
Create no desktop
improvement
Lose conversion

17. Fig. N°3
“Responsive Web 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
your buck.
Have one site
Adapt to any device
Create faster
experiences
Improve conversion

20. Excuses,
excuses.
Redesigns are
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
the line.
50.3%

23. Fig. N°4
“Data”

24. Where are
we now?
No mobile
experience
Works in the app
Visualization
shows up:
Huge
Tiny

28. Fig. N°5
“Responsive Data 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
your buck.
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.
Technical problems
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’t explain 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.
Build for mobile

37. Asset
dependent.
Grow up & 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. Markup.

41. Let’s put it
all together.
Responsive
website
Mobile-first
Adaptive assets
D3-drawn chart
Touch interaction
Non-JS backup
plan

42. www.thecocktailgui.de

43. www.thecocktailgui.de

44. www.thecocktailgui.de

45. www.thecocktailgui.de

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 thing to write code. It's another to humanize
technology so it serves a purpose in people's lives.”
Luke Wroblewski

50. The gist.
Information is
beautiful
Treat data as:
Static
Content
Treat design as:
Adaptive
Enhancement

51. What now?
Be a creator
Be a conduit
Be an advocate
Be future-friendly
Embrace unpredictability
Help others do the same

55. Fig. N°8
“Future”

56. What’s next?

57. Thank you.
Sent from my iPhone
Bill Hinderman | @billHinderman

58. The
tools.
http://d3js.org/
http://
gionkunz.github.io/
chartist-js/
http://
raphaeljs.com/

59. Credit
where
it’s due.
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/