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

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
4. from Books: A Living History, by Martyn Lyons
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
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
16. Print Photography Audio Recording Film Radio Television Internet
17. Television Internet The Internet The Web Network-Connected Apps Other Internet Stuff
26. Technologies
30. Connections
33. URL HTTP HTML
35. URL
36. http request
37. HTML file
38. another http request
39. image or css file or javascript or something else
45. Web Socket
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.
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.
61. Demo: http://hackview.sdslabs.co.in Source: http://github.com/sdslabs/hackview
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
74. Web RTC Peer Connection
75. ORTC
77. Meerkat Periscope
79. Cameras and Microphones
81. Web RTC Media Stream
82. .getUserMedia()
84. Alex Komoroske http://www.youtube.com/watch?v=PNzmXDa1JLA
86. Web RTC handles echo cancellation noise reduction automatic gain control network jitter management
92. http://shinydemos.com/getusermedia/
95. Web Speech API
98. Web Storage
114. Local storage Session storage Index DB
116. Layout Design and The Web
117. MAGAZINES
123. The most dangerous phrase in the language is ‘We’ve always done it this way.’ 
 — Grace Hopper
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
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
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
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; }
158. img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px; shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
163. Shapes Level 1 — NOW! shape-outside: foo(); Shapes Level 2 — Later shape-inside: foo();
167. Exclusions, 
 Multicolumn, Rotation, 
 Flexbox, Grid, 
 Fragments, Regions, 
 Viewport Units
168. A C B A C B A C B A C B
170. The Medium
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