Excessive Enhancement - JSday

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.

This talk was given at JSday in Verona - http://2013.jsday.it/

More about this talk - http://hawksworx.com/blog/talking-at-jsday-verona/

Transcript

1. EXCESSIVE
   ENHANCEMENT
   #
   @PHILHAWKSWORTH JSDAY
   

   View Slide

2. ~
   EXCESSIVE
   ENHANCEMENT
   SEX ENHANCEMENTS
   #
   @PHILHAWKSWORTH JSDAY
   

   View Slide

3. CONTEXT
   JSDAY
   #
   @PHILHAWKSWORTH
   

   View Slide

4. #
   @PHILHAWKSWORTH JSDAY
   JSDAY
   #
   Marc - SVG
   Luca - data viz
   

   View Slide

5. CAN DO
   #
   @PHILHAWKSWORTH
   ANIMATION
   3D EFFECTS
   DATA VISUALISATION
   JSDAY
   

   View Slide

6. BROWSER
   SHIZZLE
   #
   @PHILHAWKSWORTH JSDAY
   

   View Slide

7. CAUTION
   #
   @PHILHAWKSWORTH JSDAY
   

   View Slide

8. DESIGN
   RESPONSIBLE
   &
   DEVELOPMENT
   #
   @PHILHAWKSWORTH JSDAY
   

   View Slide

9. JSDAY
   #
   @PHILHAWKSWORTH
   - DR IAN MALCOM
   ...SO PREOCCUPIED WITH
   WHETHER THEY COULD THAT
   THEY DIDN'T STOP TO THINK
   IF THEY SHOULD
   

   View Slide

10. JSDAY
    #
    @PHILHAWKSWORTH
    IT’S A UNIX SYSTEM
    - LEX MURPHY
    

    View Slide

11. I THE WEB
    #
    @PHILHAWKSWORTH JSDAY
    

    View Slide

12. INSPIRATION
    #
    @PHILHAWKSWORTH JSDAY
    

    View Slide

13. @PHILHAWKSWORTH
    is
    THE WEB
    AGREEMENT
    #JSDAY
    

    View Slide

14. @PHILHAWKSWORTH #JSDAY
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. @PHILHAWKSWORTH
    ~
    THE URI
    IS THE THING
    #JSDAY
    

    View Slide

20. @PHILHAWKSWORTH #JSDAY
    

    View Slide

21. View Slide

22. AGREEMENT
    @PHILHAWKSWORTH #JSDAY
    THE CONTRACT OF THE URI
    

    View Slide

23. NOT A LECTURE ON REST
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

24. GET http://some.stuff
    @PHILHAWKSWORTH #JSDAY
    REPRESENTATION
    OF CONTENT
    

    View Slide

25. THE SEDUCTIVE
    POWER
    OF THE POSSIBLE
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

26. HTML5
    @PHILHAWKSWORTH #JSDAY
    WHATEVER THAT IS
    

    View Slide

27. FLASH
    @PHILHAWKSWORTH #JSDAY
    MISTAKES MADE WITH
    

    View Slide

28. @PHILHAWKSWORTH #JSDAY
    YOU’RE A MEMBER OF THE
    ANTI FLASH MOB
    

    View Slide

29. @PHILHAWKSWORTH #JSDAY
    FROZEN CONTENT
    COPY/PASTE
    BOOKMARK-ABLE
    ACCESSIBLE
    SEARCHABLE
    

    View Slide

30. @PHILHAWKSWORTH #JSDAY
    FLASH CAN DO IT
    

    View Slide

31. SHOW ME
    #JSDAY
    @PHILHAWKSWORTH
    

    View Slide

32. @PHILHAWKSWORTH #JSDAY
    PIXELS THE WEB
    >
    >
    

    View Slide

33. CAUTIONARY TALE
    #
    @PHILHAWKSWORTH JSDAY
    OUR OLD MISTAKES
    

    View Slide

34. EVOLUTION
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

35. SOPHISTICATION
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

36. 1996
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

37. MCDONALDS.COM
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

38. MCDONALDS.COM
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

39. PEPSI.COM
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

40. LEGO.COM
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

41. @PHILHAWKSWORTH #JSDAY
    1,427 KB
    AVERAGE PAGE WEIGHT
    

    View Slide

42. @PHILHAWKSWORTH #JSDAY
    500ms
    DELAY
    20%
    TRAFFIC REDUCTION
    http://www.codinghorror.com/blog/2006/11/speed-still-matters.html
    

    View Slide

43. BEETLE.DE
    @PHILHAWKSWORTH #JSDAY
    A RICH USER EXPERIENCE
    WEB TECHNOLOGIES
    ...AND WHY I THINK IT SUCKS
    

    View Slide

