Position presentation reflecting on the relationship between content presentation and evolving hardware.

1. @davidpetersimon
Representing Information Across Channels

2. IMG Source: http://media-cache-ak0.pinimg.com/236x/11/f3/4c/11f34c1e1687b4b167fdb1448162b0f4.jpg

3. PURE INFORMATION
REPRESENTATION
Slide style inspiration: @benkappler

4. STRUCTURED
PRESENTATION
Slide style inspiration: @benkappler

5. IMG Source: http://is.gd/5z13dK

6. !original no dithering dithering
IMG Source: http://en.wikipedia.org/wiki/Dither

7. IMG Source: http://alistapart.com/article/responsive-web-design

8. IMG Source: http://cdn.shopify.com/s/files/1/0051/7692/products/ABA-hero-4.jpg?v=1357847351

10. IMG Source: http://alamko.info/wp-content/uploads/2014/07/Media-Queries.jpg

12. IMG Source: http://monkeyboys.org/images/dilbert-buzzword.jpeg
WE MUST ADOPT AN
AGILE, MOBILE FIRST
APPROACH FOR
OUR NEXT
MVP.

13. IMG Source: http://en.wikipedia.org/wiki/Transient_response#mediaviewer/File:Oscillation_amortie.svg

14. IMG Source: http://web.archive.org/web/19961112181513/http://www.nytimes.com/

15. IMG Source: https://acme.mybalsamiq.com/projects/responsivewireframes/Home.png

16. “[We need] to develop thoughtful design
systems, rather than creating simple
collections of web pages.”
Quote Source: http://bradfrostweb.com/blog/post/atomic-web-design/

19. IMG Source: http://www.lesscakemorefrosting.com/wp-content/uploads/2012/03/OpenBook800.jpg

20. IMG Source: http://is.gd/crKvwi

21. Form is not
independent.
IMG Source: http://ia.net/blog/learning-to-see/

22. What defines a “page” nowadays?
!
IMG Source: http://uxmatters.com/mt/archives/2011/10/the-rise-of-cross-channel-ux-design.php

23. IMG Source: http://beta21.circussocial.com/wp-content/uploads/2014/04/img01.jpg

24. Location: Twitter app
Connectivity: 3G
Location: Chrome browser
Connectivity: Wi-Fi
Location: Pocket app
Connectivity: Offline
IMG Source: http://vimeo.com/40168555

25. Instead of grids or textures, what is critical
is the way the information is organized
in a form that can be recognizable on any
device, so as to add value to the user
whatever entry point they may consume the
content in.
It is about the fluidity of form and strength
of device relationships, not page display.

26. !
IMG Source: http://uxmatters.com/mt/archives/2011/10/the-rise-of-cross-channel-ux-design.php

27. “STRUCTURE FIRST”
@markboulton
IMG Source: http://www.bene.be/images/uploads/2011-blog/20110125/20110125-Naconf-01.png

29. Create Once, Publish Everywhere.

30. !
IMG Source: http://www.programmableweb.com/news/cope-create-once-publish-everywhere/2009/10/13
Create Once, Publish Everywhere.

31. !
Create Once, Publish Everywhere.
IMG Source: http://www.programmableweb.com/news/cope-create-once-publish-everywhere/2009/10/13

32. !
Create Once, Publish Everywhere.
IMG Source: http://www.programmableweb.com/news/cope-create-once-publish-everywhere/2009/10/13

33. IMG Source: http://cdn.oreillystatic.com/en/assets/1/event/51/NPR Everywhere_ The Power of Flexible Content Presentation.pdf

34. IMG Source: http://cdn.oreillystatic.com/en/assets/1/event/51/NPR Everywhere_ The Power of Flexible Content Presentation.pdf

35. 35
“And so paradoxically, having more structure
… is going to mean that we’re going to have
more flexibility in the future to get that
content onto places and platforms and
devices that we didn’t even know would exist
when we decided to do this ten years ago.”
@karenmcgrane
IMG Source: http://2013.dareconf.com/speakers/mcgrane

37. IMG Source: http://media.tumblr.com/tumblr_mbdl5ed75I1qclfey.jpg

38. IMG Source: http://blogs.murdoch.edu.au/cindychin/files/2010/10/facebook-open-api-process.jpg

39. meta title
meta description
thumbnail

40. IMG Source: http://www.bitrebels.com/geek/the-oldest-known-facebook-user-and-geek-alive/

42. !
IMG Source: http://is.gd/lyzlHo

43. Source:
“You only appreciate the IA through
exposure to the complex cross-
channel nature of the service.”
@resmini
IMG Source: http://www.bbc.co.uk/nol/shared/spl/hi/sci_nat/10/facebook/img/facebook_conn_image_976x462.gif

45. IMG Source: http://ben-evans.com/benedictevans/2013/11/5/mobile-is-eating-the-world-autumn-2013-edition

46. Mobile?
IMG Source: http://www.webitstudios.com/images/webit-mobile-first.jpg

47. Mobile?Mobile?
IMG Source: http://tctechcrunch2011.files.wordpress.com/2011/01/snaptushot2.png

48. Mobile?
IMG Source: http://cdn.redmondpie.com/wp-content/uploads/2014/09/Apple-Watch-logo-main1.png

49. IMG Source: http://stmikes.utoronto.ca/alumni/profiles/mcluhan.asp

50. Zach Brand
@zbrand
Daniel Jacobson
@daniel_jacobson
John Allsop
@johnallsop
Andrea Resmini
@resmini
Acknowledgments
IMG Sources: http://twitter.com
Karen McGrane
@karenmcgrane
Ethan Marcotte
@beep
Brad Frost
@bradfrost
Mark Boulton
@markboulton