Betting on the Web to Win

Transcript

1. BETTING ON
   THE WEB TO WIN
   7
   7
   #
   AWWWARDS CONFERENCE, BARCELONA, 2015
   

   View Slide

2. PHILHAWKSWORTH
   @
   QUESTIONS
   ENCOURAGEMENT
   ARGUMENTS
   COMMENTS
   TAPAS RECOMMENDATIONS
   

   View Slide

3. BETTING ON
   THE WEB TO WIN
   7
   7
   #
   AWWWARDS CONFERENCE, BARCELONA, 2015
   

   View Slide

4. @philhawksworth
   PLEASE, PLEASE SHUT UP
   ABOUT THE WEB
   7
   7
   

   View Slide

5. @philhawksworth
   NOPE
   PLEASE, PLEASE SHUT UP ABOUT THE WEB
   7
   7
   

   View Slide

6. @philhawksworth
   IN THE BEGINNING
   

   View Slide

7. @philhawksworth
   TIM
   

   View Slide

8. @philhawksworth
   IDEA
   

   View Slide

9. @philhawksworth
   IDEA
   

   View Slide

10. @philhawksworth
    VAGUE,
    BUT EXCITING
    

    View Slide

11. @philhawksworth
    SERVER
    

    View Slide

12. @philhawksworth
    SITE
    

    View Slide

13. @philhawksworth
    PAGE
    

    View Slide

14. @philhawksworth
    PAGE
    

    View Slide

15. @philhawksworth
    HTML
    

    View Slide

16. @philhawksworth
    LINKS
    

    View Slide

17. @philhawksworth
    MORE PAGES
    

    View Slide

18. @philhawksworth
    MORE LINKS
    

    View Slide

19. @philhawksworth
    MORE SITES
    

    View Slide

20. @philhawksworth
    MORE SERVERS
    

    View Slide

21. @philhawksworth
    IMAGES
    

    View Slide

22. @philhawksworth
    BLINKING TEXT
    

    View Slide

23. @philhawksworth
    MARQUES
    

    View Slide

24. @philhawksworth
    GEOCITIES
    

    View Slide

25. ANIMATED GIFS
    @philhawksworth
    

    View Slide

26. @philhawksworth
    GEOCITIES
    

    View Slide

27. @philhawksworth
    GEOCITIES
    

    View Slide

28. ANIMATED GIFS
    @philhawksworth
    

    View Slide

29. @philhawksworth
    SOUND
    

    View Slide

30. @philhawksworth
    VIDEO
    

    View Slide

31. @philhawksworth
    ANIMATION
    

    View Slide

32. @philhawksworth
    REAL TIME
    

    View Slide

33. @philhawksworth
    APPLICATIONS
    

    View Slide

34. @philhawksworth
    CLOUD
    

    View Slide

35. @philhawksworth
    (INTERNET )
    INTERNET
    

    View Slide

36. @philhawksworth
    INTERNET OF THINGS
    

    View Slide

37. @philhawksworth
    (INTERNET )
    INTERNET
    

    View Slide

38. @philhawksworth
    OFFLINE
    

    View Slide

39. @philhawksworth
    EVERYWHERE
    

    View Slide

40. @philhawksworth
    THE LINK
    

    View Slide

41. @philhawksworth
    HYPERTEXT LINKS
    

    View Slide

42. @philhawksworth
    HYPERTEXT LINKS
    W
    I
    

    View Slide

43. @philhawksworth
    HYPERTEXT LINKS
    W
    I
    WHY DO ?
    

    View Slide

44. @philhawksworth
    WHAT ARE HYPERTEXT LINKS?
    7
    7
    

    View Slide

45. – Ted Nelson
    HYPERTEXT
    7
    7
    

    View Slide

46. – Ted Nelson
    HYPERMEDIA
    7
    7
    

    View Slide

47. – Ted Nelson
    TRANSCLUSION
    7
    7
    

    View Slide

48. – Ted Nelson
    INTERTWINGULARITY
    7
    7
    

    View Slide

49. – Ted Nelson
    TELEDILDONICS
    7
    7
    

    View Slide

50. @philhawksworth
    TELEDILDONICS
    

    View Slide

51. @philhawksworth
    CYBERDILDONICS
    

    View Slide

52. @philhawksworth
    BLUEDILDONICS
    

    View Slide

53. @philhawksworth
    LUEDILDONICS
    there's an app for that?
    

    View Slide

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
    

    View Slide

55. – Ted Nelson
    HYPERTEXT
    7
    7
    

    View Slide

56. @philhawksworth
    YOU NEVER FORGET YOUR FIRST LINK
    7
    7
    

    View Slide

57. @philhawksworth
    YOU NEVER FORGET YOUR FIRST HOTLINK
    7
    7
    

    View Slide

58. @philhawksworth
    MY FIRST HOTLINK
    7
    7
    

    View Slide

59. @philhawksworth
    
    

    View Slide

60. @philhawksworth
    MY FIRST HOTLINK
    7
    7
    

    View Slide

61. @philhawksworth
    MY FIRST HOTLINK
    7
    7
    

    View Slide