44. BEETLE.COM
    JSDAY
    #
    @PHILHAWKSWORTH
    @PHILHAWKSWORTH #JSDAY
    13 sec
    

    View Slide

45. BEETLE.COM
    JSDAY
    #
    @PHILHAWKSWORTH
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

46. @PHILHAWKSWORTH #JSDAY
    11MB
    251 HTTP REQUESTS
    NO CACHE EXPIRATION
    

    View Slide

47. @PHILHAWKSWORTH #JSDAY
    15MB
    316 HTTP REQUESTS
    NO CACHE EXPIRATION
    

    View Slide

48. LINGSCARS.COM
    JSDAY
    #
    @PHILHAWKSWORTH
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

49. @PHILHAWKSWORTH #JSDAY
    4MB
    314 HTTP REQUESTS
    NO CACHE EXPIRATION
    

    View Slide

50. GROLSCH.COM
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

51. MCDONALDS.CO.UK
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

52. 38.28 MB
    405 HTTP REQUESTS
    1.1 MINUTE ONLOAD
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

53. JSDAY
    #
    @PHILHAWKSWORTH
    - DR IAN MALCOM
    ...SO PREOCCUPIED WITH
    WHETHER THEY COULD THAT
    THEY DIDN'T STOP TO THINK
    IF THEY SHOULD
    

    View Slide

54. JSDAY
    #
    @PHILHAWKSWORTH
    - DR IAN MALCOM
    (PROBABLY)
    THAT REALLY IS AN AWFUL LOT
    OF HTTP REQUESTS
    FOR A WEBSITE ABOUT
    A CHICKEN WRAP
    

    View Slide

55. @PHILHAWKSWORTH #JSDAY
    

    View Slide

56. MILWAUKEE
    POLICENEWS.COM
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

57. @PHILHAWKSWORTH #JSDAY
    

    View Slide

58. View Slide

59. EXAMPLE
    LEARN
    by
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

60. @PHILHAWKSWORTH #JSDAY
    THIS IS NOTHING
    

    View Slide

61. @PHILHAWKSWORTH #JSDAY
    MOTO.OAKLEY.COM
    

    View Slide

62. MOTO.OAKLEY.COM
    #JSDAY
    @PHILHAWKSWORTH
    

    View Slide

63. @PHILHAWKSWORTH #JSDAY
    85.4MB PAGE WEIGHT
    471 HTTP REQUESTS
    2 MIN 45 SEC UNTIL CONTENT
    4 MIN 10 SEC ONLOAD EVENT
    

    View Slide

64. @PHILHAWKSWORTH #JSDAY
    $22
    TO DOWNLOAD ON
    VERIZON’S SMALLEST PLAN
    

    View Slide

65. @PHILHAWKSWORTH #JSDAY
    BACK TO BEETLE.DE
    

    View Slide

66. @PHILHAWKSWORTH #JSDAY
    WITHOUT JAVASCRIPT?
    

    View Slide

67. BEETLE.COM
    JSDAY
    #
    @PHILHAWKSWORTH
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

68. BEETLE.COM
    #JSDAY
    @PHILHAWKSWORTH
    

    View Slide

69. BUT NOBODY HAS
    JAVASCRIPT DISABLED
    #JSDAY
    @PHILHAWKSWORTH
    EVERY CLIENT, EVER
    

    View Slide

70. #JSDAY
    @PHILHAWKSWORTH
    WHAT ABOUT
    THE CONTRACT
    OF THE URI?
    

    View Slide

71. of the
    WHAT IS THE
    ADDRESS
    CONTENT?
    #
    @PHILHAWKSWORTH JSDAY
    

    View Slide

72. made of
    THE WEB IS
    LINKS
    #
    @PHILHAWKSWORTH JSDAY
    

    View Slide

73. BEING SEDUCED
    BY THE POSSIBLE
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

74. #JSDAY
    @PHILHAWKSWORTH
    BEETLE.COM
    

    View Slide

75. WHY DON’T THE
    F***ING WHEELS
    F***ING MOVE?!
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

76. @PHILHAWKSWORTH #JSDAY
    PIXELS THE WEB
    >
    >
    

    View Slide

77. @PHILHAWKSWORTH #JSDAY
    PIXELS THE WEB
    >
    >
    

    View Slide

78. @philhawksworth #fullfrontalconf
    WHY U NO
    SHIZZLE?
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

79. #JSDAY
    @PHILHAWKSWORTH
    

    View Slide

80. ~
    VIEW
    SOURCE
    #JSDAY
    @PHILHAWKSWORTH
    

    View Slide

