Excessive Enhancement - devup12

Description

We all love to see exciting and innovative "interface shizzle" driven by JavaScript and the ever increasing rendering capabilities of modern browsers, but are we getting these at the expense of the Web? This talk will explore the good, the bad, and the fugly of rich interfaces, while examining how and why we should take care not to damage the Web.

Given at Devup 2012 http://devup.ideateca.com/html5/en/

#devup12

Also see:
Thoughts on the event at http://techblog.rga.com/html5-and-gaming-devup-barcelona
The video of this presentation: http://www.youtube.com/watch?v=9LeCnwGWlhw

Transcript

1. Excessive Enhancement
   Phil Hawksworth
   @philhawksworth
   

   View Slide

2. Sex Enhancements
   Phil Hawksworth
   @philhawksworth
   Excessive Enhancement
   

   View Slide

3. Sex Enhancements
   Phil Hawksworth
   @philhawksworth
   Excessive Enhancement
   

   View Slide

4. javascript nerd
   @philhawksworth #devup12
   

   View Slide

5. f/e nerd
   @philhawksworth #sxexcess
   

   View Slide

6. front-end focus
   bleeding edge effects
   browser performance
   browser shizzle
   @philhawksworth #devup12
   

   View Slide

7. @philhawksworth #devup12
   

   View Slide

8. node.js
   bringing javascript to the server
   @philhawksworth #devup12
   @philhawksworth #devup12
   

   View Slide

9. @philhawksworth #devup12
   q=simon+willison+full+frontal
   &flesh_tones=false
   

   View Slide

10. f/e + b/e
    @philhawksworth #devup12
    

    View Slide

11. browser shizzle
    can do animation
    can do 3D effects
    can do dynamic data visualisations
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

12. caution
    @philhawksworth #devup12
    @philhawksworth #devup12
    

    View Slide

13. ...so preoccupied
    with whether they
    could that they
    didn't stop to think
    if they should
    - Dr. Ian Malcolm
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

14. eaten by dinosaurs
    (possibly while on the toilet)
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

15. @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    ...it’s a unix system!
    - Lex Murphy
    

    View Slide

16. captain killjoy
    running with scissors
    chewing with mouth open
    ...but this stuff is important
    @philhawksworth #devup12
    

    View Slide

17. are we going too far
    with javascript to
    enhance our sites?
    @philhawksworth #devup12
    

    View Slide

18. the web is
    agreement
    an uber-doodle about the web
    by @psd
    @philhawksworth #devup12
    @philhawksworth #devup12
    

    View Slide

19. @philhawksworth #devup12
    

    View Slide

20. @philhawksworth #devup12
    

    View Slide

21. @philhawksworth #devup12
    

    View Slide

22. the uri is the thing
    another uber-doodle about the web
    by @psd
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

23. @philhawksworth #devup12
    

    View Slide

24. @philhawksworth #devup12
    

    View Slide

25. @philhawksworth #devup12
    

    View Slide

26. @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

27. agreement
    the contract of the URI
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

28. not a lecture on
    @philhawksworth #devup12
    REST
    

    View Slide

29. representation of content
    ask, and ye shall receive
    GET http://some.stuff
    @philhawksworth #devup12
    

    View Slide

30. cautionary tale
    the mistakes we have made before
    @philhawksworth #devup12
    

    View Slide

31. the seductive power
    of the possible
    @philhawksworth #devup12
    

    View Slide

32. html5
    whatever that is
    @philhawksworth #devup12
    

    View Slide

33. flash
    mistakes made with
    @philhawksworth #devup12
    

    View Slide

34. anti-flash mob!
    you’re a member of the
    @philhawksworth #devup12
    “
    ”
    

    View Slide

35. copyright Chris Kennett
    @philhawksworth #devup12
    

    View Slide

36. common criticisms
    @philhawksworth #devup12
    

    View Slide

37. frozen content
    copy / paste
    bookmark-able
    accessible
    searchable
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

38. flash *can*
    do it
    @philhawksworth #devup12
    

    View Slide

39. "show me"
    @philhawksworth #devup12
    

    View Slide

40. pixels > the web
    @philhawksworth #devup12
    

    View Slide

41. what is valued by
    the developers?
    @philhawksworth #devup12
    

    View Slide

42. how did they
    get here?
    photoshop
    adobe suite
    flash
    @philhawksworth #devup12
    

    View Slide

43. care more about
    the sex appeal
    ...than the fundamentals of the web
    @philhawksworth #devup12
    

    View Slide