62. @philhawksworth
    SHARING & COLLABORATION
    7
    7
    

    View Slide

63. @philhawksworth
    YOU CAN LINK TO
    ANYTHING FROM ANYWHERE
    7
    7
    

    View Slide

64. @philhawksworth
    MINDBOGGLING MAGIC
    7
    7
    

    View Slide

65. @philhawksworth
    MINDBOGGLING POWER
    7
    7
    

    View Slide

66. @philhawksworth
    LINKING CREATES
    7
    7
    CONTEXT
    

    View Slide

67. @philhawksworth
    THE ANATOMY OF A HYPERTEXT LINK
    7
    7
    

    View Slide

68. AITCH TEE TEE PEE
    DOUBLE MEH
    – Alex Sexton
    7
    7
    

    View Slide

69. AITCH TEE TEE PEE
    DOUBLE MEH
    – Alex Sexton
    7
    7
    

    View Slide

70. http foobar.co
    http foobar.co
    ://
    @philhawksworth
    

    View Slide

71. http foobar.co
    ://
    @philhawksworth
    

    View Slide

72. AITCH TEE TEE PEE
    DOUBLE MEH
    – Alex Sexton
    7
    protocol
    domain
    top level domain
    path
    fragment
    querystring
    double meh
    

    View Slide

73. @philhawksworth
    THE ANATOMY OF A HYPERTEXT LINK
    7
    7
    

    View Slide

74. @philhawksworth
    THE ANATOMY OF A URL
    7
    7
    

    View Slide

75. @philhawksworth
    GIMME THE LINK
    – Actual real living people
    7
    7
    

    View Slide

76. @philhawksworth
    THE ANATOMY OF A HYPERTEXT LINK
    7
    7
    

    View Slide

77. @philhawksworth
    
    

    View Slide

78. @philhawksworth
    
    clickety click
    
    

    View Slide

79. @philhawksworth
    
    ! clickety click
    
    

    View Slide

80. @philhawksworth
    
    ! clickety click
    
    

    View Slide

81. @philhawksworth
    
    ! clickety click
    
    

    View Slide

82. @philhawksworth
    ! rel="author">
    ! clickety click
    
    

    View Slide

83. @philhawksworth
    ! rel="next">
    ! clickety click
    
    

    View Slide

84. @philhawksworth
    ! rel="prefetch">
    ! clickety click
    
    

    View Slide

85. @philhawksworth
    clickety click
    

    View Slide

86. LYCOS.CO.UK CIRCA 1999/2000
    

    View Slide

87. @philhawksworth
    WE NEED TO TALK ABOUT
    7
    7
    FASHION
    

    View Slide

88. @philhawksworth
    WE NEED TO TALK ABOUT
    7
    7
    FASHION
    @philhawksworth
    

    View Slide

89. @philhawksworth
    WE NEED TO TALK ABOUT
    7
    7
    TRENDS
    @philhawksworth
    

    View Slide

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
    

    View Slide

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
    

    View Slide

92. @philhawksworth
    BOLLOCKS
    7
    7
    – Phil Hawksworth, Awwwards Conference, 2015
    

    View Slide

93. @philhawksworth
    BOLLOCKS
    7
    7
    – Phil Hawksworth, Awwwards Conference, 2015
    ...
    

    View Slide

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
    

    View Slide

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
    

    View Slide

96. @philhawksworth
    PARALLAX
    7
    7
    

    View Slide

97. View Slide

98. View Slide

99. View Slide

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
     

     View Slide

101. View Slide

102. PLEASE DON'T
     TAKE MY FLASH
     AWAY FROM ME!
     7
     7
     – My buddy, Steve
     

     View Slide

103. View Slide

104. View Slide

105. @philhawksworth
     ~
     VIEW
     SOURCE
     

     View Slide

106. @philhawksworth
     

     View Slide

107. @philhawksworth
     DEVELOP A SINGLE UNDERLYING SYSTEM
     THAT ALLOWS FOR A UNIFIED EXPERIENCE
     ACROSS PLATFORMS AND DEVICE SIZES
     7
     7
     

     View Slide

108. @philhawksworth
     APE
     APP
     7
     7
     

     View Slide

109. View Slide

110. ESTABLISHING
     STANDARDS
     7
     7
     

     View Slide

111. WEB STANDARDS
     7
     7
     

     View Slide

112. WEB STANDARDS
     7
     7
     

     View Slide

113. @philhawksworth
     STANDARDS &
     CONVENTIONS
     7
     7
     TRENDS
     versus
     

     View Slide

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/
     

     View Slide

115. DESIGN TRENDS / CODE TRENDS
     

     View Slide

116. @philhawksworth
     MUCH MORE
     7
     7
     NOW
     IMPORTANT
     

     View Slide

117. @philhawksworth
     STICKING TO OUR GUNS
     7
     7
     

     View Slide

118. @philhawksworth
     RESISTING THE MAN
     7
     7
     

     View Slide

119. @philhawksworth
     GOOGLE
     YEAR IN
     SEARCH
     7
     7
     

     View Slide

120. View Slide

121. View Slide