81. is
    CRAFT
    CODE
    JSDAY
    #
    @PHILHAWKSWORTH
    

    View Slide

82. CURL http://some.stuff
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

83. @PHILHAWKSWORTH #JSDAY
    URL
    

    View Slide

84. URL DESIGN CRAFT
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

85. MAKE URL DESIGN
    A PRIORITY
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

86. @philhawksworth #fullfrontalconf
    

    View Slide

87. TWITTER IS NOT
    A WEB SITE
    #JSDAY
    @PHILHAWKSWORTH
    

    View Slide

88. View Slide

89. TWITTER IS A PLATFORM,
    EVERYTHING USES THE API
    #JSDAY
    @PHILHAWKSWORTH
    

    View Slide

90. TWITTER WEB CLIENT
    #JSDAY
    @PHILHAWKSWORTH
    

    View Slide

91. WITHOUT
    JAVASCRIPT?
    #JSDAY
    @PHILHAWKSWORTH
    

    View Slide

92. View Slide

93. NOT ANY MORE!
    

    View Slide

94. @PHILHAWKSWORTH #JSDAY
    URL
    

    View Slide

95. #!
    WHY USE
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

96. #! ?
    WHY USE
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

97. #! (?)!
    WHY USE
    @PHILHAWKSWORTH #JSDAY
    

    View Slide

98. window.location.hash
    @PHILHAWKSWORTH #JSDAY
    #
    

    View Slide

99. @PHILHAWKSWORTH #JSDAY
    CLIENT-SIDE ROUTING
    PROCESSING
    

    View Slide

100. ENABLE
     HISTORY
     NAVIGATION
     @PHILHAWKSWORTH #JSDAY
     

     View Slide

101. @PHILHAWKSWORTH #JSDAY
     GOOGLE AJAX CRAWLING
     http://code.google.com/web/
     

     View Slide

102. @PHILHAWKSWORTH
     does’t have to break
     INTERFACE SHIZZLE
     THE URL
     #JSDAY
     

     View Slide

103. @PHILHAWKSWORTH #JSDAY
     

     View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. FUTURE FRIENDLY
     @PHILHAWKSWORTH #JSDAY
     

     View Slide

110. &
     DEMOS
     #
     @PHILHAWKSWORTH JSDAY
     DEV TOOLS
     

     View Slide

111. BETA.THEEXPRESSIVEWEB.COM
     

     View Slide

112. JUST A DEMO
     #
     @PHILHAWKSWORTH JSDAY
     

     View Slide

113. THE BIGGEST DANGER IS WHEN
     THAT DEMO MENTALITY LEAKS
     INTO PRODUCTION WEBSITES
     @PHILHAWKSWORTH #JSDAY
     @BRUCEL
     

     View Slide

114. EXAMPLE
     LEARN
     by
     #
     @PHILHAWKSWORTH JSDAY
     

     View Slide

115. @PHILHAWKSWORTH #JSDAY
     

     View Slide

116. #
     @PHILHAWKSWORTH JSDAY
     

     View Slide

117. IT’S TIME TO REPLACE THOSE
     MM_SwapImage FUNCTIONS
     #
     @PHILHAWKSWORTH JSDAY
     

     View Slide

118. TO FINISH
     #
     @PHILHAWKSWORTH JSDAY
     

     View Slide

119. DESIGN
     RESPONSIBLE
     &
     DEVELOPMENT
     #
     @PHILHAWKSWORTH JSDAY
     

     View Slide

120. your
     PROTECT
     CRAFT
     #
     @PHILHAWKSWORTH JSDAY
     

     View Slide

121. USE THE NEW TOOLS
     WITH CARE
     #
     @PHILHAWKSWORTH JSDAY
     

     View Slide

122. FIGHT
     FOR THE CHANCE
     TO DO GOOD
     ON THE WEB
     #
     @PHILHAWKSWORTH JSDAY
     

     View Slide

123. THANKS
     LINKS
     http://stephenwaller.tumblr.com
     http://crikeyboy.blogspot.com/2009/05/illustration-friday-hierarchy.html
     http://www.flickr.com/photos/bredgur/1323025528
     http://www.flickr.com/photos/flowercat/2723867176
     http://www.flickr.com/photos/marcthiele/4048845899
     http://hawksworx.com
     https://speakerdeck.com/davatron5000/mo-pixels-mo-problems
     http://thewebisagreement.com/
     http://www.codinghorror.com/blog/2006/11/speed-still-matters.html
     http://code.google.com/web/ajaxcrawling
     http://github.com/blog/760-the-tree-slider
     http://www.w3.org/TR/html5/history.html
     

     View Slide