44. the seductive power
    of the possible
    @philhawksworth #devup12
    

    View Slide

45. richer user experiences
    @philhawksworth #excessiveenhancement
    increased
    sophistication
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

46. @philhawksworth #devup12
    

    View Slide

47. 1996
    @philhawksworth #excessiveenhancement
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

48. @philhawksworth #excessiveenhancement
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

49. @philhawksworth #devup12
    

    View Slide

50. @philhawksworth #devup12
    

    View Slide

51. @philhawksworth #devup12
    

    View Slide

52. @philhawksworth #devup12
    

    View Slide

53. 2011
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

54. http://beetle.de
    a rich user experience
    open Web technologies
    ...and why I think it sucks
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

55. @philhawksworth #excessiveenhancement
    ~13 seconds
    operator instructions
    @philhawksworth #devup12
    

    View Slide

56. 11mb images
    251 http requests
    missing cache expiration
    @philhawksworth #devup12
    

    View Slide

57. 15mb images
    316 http requests
    missing cache expiration
    @philhawksworth #devup12
    

    View Slide

58. @philhawksworth #devup12
    

    View Slide

59. 4mb images
    314 http requests
    @philhawksworth #devup12
    

    View Slide

60. @philhawksworth #devup12
    

    View Slide

61. ...so preoccupied
    with whether they
    could that they
    didn't stop to think
    if they should
    - Dr. Ian Malcolm
    @philhawksworth #excessiveenhancement
    that is really
    rather a lot of
    http requests for
    a web site about
    a car.
    - Dr. Ian Malcolm
    @philhawksworth #devup12
    

    View Slide

62. eaten by dinosaurs
    (possibly while on the toilet)
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

63. /reduced
    but...
    it will work on an iPhone
    http://beetle.de /full
    @philhawksworth #devup12
    

    View Slide

64. who cares about
    iPhones?
    @philhawksworth #devup12
    

    View Slide

65. who cares about
    iPads?
    @philhawksworth #devup12
    

    View Slide

66. @philhawksworth #devup12
    

    View Slide

67. target the real audience
    @philhawksworth #devup12
    

    View Slide

68. @philhawksworth #excessiveenhancement
    “why don’t the
    fucking wheels
    fucking move?!!”
    @bruised_blood
    hijacking the links
    @philhawksworth #devup12
    

    View Slide

69. pixels the web
    >
    @philhawksworth #devup12
    

    View Slide

70. without
    javascript?
    @philhawksworth #devup12
    

    View Slide

71. @philhawksworth #devup12
    

    View Slide

72. @philhawksworth #devup12
    

    View Slide

73. what is the address
    of that content?
    @philhawksworth #devup12
    

    View Slide

74. URIs are what make
    the Web a web
    @philhawksworth #devup12
    

    View Slide

75. forgotten how
    the web works
    @philhawksworth #devup12
    

    View Slide

76. being seduced
    @philhawksworth #devup12
    by the possible
    

    View Slide

77. effective campaign?
    @philhawksworth #devup12
    longevity?
    all the users?
    good or great?
    

    View Slide

78. why u no shizzle?
    @philhawksworth #devup12
    

    View Slide

79. curl http://some.stuff
    @philhawksworth #devup12
    

    View Slide

80. @philhawksworth #devup12
    

    View Slide

81. twitter.com is not a web site
    (except of course it is)
    @philhawksworth #devup12
    

    View Slide

82. @philhawksworth #devup12
    

    View Slide

83. twitter is a platform
    everything uses the API
    @philhawksworth #devup12
    

    View Slide

84. "twitter web client"
    @philhawksworth #devup12
    

    View Slide

85. without
    javascript?
    @philhawksworth #devup12
    

    View Slide

86. @philhawksworth #devup12
    

    View Slide

87. 7531638785
    @philhawksworth #devup12
    twitter.com
    twitter.com
    

    View Slide

88. 7531638785
    @philhawksworth #devup12
    twitter.com
    

    View Slide

89. @philhawksworth #devup12
    twitter.com /#!/jaffathecake/status/173574727531638785
    twitter.com
    

    View Slide

90. but nobody has
    javascript disabled
    missing the point
    @philhawksworth #devup12
    

    View Slide

91. what about
    the contract of the URI?
    @philhawksworth #devup12
    

    View Slide

92. not known at this address
    @philhawksworth #devup12
    

    View Slide

93. @philhawksworth #devup12
    

    View Slide

94. http://twitter.com/#!/aroundheresomewhere
    @philhawksworth #devup12
    

    View Slide

