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
2. ~ EXCESSIVE ENHANCEMENT SEX ENHANCEMENTS # @PHILHAWKSWORTH JSDAY
3. CONTEXT JSDAY # @PHILHAWKSWORTH
4. # @PHILHAWKSWORTH JSDAY JSDAY # Marc - SVG Luca - data viz
5. CAN DO # @PHILHAWKSWORTH ANIMATION 3D EFFECTS DATA VISUALISATION JSDAY
6. BROWSER SHIZZLE # @PHILHAWKSWORTH JSDAY
7. CAUTION # @PHILHAWKSWORTH JSDAY
8. DESIGN RESPONSIBLE & DEVELOPMENT # @PHILHAWKSWORTH JSDAY
9. JSDAY # @PHILHAWKSWORTH - DR IAN MALCOM ...SO PREOCCUPIED WITH WHETHER THEY COULD THAT THEY DIDN'T STOP TO THINK IF THEY SHOULD
10. JSDAY # @PHILHAWKSWORTH IT’S A UNIX SYSTEM - LEX MURPHY
11. I THE WEB # @PHILHAWKSWORTH JSDAY
12. INSPIRATION # @PHILHAWKSWORTH JSDAY
13. @PHILHAWKSWORTH is THE WEB AGREEMENT #JSDAY
14. @PHILHAWKSWORTH #JSDAY
19. @PHILHAWKSWORTH ~ THE URI IS THE THING #JSDAY
20. @PHILHAWKSWORTH #JSDAY
22. AGREEMENT @PHILHAWKSWORTH #JSDAY THE CONTRACT OF THE URI
23. NOT A LECTURE ON REST @PHILHAWKSWORTH #JSDAY
24. GET http://some.stuff @PHILHAWKSWORTH #JSDAY REPRESENTATION OF CONTENT
25. THE SEDUCTIVE POWER OF THE POSSIBLE @PHILHAWKSWORTH #JSDAY
26. HTML5 @PHILHAWKSWORTH #JSDAY WHATEVER THAT IS
27. FLASH @PHILHAWKSWORTH #JSDAY MISTAKES MADE WITH
28. @PHILHAWKSWORTH #JSDAY YOU’RE A MEMBER OF THE ANTI FLASH MOB
29. @PHILHAWKSWORTH #JSDAY FROZEN CONTENT COPY/PASTE BOOKMARK-ABLE ACCESSIBLE SEARCHABLE
30. @PHILHAWKSWORTH #JSDAY FLASH CAN DO IT
31. SHOW ME #JSDAY @PHILHAWKSWORTH
32. @PHILHAWKSWORTH #JSDAY PIXELS THE WEB > >
33. CAUTIONARY TALE # @PHILHAWKSWORTH JSDAY OUR OLD MISTAKES
34. EVOLUTION @PHILHAWKSWORTH #JSDAY
35. SOPHISTICATION @PHILHAWKSWORTH #JSDAY
36. 1996 @PHILHAWKSWORTH #JSDAY
37. MCDONALDS.COM @PHILHAWKSWORTH #JSDAY
38. MCDONALDS.COM @PHILHAWKSWORTH #JSDAY
39. PEPSI.COM @PHILHAWKSWORTH #JSDAY
40. LEGO.COM @PHILHAWKSWORTH #JSDAY
41. @PHILHAWKSWORTH #JSDAY 1,427 KB AVERAGE PAGE WEIGHT
42. @PHILHAWKSWORTH #JSDAY 500ms DELAY 20% TRAFFIC REDUCTION http://www.codinghorror.com/blog/2006/11/speed-still-matters.html
43. BEETLE.DE @PHILHAWKSWORTH #JSDAY A RICH USER EXPERIENCE WEB TECHNOLOGIES ...AND WHY I THINK IT SUCKS
44. BEETLE.COM JSDAY # @PHILHAWKSWORTH @PHILHAWKSWORTH #JSDAY 13 sec
45. BEETLE.COM JSDAY # @PHILHAWKSWORTH @PHILHAWKSWORTH #JSDAY
46. @PHILHAWKSWORTH #JSDAY 11MB 251 HTTP REQUESTS NO CACHE EXPIRATION
47. @PHILHAWKSWORTH #JSDAY 15MB 316 HTTP REQUESTS NO CACHE EXPIRATION
48. LINGSCARS.COM JSDAY # @PHILHAWKSWORTH @PHILHAWKSWORTH #JSDAY
49. @PHILHAWKSWORTH #JSDAY 4MB 314 HTTP REQUESTS NO CACHE EXPIRATION
50. GROLSCH.COM @PHILHAWKSWORTH #JSDAY
51. MCDONALDS.CO.UK @PHILHAWKSWORTH #JSDAY
52. 38.28 MB 405 HTTP REQUESTS 1.1 MINUTE ONLOAD @PHILHAWKSWORTH #JSDAY
53. JSDAY # @PHILHAWKSWORTH - DR IAN MALCOM ...SO PREOCCUPIED WITH WHETHER THEY COULD THAT THEY DIDN'T STOP TO THINK IF THEY SHOULD
54. JSDAY # @PHILHAWKSWORTH - DR IAN MALCOM (PROBABLY) THAT REALLY IS AN AWFUL LOT OF HTTP REQUESTS FOR A WEBSITE ABOUT A CHICKEN WRAP
55. @PHILHAWKSWORTH #JSDAY
56. MILWAUKEE POLICENEWS.COM @PHILHAWKSWORTH #JSDAY
57. @PHILHAWKSWORTH #JSDAY
59. EXAMPLE LEARN by @PHILHAWKSWORTH #JSDAY
60. @PHILHAWKSWORTH #JSDAY THIS IS NOTHING
61. @PHILHAWKSWORTH #JSDAY MOTO.OAKLEY.COM
62. MOTO.OAKLEY.COM #JSDAY @PHILHAWKSWORTH
63. @PHILHAWKSWORTH #JSDAY 85.4MB PAGE WEIGHT 471 HTTP REQUESTS 2 MIN 45 SEC UNTIL CONTENT 4 MIN 10 SEC ONLOAD EVENT
64. @PHILHAWKSWORTH #JSDAY $22 TO DOWNLOAD ON VERIZON’S SMALLEST PLAN
65. @PHILHAWKSWORTH #JSDAY BACK TO BEETLE.DE
66. @PHILHAWKSWORTH #JSDAY WITHOUT JAVASCRIPT?
67. BEETLE.COM JSDAY # @PHILHAWKSWORTH @PHILHAWKSWORTH #JSDAY
68. BEETLE.COM #JSDAY @PHILHAWKSWORTH
69. BUT NOBODY HAS JAVASCRIPT DISABLED #JSDAY @PHILHAWKSWORTH EVERY CLIENT, EVER
70. #JSDAY @PHILHAWKSWORTH WHAT ABOUT THE CONTRACT OF THE URI?
71. of the WHAT IS THE ADDRESS CONTENT? # @PHILHAWKSWORTH JSDAY
72. made of THE WEB IS LINKS # @PHILHAWKSWORTH JSDAY
73. BEING SEDUCED BY THE POSSIBLE @PHILHAWKSWORTH #JSDAY
74. #JSDAY @PHILHAWKSWORTH BEETLE.COM
75. WHY DON’T THE F***ING WHEELS F***ING MOVE?! @PHILHAWKSWORTH #JSDAY
76. @PHILHAWKSWORTH #JSDAY PIXELS THE WEB > >
77. @PHILHAWKSWORTH #JSDAY PIXELS THE WEB > >
78. @philhawksworth #fullfrontalconf WHY U NO SHIZZLE? @PHILHAWKSWORTH #JSDAY
79. #JSDAY @PHILHAWKSWORTH
80. ~ VIEW SOURCE #JSDAY @PHILHAWKSWORTH
81. is CRAFT CODE JSDAY # @PHILHAWKSWORTH
82. CURL http://some.stuff @PHILHAWKSWORTH #JSDAY
83. @PHILHAWKSWORTH #JSDAY URL
84. URL DESIGN CRAFT @PHILHAWKSWORTH #JSDAY
85. MAKE URL DESIGN A PRIORITY @PHILHAWKSWORTH #JSDAY
86. @philhawksworth #fullfrontalconf
87. TWITTER IS NOT A WEB SITE #JSDAY @PHILHAWKSWORTH
89. TWITTER IS A PLATFORM, EVERYTHING USES THE API #JSDAY @PHILHAWKSWORTH
90. TWITTER WEB CLIENT #JSDAY @PHILHAWKSWORTH
91. WITHOUT JAVASCRIPT? #JSDAY @PHILHAWKSWORTH
93. NOT ANY MORE!
94. @PHILHAWKSWORTH #JSDAY URL
95. #! WHY USE @PHILHAWKSWORTH #JSDAY
96. #! ? WHY USE @PHILHAWKSWORTH #JSDAY
97. #! (?)! WHY USE @PHILHAWKSWORTH #JSDAY
98. window.location.hash @PHILHAWKSWORTH #JSDAY #
99. @PHILHAWKSWORTH #JSDAY CLIENT-SIDE ROUTING PROCESSING
100. ENABLE HISTORY NAVIGATION @PHILHAWKSWORTH #JSDAY
101. @PHILHAWKSWORTH #JSDAY GOOGLE AJAX CRAWLING http://code.google.com/web/
102. @PHILHAWKSWORTH does’t have to break INTERFACE SHIZZLE THE URL #JSDAY
103. @PHILHAWKSWORTH #JSDAY
109. FUTURE FRIENDLY @PHILHAWKSWORTH #JSDAY
110. & DEMOS # @PHILHAWKSWORTH JSDAY DEV TOOLS
111. BETA.THEEXPRESSIVEWEB.COM
112. JUST A DEMO # @PHILHAWKSWORTH JSDAY
113. THE BIGGEST DANGER IS WHEN THAT DEMO MENTALITY LEAKS INTO PRODUCTION WEBSITES @PHILHAWKSWORTH #JSDAY @BRUCEL
114. EXAMPLE LEARN by # @PHILHAWKSWORTH JSDAY
115. @PHILHAWKSWORTH #JSDAY
116. # @PHILHAWKSWORTH JSDAY
117. IT’S TIME TO REPLACE THOSE MM_SwapImage FUNCTIONS # @PHILHAWKSWORTH JSDAY
118. TO FINISH # @PHILHAWKSWORTH JSDAY
119. DESIGN RESPONSIBLE & DEVELOPMENT # @PHILHAWKSWORTH JSDAY
120. your PROTECT CRAFT # @PHILHAWKSWORTH JSDAY
121. USE THE NEW TOOLS WITH CARE # @PHILHAWKSWORTH JSDAY
122. FIGHT FOR THE CHANCE TO DO GOOD ON THE WEB # @PHILHAWKSWORTH JSDAY
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