Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Innovation and the Power of the Web // UXIM Salt Lake 2015

Innovation and the Power of the Web // UXIM Salt Lake 2015

People are struggling to design and plan web properties, looking to everyone else for inspiration. Because if everyone else is doing it, that’s how it should be done, right?

But innovation doesn’t work this way. It’s not how you’ll break ahead of the pack. Nothing changes if we solve problems by mirroring what’s already been done. Don’t risk being left in the dust when a competitor takes a fresh approach and solves problems in a way you didn’t see coming.

Jen wants to help you put your company in the lead. She’ll explore:
• Giant changes in the history of human technology and the role of the web
• Emerging web technologies that are worth a deeper look
• Fresh ideas for layout innovation, real-time communication, and offline possibilities
• Innovative brains—sharpen yours by watching for where things might go next

Jen Simmons is the host and executive producer of The Web Ahead, a weekly conversation on changing technologies and the future of the web. She’s been designing for the web since 1996 and has always been fascinated with society and all the unspoken culture that binds the way we live our lives—either following the crowd or forging new paths.

Join Jen’s talk to get excited about the incredible power of the web and what we’re collectively inventing.

http://uxim15.uie.com/talks?src=jen-title#keynote-jen

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

April 14, 2015
Tweet

Transcript

  1. Innovation and the Power of the Web THE WEB AHEAD

    thewebahead.net JEN SIMMONS @jensimmons UX Immersion Mobile 2015
  2. from Books: A Living History, by Martyn Lyons

  3. None
  4. from Books: A Living History, by Martyn Lyons

  5. None
  6. from Books: A Living History, by Martyn Lyons

  7. from Books: A Living History, by Martyn Lyons

  8. from Books: A Living History, by Martyn Lyons

  9. Print Photography Audio Recording Film Radio Television

  10. None
  11. None
  12. None
  13. Because radio required a voice-over to describe what listeners couldn’t

    see, early television drama often featured a voice over, describing what viewers could. It’s a simple but striking example of what happens when a new medium develops out of an existing one. — John Allsopp, A Dao of Web Design
  14. None
  15. None
  16. Print Photography Audio Recording Film Radio Television Internet

  17. Television Internet The Internet The Web Network-Connected Apps Other Internet

    Stuff
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. Technologies

  27. None
  28. None
  29. None
  30. Connections

  31. None
  32. None
  33. URL HTTP HTML

  34. None
  35. URL

  36. http request

  37. HTML file

  38. another http request

  39. image or css file or javascript or something else

  40. None
  41. None
  42. None
  43. None
  44. None
  45. Web Socket

  46. None
  47. None
  48. Opera Chrome Firefox Safari

  49. Content can automatically  & instantaneously update itself.

  50. One person can  use your website while using 

    two devices  at the same time.
  51. None
  52. None
  53. None
  54. MeTV I pity you fool. jibbajabba said Car chases are

    interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said MeTV 0:00 / 4:59 MeTV MeTV
  55. MeTV I pity you fool. jibbajabba said Car chases are

    interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said MeTV
  56. MeTV I pity you fool. jibbajabba said Car chases are

    interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said I pity you fool. jibbajabba said Car chases are interesting, but spelling is more importanter Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that can’t spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute. dwight said
  57. One person can  use your website while using 

    two devices  at the same time.
  58. Multiple people  can communicate  with each other 

    while on the  same web page.
  59. None
  60. None
  61. Demo: http://hackview.sdslabs.co.in Source: http://github.com/sdslabs/hackview

  62. None
  63. Multiuser Sketchpad ricardocabello.com/blog/post/701

  64. 1 2 3 1 2 3 1 2 3

  65. softwareas.com/video-sync-with-websocket-and-node

  66. gist.github.com/mahemoff/443933

  67. Web Socket

  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. Web RTC Peer Connection

  75. ORTC

  76. None
  77. Meerkat Periscope

  78. None
  79. Cameras and Microphones

  80. None
  81. Web RTC Media Stream

  82. .getUserMedia()

  83. None
  84. Alex Komoroske http://www.youtube.com/watch?v=PNzmXDa1JLA

  85. None
  86. Web RTC handles echo cancellation noise reduction automatic gain control

    network jitter management
  87. None
  88. None
  89. None
  90. None
  91. None
  92. http://shinydemos.com/getusermedia/

  93. None
  94. None
  95. Web Speech API

  96. None
  97. None
  98. Web Storage

  99. None
  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. None
  112. None
  113. None
  114. Local storage Session storage Index DB

  115. None
  116. Layout Design and The Web

  117. MAGAZINES

  118. None
  119. None
  120. None
  121. None
  122. None
  123. The most dangerous phrase in the language is ‘We’ve always

    done it this way.’ 
 — Grace Hopper
  124. None
  125. None
  126. None
  127. None
  128. None
  129. None
  130. The most prominent result from the new eyetracking studies is

    not actually new.  We simply confirmed for the umpteenth time that banner blindness is real.  —Jakob Nielsen, August 20, 2007, Banner Blindness: Old and New Findings
  131. None
  132. None
  133. None
  134. None
  135. None
  136. None
  137. None
  138. None
  139. None
  140. None
  141. CSS Shapes

  142. <h1>Jeremy Keith</h1> <img src=“jeremykeith.jpg"> <p>Jeremy Keith lives in Brighton, England

    where he makes websites with the splendid design agency Clearleft.</p>
  143. img { float: left; margin-right: 2em; margin-bottom: 0.5em; }

  144. img { float: left; margin-right: 2em; margin-bottom: 0.5em; shape-outside: circle();

    }
  145. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

    Shapes level 1 March 20, 2014 w3.org/TR/css-shapes
  146. None
  147. Vote for CSS Shapes! https://bugzilla.mozilla.org/ show_bug.cgi?id=1040714 https://wpdev.uservoice.com/forums/257854-internet- explorer-platform/suggestions/6263716-shapes

  148. Progressive Enhancement

  149. None
  150. None
  151. shape-outside: circle(); shape-outside: ellipse(); shape-outside: border-box; shape-outside: inset(0px round
 120px)

    border-box; shape-outside: url(http://
 example.com/image.jpg); shape-margin: 30px;
  152. labs.thewebahead.net

  153. github.com/jensimmons/thelayoutsahead

  154. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px;

    shape-outside: ellipse(50% 50%); }
  155. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px;

    border-radius: 100px; }
  156. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px;

    border-radius: 100px; shape-outside:border-box; shape-margin: 30px; }
  157. None
  158. img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px;

    shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  159. None
  160. None
  161. None
  162. None
  163. Shapes Level 1 — NOW! shape-outside: foo(); Shapes Level 2

    — Later shape-inside: foo();
  164. None
  165. None
  166. None
  167. Exclusions, 
 Multicolumn, Rotation, 
 Flexbox, Grid, 
 Fragments, Regions,

    
 Viewport Units
  168. A C B A C B A C B A

    C B
  169. None
  170. The Medium

  171. None
  172. None
  173. None
  174. None
  175. None
  176. The Computer Chronicles “Hypercard Mania!” 1987

  177. THE WEB AHEAD thewebahead.net JEN SIMMONS @jensimmons Thank you!

  178. Douglas Engelbart “The Mother of All Demos” Dec 1968