Betting on the Web to Win

The Web's open nature has fostered ways of working which accelerate learning and innovation to an amazing rate. How do we keep up? How do we protect this asset for the future and can it compete with the fashionable application marketplace?

This talk will explore these themes and attempt to answer those questions by looking at case studies, examples and concepts from past and present.

Transcript

1. BETTING ON THE WEB TO WIN 7 7 # AWWWARDS CONFERENCE, BARCELONA, 2015
2. PHILHAWKSWORTH @ QUESTIONS ENCOURAGEMENT ARGUMENTS COMMENTS TAPAS RECOMMENDATIONS
3. BETTING ON THE WEB TO WIN 7 7 # AWWWARDS CONFERENCE, BARCELONA, 2015
4. @philhawksworth PLEASE, PLEASE SHUT UP ABOUT THE WEB 7 7
5. @philhawksworth NOPE PLEASE, PLEASE SHUT UP ABOUT THE WEB 7 7
6. @philhawksworth IN THE BEGINNING
7. @philhawksworth TIM
8. @philhawksworth IDEA
9. @philhawksworth IDEA
10. @philhawksworth VAGUE, BUT EXCITING
11. @philhawksworth SERVER
12. @philhawksworth SITE
13. @philhawksworth PAGE
14. @philhawksworth PAGE
15. @philhawksworth HTML
16. @philhawksworth LINKS
17. @philhawksworth MORE PAGES
18. @philhawksworth MORE LINKS
19. @philhawksworth MORE SITES
20. @philhawksworth MORE SERVERS
21. @philhawksworth IMAGES
22. @philhawksworth BLINKING TEXT
23. @philhawksworth MARQUES
24. @philhawksworth GEOCITIES
25. ANIMATED GIFS @philhawksworth
26. @philhawksworth GEOCITIES
27. @philhawksworth GEOCITIES
28. ANIMATED GIFS @philhawksworth
29. @philhawksworth SOUND
30. @philhawksworth VIDEO
31. @philhawksworth ANIMATION
32. @philhawksworth REAL TIME
33. @philhawksworth APPLICATIONS
34. @philhawksworth CLOUD
35. @philhawksworth (INTERNET ) INTERNET
36. @philhawksworth INTERNET OF THINGS
37. @philhawksworth (INTERNET ) INTERNET
38. @philhawksworth OFFLINE
39. @philhawksworth EVERYWHERE
40. @philhawksworth THE LINK
41. @philhawksworth HYPERTEXT LINKS
42. @philhawksworth HYPERTEXT LINKS W I
43. @philhawksworth HYPERTEXT LINKS W I WHY DO ?
44. @philhawksworth WHAT ARE HYPERTEXT LINKS? 7 7
45. – Ted Nelson HYPERTEXT 7 7
46. – Ted Nelson HYPERMEDIA 7 7
47. – Ted Nelson TRANSCLUSION 7 7
48. – Ted Nelson INTERTWINGULARITY 7 7
49. – Ted Nelson TELEDILDONICS 7 7
50. @philhawksworth TELEDILDONICS
51. @philhawksworth CYBERDILDONICS
52. @philhawksworth BLUEDILDONICS
53. @philhawksworth LUEDILDONICS there's an app for that?
54. @philhawksworth TRANSCLUSION INTERTWINGULARITY TELEDILDONICS Words I must find an excuse to use today Words I must find an excuse to use today TRANSCLUSION INTERTWINGULARITY TELEDILDONICS
55. – Ted Nelson HYPERTEXT 7 7
56. @philhawksworth YOU NEVER FORGET YOUR FIRST LINK 7 7
57. @philhawksworth YOU NEVER FORGET YOUR FIRST HOTLINK 7 7
58. @philhawksworth MY FIRST HOTLINK 7 7
59. @philhawksworth <img src="http://not-my.com/not-my-image.jpeg">
60. @philhawksworth MY FIRST HOTLINK 7 7
61. @philhawksworth MY FIRST HOTLINK 7 7
62. @philhawksworth SHARING & COLLABORATION 7 7
63. @philhawksworth YOU CAN LINK TO ANYTHING FROM ANYWHERE 7 7
64. @philhawksworth MINDBOGGLING MAGIC 7 7
65. @philhawksworth MINDBOGGLING POWER 7 7
66. @philhawksworth LINKING CREATES 7 7 CONTEXT
67. @philhawksworth THE ANATOMY OF A HYPERTEXT LINK 7 7
68. AITCH TEE TEE PEE DOUBLE MEH – Alex Sexton 7 7
69. AITCH TEE TEE PEE DOUBLE MEH – Alex Sexton 7 7
70. http foobar.co http foobar.co :// @philhawksworth
71. http foobar.co :// @philhawksworth
72. AITCH TEE TEE PEE DOUBLE MEH – Alex Sexton 7 protocol domain top level domain path fragment querystring double meh
73. @philhawksworth THE ANATOMY OF A HYPERTEXT LINK 7 7
74. @philhawksworth THE ANATOMY OF A URL 7 7
75. @philhawksworth GIMME THE LINK – Actual real living people 7 7
76. @philhawksworth THE ANATOMY OF A HYPERTEXT LINK 7 7
77. @philhawksworth <a>
78. @philhawksworth <a> clickety click </a>
79. @philhawksworth <a href="#someplace"> ! clickety click </a>
80. @philhawksworth <a href="/someplace"> ! clickety click </a>
81. @philhawksworth <a href="http://someplace"> ! clickety click </a>
82. @philhawksworth <a href="http://someplace" ! rel="author"> ! clickety click </a>
83. @philhawksworth <a href="http://someplace" ! rel="next"> ! clickety click </a>
84. @philhawksworth <a href="http://someplace" ! rel="prefetch"> ! clickety click </a>
85. @philhawksworth clickety click
86. LYCOS.CO.UK CIRCA 1999/2000
87. @philhawksworth WE NEED TO TALK ABOUT 7 7 FASHION
88. @philhawksworth WE NEED TO TALK ABOUT 7 7 FASHION @philhawksworth
89. @philhawksworth WE NEED TO TALK ABOUT 7 7 TRENDS @philhawksworth
90. THE DESIGN WORLD HAS BECOME FLAT & THE WEB AS AN EXPERIENCE HAS PLATEAUED 7 7 http://www.thedrum.com/opinion/2015/01/23/daljit-singh-design-world-has-become-flat-and-web-experience-has-plateaued – Daljit Singh
91. @philhawksworth MY ARGUMENT HERE IS THAT WHILST TECH AND ITS CO-WORKER UX HAVE BEEN PROMOTED, 7 7 DESIGN HAS BEEN DEMOTED TO MIDDLE MANAGEMENT. – Daljit Singh
92. @philhawksworth BOLLOCKS 7 7 – Phil Hawksworth, Awwwards Conference, 2015
93. @philhawksworth BOLLOCKS 7 7 – Phil Hawksworth, Awwwards Conference, 2015 ...
94. @philhawksworth THERE IS A CASE AND PLACE FOR SIMPLE: I DON’T WANT MY LOCAL GOVERNMENT WEBSITE TO ENTERTAIN ME. 7 7 – Daljit Singh
95. @philhawksworth BUT ALL WEB TEMPLATES SEEM TO HAVE COME INLINE TO LOOK IDENTICAL 7 7 YOU’VE SEEN THOSE PARALLAX DESIGNS WITH THEIR DIVIDED, ENDLESS SCROLLING PAGES – Daljit Singh
96. @philhawksworth PARALLAX 7 7
100. @philhawksworth https://twitter.com/idiot/status/558258044069756929 Empire State Building New York Jim Mao Building Shanghai Sears Tower Chicago Petronas Towers Huala Lumpur Tapei 101 Taipei The size and lag of your parallax page
102. PLEASE DON'T TAKE MY FLASH AWAY FROM ME! 7 7 – My buddy, Steve
105. @philhawksworth ~ VIEW SOURCE
106. @philhawksworth
107. @philhawksworth DEVELOP A SINGLE UNDERLYING SYSTEM THAT ALLOWS FOR A UNIFIED EXPERIENCE ACROSS PLATFORMS AND DEVICE SIZES 7 7
108. @philhawksworth APE APP 7 7
110. ESTABLISHING STANDARDS 7 7
111. WEB STANDARDS 7 7
112. WEB STANDARDS 7 7
113. @philhawksworth STANDARDS & CONVENTIONS 7 7 TRENDS versus
114. FLASH DESIGN TRENDS 7 7 TINY PIXEL FONTS SOUND EFFECTS ON HOVER FIXED 800x600 LAYOUTS POST APOCALYPTIC FAKE UI FLICKERING FIXED 1024x768 LAYOUTS BESPOKE WINDOW MANAGERS CRAZY OPTICAL LOOP CIRCULAR NAVIGATION THINGAMIBOBS http://www.smashingmagazine.com/2007/10/30/65-excellent-flash-designs/
115. DESIGN TRENDS / CODE TRENDS
116. @philhawksworth MUCH MORE 7 7 NOW IMPORTANT
117. @philhawksworth STICKING TO OUR GUNS 7 7
118. @philhawksworth RESISTING THE MAN 7 7
119. @philhawksworth GOOGLE YEAR IN SEARCH 7 7
122. “WE NEED TO CONSIDER PERFORMANCE A DESIGN FEATURE, NOT JUST A TECHNICAL CONCERN.” – Yesenia Perez-Cruz 7 7
124. @philhawksworth KNOW YOUR AUDIENCE 7 7 @philhawksworth
125. @philhawksworth EMPATHY 7 7
126. @philhawksworth THE FOUNDATION OF CREATING BETTER WORK EMPATHY 7 7 – Meagan Fisher
127. @philhawksworth A COMMUNITY THAT SHARES 7 7
128. @philhawksworth ~ VIEW SOURCE
129. @philhawksworth MY FIRST HOTLINK 7 7
130. @philhawksworth <img src="http://not-my.com/not-my-image.jpeg">
131. @philhawksworth SHOWING YOUR WORKING
136. WEB FUNDAMENTALS
137. @philhawksworth 43 R/GA London Proprietary & Confidential Web Essentials MAR 2014 High level sitemap
138. @philhawksworth
139. @philhawksworth TRANSCLUSION INTERTWINGULARITY TELEDILDONICS Words I must find an excuse to use today Words I must find an excuse to use today TRANSCLUSION INTERTWINGULARITY TELEDILDONICS ✔
140. @philhawksworth RISING WATER LEVEL 7 7
141. @philhawksworth WHAT IS THE COMPETITION? 7 7
142. @philhawksworth
143. @philhawksworth “Welcome to Taco Bell! Give me your phone, and we’ll be happy to take your order when I’m done looking through it!” 7 7 @Wilto https://twitter.com/wilto/status/527165005792555008
144. @philhawksworth ONLYINTHEAPP 7 7 #
145. @philhawksworth
146. @philhawksworth TRANSCLUSION INTERTWINGULARITY TELEDILDONICS Words I must find an excuse to use today Words I must find an excuse to use today TRANSCLUSION INTERTWINGULARITY TELEDILDONICS ✔ ✔
147. APP GAPS SCOTT JENSON APPS DON'T SCALE – Scott Jenson
148. @philhawksworth @philhawksworth
149. BURDEN OF DEVELOPMENT
150. @philhawksworth THERE IS AN APP GAP 7 7
151. CAPABILITIES RACE
152. @philhawksworth WE NEED TO TALK ABOUT 7 7 PROGRESSIVE ENHANCEMENT
153. @philhawksworth THIS IS FOR EVERYONE 7 7 – Dan Williams https://twitter.com/iamdanw/status/525241312342462464 WITH JAVASCRIPT ENABLED
154. <noscript> <script> alert("enable javascript") </script> </noscript> – @julianscarlett #WhatIBlewMyA11yBudgetOn https://twitter.com/julianscarlett/status/568479113062821891
155. @philhawksworth NOT ABOUT WORKING WITHOUT JAVASCRIPT 7 7
156. @philhawksworth BE CONSERVATIVE IN WHAT YOU DO, BE LIBERAL IN WHAT YOU ACCEPT 7 7 – Jon Postel http://en.wikipedia.org/wiki/Robustness_principle
157. @philhawksworth WHAT ARE WE ENHANCING? 7 7
158. @philhawksworth KNOWING FIRST THAT WE KNOW NOTHING 7 7 JAVASCRIPT VIEWPORT NETWORK LOCATION LOCAL STORAGE BANDWIDTH PIXEL DENSITY INPUT DEVICE
159. @PHILHAWKSWORTH OMFG DEVICES
160. @philhawksworth DON'T DISMISS DEVICES JUST BECAUSE YOU DON'T USE THEM 7 7 – Anna Debenham
161. @philhawksworth KNOW YOUR AUDIENCE 7 7 @philhawksworth
163. @philhawksworth 7 7 ONLYINTHEAPP # THE NOTION OF COMPLETE CONTROL
164. CLOSING THE GAP @PHILHAWKSWORTH
165. TIME TO FIRST PAINT 7 7
166. GRACEFULLY OFFLINE GRACEFULLY OFFLINE 7 7
167. SERVICE WORKER
168. WHY SHOULD THE WEB WIN? 7 7
169. @philhawksworth We believe that if access to the Web increases dramatically, 7 7 there will be significant social development and greater political representation among the billions of people who currently have no voice.
170. STOCKING THE TALENT POOL 7 7
171. @philhawksworth THE WEB IS LIKE THE FUTURE, IT'S ALREADY HERE BUT NOT EVENLY DISTRIBUTED 7 7
172. @philhawksworth ENABLE & INCLUDE 7 7
173. @philhawksworth TRANSCLUSION INTERTWINGULARITY TELEDILDONICS Words I must find an excuse to use today Words I must find an excuse to use today TRANSCLUSION INTERTWINGULARITY TELEDILDONICS ✔ ✔
174. THANKS Ted Nelson Offline The Gap Man drawer Scott Jenson Harbour Borrow Paint Tea Garden Race Burros OMFG Devices Rails Dolls https://www.flickr.com/photos/matlocktest/37349112 https://www.flickr.com/photos/spiritokko/421542701 https://www.flickr.com/photos/cmbellman/8475129295/ https://www.flickr.com/photos/vandinglewop/7993315350 https://www.flickr.com/photos/29022619@N03/7980265115 https://www.flickr.com/photos/aigle_dore/6226051676 https://www.flickr.com/photos/lendingmemo/11438400085 https://www.flickr.com/photos/markchadwick/5904682572 https://www.flickr.com/photos/55038128@N00/1914881088 https://www.flickr.com/photos/anabadili/2759448841 https://www.flickr.com/photos/fotosdepepe/8389274551 http://www.flickr.com/photos/lukew/10453062745 https://www.flickr.com/photos/employtheskinnyboy/3523608412 https://www.flickr.com/photos/1-6-scale-doll-clothes/8665650124
175. LINKS http://info.cern.ch/Proposal.html http://en.wikipedia.org/wiki/Ted_Nelson http://www.thedrum.com/opinion/2015/01/23/daljit-singh-design-world-has-become-flat-and-web-experience-has-plateaued http://www.google.com/design/spec/material-design http://en.wikipedia.org/wiki/Robustness_principle http://paulrobertlloyd.com/about/styleguide /http://www.mckinsey.com/Insights/High_Tech_Telecoms_Internet/Offline_and_falling_behind_Barriers_to_Internet_adoption http://www.brucelawson.co.uk/2012/what-good-is-the-web-some-numbers/ https://developers.google.com/web/fundamentals/resources/styleguide/ https://jakearchibald.github.io/isserviceworkerready/ http://jakearchibald.com/2014/service-worker-first-draft/
176. THANKS bit.ly/webwin @PHILHAWKSWORTH 7 7