Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 full-size slide

  2. PHILHAWKSWORTH
    @
    QUESTIONS
    ENCOURAGEMENT
    ARGUMENTS
    COMMENTS
    TAPAS RECOMMENDATIONS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. @philhawksworth
    IN THE BEGINNING

    View full-size slide

  7. @philhawksworth
    TIM

    View full-size slide

  8. @philhawksworth
    IDEA

    View full-size slide

  9. @philhawksworth
    IDEA

    View full-size slide

  10. @philhawksworth
    VAGUE,
    BUT EXCITING

    View full-size slide

  11. @philhawksworth
    SERVER

    View full-size slide

  12. @philhawksworth
    SITE

    View full-size slide

  13. @philhawksworth
    PAGE

    View full-size slide

  14. @philhawksworth
    PAGE

    View full-size slide

  15. @philhawksworth
    HTML

    View full-size slide

  16. @philhawksworth
    LINKS

    View full-size slide

  17. @philhawksworth
    MORE PAGES

    View full-size slide

  18. @philhawksworth
    MORE LINKS

    View full-size slide

  19. @philhawksworth
    MORE SITES

    View full-size slide

  20. @philhawksworth
    MORE SERVERS

    View full-size slide

  21. @philhawksworth
    IMAGES

    View full-size slide

  22. @philhawksworth
    BLINKING TEXT

    View full-size slide

  23. @philhawksworth
    MARQUES

    View full-size slide

  24. @philhawksworth
    GEOCITIES

    View full-size slide

  25. ANIMATED GIFS
    @philhawksworth

    View full-size slide

  26. @philhawksworth
    GEOCITIES

    View full-size slide

  27. @philhawksworth
    GEOCITIES

    View full-size slide

  28. ANIMATED GIFS
    @philhawksworth

    View full-size slide

  29. @philhawksworth
    SOUND

    View full-size slide

  30. @philhawksworth
    VIDEO

    View full-size slide

  31. @philhawksworth
    ANIMATION

    View full-size slide

  32. @philhawksworth
    REAL TIME

    View full-size slide

  33. @philhawksworth
    APPLICATIONS

    View full-size slide

  34. @philhawksworth
    CLOUD

    View full-size slide

  35. @philhawksworth
    (INTERNET )
    INTERNET

    View full-size slide

  36. @philhawksworth
    INTERNET OF THINGS

    View full-size slide

  37. @philhawksworth
    (INTERNET )
    INTERNET

    View full-size slide

  38. @philhawksworth
    OFFLINE

    View full-size slide

  39. @philhawksworth
    EVERYWHERE

    View full-size slide

  40. @philhawksworth
    THE LINK

    View full-size slide

  41. @philhawksworth
    HYPERTEXT LINKS

    View full-size slide

  42. @philhawksworth
    HYPERTEXT LINKS
    W
    I

    View full-size slide

  43. @philhawksworth
    HYPERTEXT LINKS
    W
    I
    WHY DO ?

    View full-size slide

  44. @philhawksworth
    WHAT ARE HYPERTEXT LINKS?
    7
    7

    View full-size slide

  45. – Ted Nelson
    HYPERTEXT
    7
    7

    View full-size slide

  46. – Ted Nelson
    HYPERMEDIA
    7
    7

    View full-size slide

  47. – Ted Nelson
    TRANSCLUSION
    7
    7

    View full-size slide

  48. – Ted Nelson
    INTERTWINGULARITY
    7
    7

    View full-size slide

  49. – Ted Nelson
    TELEDILDONICS
    7
    7

    View full-size slide

  50. @philhawksworth
    TELEDILDONICS

    View full-size slide

  51. @philhawksworth
    CYBERDILDONICS

    View full-size slide

  52. @philhawksworth
    BLUEDILDONICS

    View full-size slide

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

    View full-size 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 full-size slide

  55. – Ted Nelson
    HYPERTEXT
    7
    7

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. @philhawksworth
    MY FIRST HOTLINK
    7
    7

    View full-size slide

  59. @philhawksworth

    View full-size slide

  60. @philhawksworth
    MY FIRST HOTLINK
    7
    7

    View full-size slide

  61. @philhawksworth
    MY FIRST HOTLINK
    7
    7

    View full-size slide

  62. @philhawksworth
    SHARING & COLLABORATION
    7
    7

    View full-size slide

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

    View full-size slide

  64. @philhawksworth
    MINDBOGGLING MAGIC
    7
    7

    View full-size slide

  65. @philhawksworth
    MINDBOGGLING POWER
    7
    7

    View full-size slide

  66. @philhawksworth
    LINKING CREATES
    7
    7
    CONTEXT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  71. http foobar.co
    ://
    @philhawksworth

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  74. @philhawksworth
    THE ANATOMY OF A URL
    7
    7

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  77. @philhawksworth

    View full-size slide

  78. @philhawksworth

    clickety click

    View full-size slide

  79. @philhawksworth

    ! clickety click

    View full-size slide

  80. @philhawksworth

    ! clickety click

    View full-size slide

  81. @philhawksworth

    ! clickety click

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  85. @philhawksworth
    clickety click

    View full-size slide

  86. LYCOS.CO.UK CIRCA 1999/2000

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  96. @philhawksworth
    PARALLAX
    7
    7

    View full-size slide

  97. @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 full-size slide

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

    View full-size slide

  99. @philhawksworth
    ~
    VIEW
    SOURCE

    View full-size slide

  100. @philhawksworth

    View full-size slide

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

    View full-size slide

  102. @philhawksworth
    APE
    APP
    7
    7

    View full-size slide

  103. ESTABLISHING
    STANDARDS
    7
    7

    View full-size slide

  104. WEB STANDARDS
    7
    7

    View full-size slide

  105. WEB STANDARDS
    7
    7

    View full-size slide

  106. @philhawksworth
    STANDARDS &
    CONVENTIONS
    7
    7
    TRENDS
    versus

    View full-size slide

  107. 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 full-size slide

  108. DESIGN TRENDS / CODE TRENDS

    View full-size slide

  109. @philhawksworth
    MUCH MORE
    7
    7
    NOW
    IMPORTANT

    View full-size slide

  110. @philhawksworth
    STICKING TO OUR GUNS
    7
    7

    View full-size slide

  111. @philhawksworth
    RESISTING THE MAN
    7
    7

    View full-size slide

  112. @philhawksworth
    GOOGLE
    YEAR IN
    SEARCH
    7
    7

    View full-size slide

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

    View full-size slide

  114. @philhawksworth
    KNOW
    YOUR
    AUDIENCE
    7
    7
    @philhawksworth

    View full-size slide

  115. @philhawksworth
    EMPATHY
    7
    7

    View full-size slide

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

    View full-size slide

  117. @philhawksworth
    A COMMUNITY THAT SHARES
    7
    7

    View full-size slide

  118. @philhawksworth
    ~
    VIEW
    SOURCE

    View full-size slide

  119. @philhawksworth
    MY FIRST HOTLINK
    7
    7

    View full-size slide

  120. @philhawksworth

    View full-size slide

  121. @philhawksworth
    SHOWING
    YOUR
    WORKING

    View full-size slide

  122. WEB
    FUNDAMENTALS

    View full-size slide

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

    View full-size slide

  124. @philhawksworth

    View full-size slide

  125. @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 full-size slide

  126. @philhawksworth
    RISING
    WATER LEVEL
    7
    7

    View full-size slide

  127. @philhawksworth
    WHAT IS THE COMPETITION?
    7
    7

    View full-size slide

  128. @philhawksworth

    View full-size slide

  129. @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 full-size slide

  130. @philhawksworth
    ONLYINTHEAPP
    7
    7
    #

    View full-size slide

  131. @philhawksworth

    View full-size slide

  132. @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 full-size slide

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

    View full-size slide

  134. @philhawksworth
    @philhawksworth

    View full-size slide

  135. BURDEN OF
    DEVELOPMENT

    View full-size slide

  136. @philhawksworth
    THERE IS
    AN APP GAP
    7
    7

    View full-size slide

  137. CAPABILITIES RACE

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  140. <br/>alert("enable javascript")<br/>

    – @julianscarlett
    #WhatIBlewMyA11yBudgetOn
    https://twitter.com/julianscarlett/status/568479113062821891

    View full-size slide

  141. @philhawksworth
    NOT ABOUT WORKING
    WITHOUT JAVASCRIPT
    7
    7

    View full-size slide

  142. @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 full-size slide

  143. @philhawksworth
    WHAT ARE WE
    ENHANCING?
    7
    7

    View full-size slide

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

    View full-size slide

  145. @PHILHAWKSWORTH
    OMFG
    DEVICES

    View full-size slide

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

    View full-size slide

  147. @philhawksworth
    KNOW
    YOUR
    AUDIENCE
    7
    7
    @philhawksworth

    View full-size slide

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

    View full-size slide

  149. CLOSING
    THE
    GAP
    @PHILHAWKSWORTH

    View full-size slide

  150. TIME TO FIRST PAINT
    7
    7

    View full-size slide

  151. GRACEFULLY
    OFFLINE
    GRACEFULLY OFFLINE
    7
    7

    View full-size slide

  152. SERVICE WORKER

    View full-size slide

  153. WHY SHOULD
    THE WEB WIN?
    7
    7

    View full-size slide

  154. @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 full-size slide

  155. STOCKING THE
    TALENT POOL
    7
    7

    View full-size slide

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

    View full-size slide

  157. @philhawksworth
    ENABLE & INCLUDE
    7
    7

    View full-size slide

  158. @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 full-size slide

  159. 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 full-size slide

  160. 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 full-size slide

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

    View full-size slide