95. http://twitter.com/#!/aroundheresomewhere
    @philhawksworth #devup12
    

    View Slide

96. http://twitter.com/aroundheresomewhere
    @philhawksworth #devup12
    

    View Slide

97. the damage is done
    @philhawksworth #devup12
    

    View Slide

98. linkrot
    @philhawksworth #devup12
    

    View Slide

99. #!
    shbang
    @philhawksworth #excessiveenhancement
    @philhawksworth #devup12
    

    View Slide

100. #!
     why use
     (?)!
     @philhawksworth #devup12
     ?
     

     View Slide

101. # window.location.hash
     @philhawksworth #devup12
     

     View Slide

102. client-side routing
     client-side processing
     @philhawksworth #devup12
     

     View Slide

103. enable history
     navigation
     @philhawksworth #devup12
     

     View Slide

104. apaque
     to the google bot
     @philhawksworth #devup12
     

     View Slide

105. google ajax crawling
     #!
     http://code.google.com/web/ajaxcrawling
     @philhawksworth #devup12
     

     View Slide

106. interface shizzle doesn't
     have to break the uri
     @philhawksworth #devup12
     

     View Slide

107. @philhawksworth #devup12
     

     View Slide

108. @philhawksworth #devup12
     

     View Slide

109. @philhawksworth #devup12
     

     View Slide

110. html5
     history api
     @philhawksworth #devup12
     

     View Slide

111. @philhawksworth #devup12
     

     View Slide

112. @philhawksworth #devup12
     

     View Slide

113. client-side routing
     client-side processing
     @philhawksworth #devup12
     

     View Slide

114. fashionable
     single page apps
     @philhawksworth #devup12
     

     View Slide

115. helper libraries
     levi routes
     http://github.com/PaulKinlan/leviroutes
     @philhawksworth #devup12
     

     View Slide

116. 2k javascript library
     unobtrusive
     progressive enhancement
     @philhawksworth #devup12
     

     View Slide

117. demos &
     developer tools
     @philhawksworth #devup12
     

     View Slide

118. @philhawksworth #devup12
     

     View Slide

119. @philhawksworth #devup12
     

     View Slide

120. just a demo
     the biggest danger is
     when that demo
     mentality leaks into
     production websites
     @brucel
     @philhawksworth #devup12
     

     View Slide

121. developer tools
     @philhawksworth #devup12
     libraries and utilities
     

     View Slide

122. developer tools
     @philhawksworth #devup12
     

     View Slide

123. beware of magic
     @philhawksworth #devup12
     

     View Slide

124. we've been here before
     "it looks like you're making
     a snazzy web site..."
     would you like
     me to bollocks it
     up for you?
     @philhawksworth #excessiveenhancement
     @philhawksworth #devup12
     

     View Slide

125. remember
     @philhawksworth #devup12
     take care of the uri
     consider all of your users
     value the pixels and the Web
     enhance gracefully
     dinosaur theme parks often end badly
     

     View Slide

126. experiment & explore
     but take care of the web
     @philhawksworth #devup12
     

     View Slide

127. http://www.flickr.com/photos/shelbob/67089485
     http://www.flickr.com/photos/psd/1805709102/
     http://www.flickr.com/photos/psd/421186578/
     http://crikeyboy.blogspot.com/2009/05/illustration-friday-
     hierarchy.html
     http://www.flickr.com/photos/57742619@N04/5959324249
     http://stephenwaller.tumblr.com/
     http://www.flickr.com/photos/e-coli/3888542890
     http://www.flickr.com/photos/theredproject/2831350088
     http://www.flickr.com/photos/dcjohn/8474890
     http://thewebisagreement.com/
     http://en.wikipedia.org/wiki/Robustness_principle
     @philhawksworth #excessiveenhancement
     thanks & links
     http://code.google.com/web/ajaxcrawling
     http://github.com/blog/760-the-tree-slider
     http://www.w3.org/TR/html5/history.html
     http://www.whatwg.org/specs/web-apps/current-
     work/#event-popstate
     https://developer.mozilla.org/en/DOM/
     window.onpopstate
     http://github.com/PaulKinlan/leviroutes
     http://christianheilmann.com/2011/08/15/getting-
     rusty-we-need-new-best-practices-for-a-different-
     development-world/
     http://www.w3.org/QA/2011/05/hash_uris.html
     @philhawksworth
     

     View Slide

128. @philhawksworth #excessiveenhancement
     thanks!
     @philhawksworth
     http://goo.gl/qLOsY
     

     View Slide