Betting on the Web to Win

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.

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

February 24, 2015
Tweet

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

  97. None
  98. None
  99. None
  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
  101. None
  102. PLEASE DON'T TAKE MY FLASH AWAY FROM ME! 7 7

    – My buddy, Steve
  103. None
  104. None
  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

  109. None
  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

  120. None
  121. None
  122. “WE NEED TO CONSIDER PERFORMANCE A DESIGN FEATURE, NOT JUST

    A TECHNICAL CONCERN.” – Yesenia Perez-Cruz 7 7
  123. None
  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

  132. None
  133. None
  134. None
  135. None
  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

  162. None
  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