$30 off During Our Annual Pro Sale. View Details »

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.

Phil Hawksworth

February 24, 2015
Tweet

More Decks by Phil Hawksworth

Other Decks in Programming

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