122. “WE NEED TO CONSIDER PERFORMANCE
     A DESIGN FEATURE, NOT JUST A
     TECHNICAL CONCERN.”
     – Yesenia Perez-Cruz
     7
     7
     

     View Slide

123. View Slide

124. @philhawksworth
     KNOW
     YOUR
     AUDIENCE
     7
     7
     @philhawksworth
     

     View Slide

125. @philhawksworth
     EMPATHY
     7
     7
     

     View Slide

126. @philhawksworth
     THE FOUNDATION OF
     CREATING BETTER WORK
     EMPATHY
     7
     7
     – Meagan Fisher
     

     View Slide

127. @philhawksworth
     A COMMUNITY THAT SHARES
     7
     7
     

     View Slide

128. @philhawksworth
     ~
     VIEW
     SOURCE
     

     View Slide

129. @philhawksworth
     MY FIRST HOTLINK
     7
     7
     

     View Slide

130. @philhawksworth
     
     

     View Slide

131. @philhawksworth
     SHOWING
     YOUR
     WORKING
     

     View Slide

132. View Slide

133. View Slide

134. View Slide

135. View Slide

136. WEB
     FUNDAMENTALS
     

     View Slide

137. @philhawksworth
     43
     R/GA London
     Proprietary & Confidential
     Web Essentials
     MAR 2014
     High level sitemap
     

     View Slide

138. @philhawksworth
     

     View Slide

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
     ✔
     

     View Slide

140. @philhawksworth
     RISING
     WATER LEVEL
     7
     7
     

     View Slide

141. @philhawksworth
     WHAT IS THE COMPETITION?
     7
     7
     

     View Slide

142. @philhawksworth
     

     View Slide

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
     

     View Slide

144. @philhawksworth
     ONLYINTHEAPP
     7
     7
     #
     

     View Slide

145. @philhawksworth
     

     View Slide

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
     ✔
     ✔
     

     View Slide

147. APP GAPS
     SCOTT JENSON
     APPS DON'T
     SCALE
     – Scott Jenson
     

     View Slide

148. @philhawksworth
     @philhawksworth
     

     View Slide

149. BURDEN OF
     DEVELOPMENT
     

     View Slide

150. @philhawksworth
     THERE IS
     AN APP GAP
     7
     7
     

     View Slide

151. CAPABILITIES RACE
     

     View Slide

152. @philhawksworth
     WE NEED TO TALK ABOUT
     7
     7
     PROGRESSIVE
     ENHANCEMENT
     

     View Slide

153. @philhawksworth
     THIS IS FOR EVERYONE
     7
     7
     – Dan Williams
     https://twitter.com/iamdanw/status/525241312342462464
     WITH JAVASCRIPT ENABLED
     

     View Slide

154. 
     <br/>alert("enable javascript")<br/>
     
     – @julianscarlett
     #WhatIBlewMyA11yBudgetOn
     https://twitter.com/julianscarlett/status/568479113062821891
     

     View Slide

155. @philhawksworth
     NOT ABOUT WORKING
     WITHOUT JAVASCRIPT
     7
     7
     

     View Slide

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
     

     View Slide

157. @philhawksworth
     WHAT ARE WE
     ENHANCING?
     7
     7
     

     View Slide

158. @philhawksworth
     KNOWING FIRST THAT WE KNOW NOTHING
     7
     7
     JAVASCRIPT VIEWPORT NETWORK
     LOCATION
     LOCAL STORAGE
     BANDWIDTH
     PIXEL DENSITY
     INPUT DEVICE
     

     View Slide

159. @PHILHAWKSWORTH
     OMFG
     DEVICES
     

     View Slide

160. @philhawksworth
     DON'T DISMISS DEVICES JUST
     BECAUSE YOU DON'T USE THEM
     7
     7
     – Anna Debenham
     

     View Slide

161. @philhawksworth
     KNOW
     YOUR
     AUDIENCE
     7
     7
     @philhawksworth
     

     View Slide

162. View Slide

163. @philhawksworth
     7
     7
     ONLYINTHEAPP
     #
     THE NOTION OF
     COMPLETE CONTROL
     

     View Slide

164. CLOSING
     THE
     GAP
     @PHILHAWKSWORTH
     

     View Slide

165. TIME TO FIRST PAINT
     7
     7
     

     View Slide

166. GRACEFULLY
     OFFLINE
     GRACEFULLY OFFLINE
     7
     7
     

     View Slide

167. SERVICE WORKER
     

     View Slide

168. WHY SHOULD
     THE WEB WIN?
     7
     7
     

     View Slide

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.
     

     View Slide

170. STOCKING THE
     TALENT POOL
     7
     7
     

     View Slide

171. @philhawksworth
     THE WEB IS LIKE THE FUTURE,
     IT'S ALREADY HERE
     BUT NOT EVENLY DISTRIBUTED
     7
     7
     

     View Slide

172. @philhawksworth
     ENABLE & INCLUDE
     7
     7
     

     View Slide

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
     ✔
     ✔
     

     View Slide

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
     

     View Slide

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/
     

     View Slide

176. THANKS
     bit.ly/webwin
     @PHILHAWKSWORTH
     7
     7
     

     View Slide