Excessive Enhancement - SXSW2012

Excessive Enhancement - SXSW2012

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 SxSW 2012

#sxexcess

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

March 11, 2012
Tweet

Transcript

  1. Excessive Enhancement Phil Hawksworth @philhawksworth

  2. Sex Enhancements Phil Hawksworth @philhawksworth Excessive Enhancement

  3. Sex Enhancements Phil Hawksworth @philhawksworth Excessive Enhancement

  4. #sxexcess

  5. #sxexcess

  6. #excess

  7. #sxexcess

  8. @philhawksworth #sxexcess

  9. javascript nerd @philhawksworth #sxexcess

  10. @philhawksworth #sxexcess

  11. f/e nerd @philhawksworth #sxexcess

  12. @philhawksworth #sxexcess

  13. front-end focus @philhawksworth #sxexcess

  14. front-end focus bleeding edge effects @philhawksworth #sxexcess

  15. front-end focus bleeding edge effects browser performance @philhawksworth #sxexcess

  16. front-end focus bleeding edge effects browser performance browser shizzle @philhawksworth

    #sxexcess
  17. @philhawksworth #sxexcess

  18. @philhawksworth #sxexcess

  19. @philhawksworth #sxexcess @philhawksworth #sxexcess

  20. node.js @philhawksworth #sxexcess @philhawksworth #sxexcess

  21. node.js bringing javascript to the server @philhawksworth #sxexcess @philhawksworth #sxexcess

  22. @philhawksworth #sxexcess

  23. @philhawksworth #sxexcess q=simon+willison+full+frontal

  24. @philhawksworth #sxexcess q=simon+willison+full+frontal &flesh_tones=false

  25. @philhawksworth #sxexcess

  26. f/e + b/e @philhawksworth #sxexcess

  27. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  28. browser shizzle @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  29. browser shizzle can do animation @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  30. browser shizzle can do animation can do 3D effects @philhawksworth

    #excessiveenhancement @philhawksworth #sxexcess
  31. browser shizzle can do animation can do 3D effects can

    do dynamic data visualisations @philhawksworth #excessiveenhancement @philhawksworth #sxexcess
  32. @philhawksworth #sxexcess @philhawksworth #sxexcess

  33. caution @philhawksworth #sxexcess @philhawksworth #sxexcess

  34. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  35. ...so preoccupied with whether they could that they didn't stop

    to think if they should - Dr. Ian Malcolm @philhawksworth #excessiveenhancement @philhawksworth #sxexcess
  36. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

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

    @philhawksworth #sxexcess
  38. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess ...it’s a unix system! - Lex

    Murphy
  39. @philhawksworth #sxexcess

  40. captain killjoy @philhawksworth #sxexcess

  41. captain killjoy running with scissors @philhawksworth #sxexcess

  42. captain killjoy running with scissors chewing with mouth open @philhawksworth

    #sxexcess
  43. captain killjoy running with scissors chewing with mouth open ...but

    this stuff is important @philhawksworth #sxexcess
  44. @philhawksworth #sxexcess

  45. are we going too far with javascript to enhance our

    sites? @philhawksworth #sxexcess
  46. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  47. why > how @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  48. @philhawksworth #sxexcess @philhawksworth #sxexcess

  49. the web is agreement an uber-doodle about the web by

    @psd @philhawksworth #sxexcess @philhawksworth #sxexcess
  50. @philhawksworth #sxexcess

  51. @philhawksworth #sxexcess

  52. @philhawksworth #sxexcess

  53. @philhawksworth #sxexcess

  54. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  55. the uri is the thing another uber-doodle about the web

    by @psd @philhawksworth #excessiveenhancement @philhawksworth #sxexcess
  56. @philhawksworth #sxexcess

  57. @philhawksworth #sxexcess

  58. @philhawksworth #sxexcess

  59. @philhawksworth #sxexcess

  60. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  61. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  62. agreement @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  63. agreement the contract of the URI @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  64. @philhawksworth #sxexcess

  65. not a lecture on @philhawksworth #sxexcess REST

  66. @philhawksworth #sxexcess

  67. GET http://some.stuff @philhawksworth #sxexcess

  68. representation of content GET http://some.stuff @philhawksworth #sxexcess

  69. representation of content ask, and ye shall receive GET http://some.stuff

    @philhawksworth #sxexcess
  70. @philhawksworth #sxexcess

  71. cautionary tale @philhawksworth #sxexcess

  72. cautionary tale the mistakes we have made before @philhawksworth #sxexcess

  73. @philhawksworth #sxexcess

  74. the seductive power of the possible @philhawksworth #sxexcess

  75. @philhawksworth #sxexcess

  76. html5 @philhawksworth #sxexcess

  77. html5 whatever that is @philhawksworth #sxexcess

  78. @philhawksworth #sxexcess

  79. flash mistakes made with @philhawksworth #sxexcess

  80. @philhawksworth #sxexcess

  81. anti-flash mob! you’re a member of the @philhawksworth #sxexcess “

  82. @philhawksworth #sxexcess

  83. copyright Chris Kennett @philhawksworth #sxexcess

  84. common criticisms @philhawksworth #sxexcess

  85. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  86. frozen content @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  87. frozen content copy / paste @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  88. frozen content copy / paste bookmark-able @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  89. frozen content copy / paste bookmark-able accessible @philhawksworth #excessiveenhancement @philhawksworth

    #sxexcess
  90. frozen content copy / paste bookmark-able accessible searchable @philhawksworth #excessiveenhancement

    @philhawksworth #sxexcess
  91. flash *can* do it @philhawksworth #sxexcess

  92. "show me" @philhawksworth #sxexcess

  93. @philhawksworth #sxexcess

  94. pixels > the web @philhawksworth #sxexcess

  95. @philhawksworth #sxexcess

  96. what is valued by the developers? @philhawksworth #sxexcess

  97. @philhawksworth #sxexcess

  98. how did they get here? @philhawksworth #sxexcess

  99. how did they get here? photoshop @philhawksworth #sxexcess

  100. how did they get here? photoshop adobe suite @philhawksworth #sxexcess

  101. how did they get here? photoshop adobe suite flash @philhawksworth

    #sxexcess
  102. @philhawksworth #sxexcess

  103. care more about the sex appeal ...than the fundamentals of

    the web @philhawksworth #sxexcess
  104. @philhawksworth #sxexcess

  105. the seductive power of the possible @philhawksworth #sxexcess

  106. @philhawksworth #excessiveenhancement @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  107. @philhawksworth #excessiveenhancement increased sophistication @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  108. richer user experiences @philhawksworth #excessiveenhancement increased sophistication @philhawksworth #excessiveenhancement @philhawksworth

    #sxexcess
  109. @philhawksworth #sxexcess

  110. @philhawksworth #excessiveenhancement @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  111. 1996 @philhawksworth #excessiveenhancement @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  112. @philhawksworth #excessiveenhancement @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  113. @philhawksworth #sxexcess

  114. @philhawksworth #sxexcess

  115. @philhawksworth #sxexcess

  116. @philhawksworth #sxexcess

  117. @philhawksworth #sxexcess

  118. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  119. 2011 @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  120. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  121. http://beetle.de @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  122. http://beetle.de a rich user experience @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  123. http://beetle.de a rich user experience open Web technologies @philhawksworth #excessiveenhancement

    @philhawksworth #sxexcess
  124. http://beetle.de a rich user experience open Web technologies ...and why

    I think it sucks @philhawksworth #excessiveenhancement @philhawksworth #sxexcess
  125. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  126. @philhawksworth #excessiveenhancement ~13 seconds @philhawksworth #sxexcess

  127. @philhawksworth #excessiveenhancement ~13 seconds operator instructions @philhawksworth #sxexcess

  128. @philhawksworth #sxexcess

  129. 11mb images @philhawksworth #sxexcess

  130. 11mb images 251 http requests @philhawksworth #sxexcess

  131. 11mb images 251 http requests missing cache expiration @philhawksworth #sxexcess

  132. 15mb images 316 http requests missing cache expiration @philhawksworth #sxexcess

  133. 15mb images 316 http requests missing cache expiration @philhawksworth #sxexcess

  134. @philhawksworth #sxexcess

  135. @philhawksworth #sxexcess

  136. 4mb images @philhawksworth #sxexcess

  137. 4mb images 314 http requests @philhawksworth #sxexcess

  138. @philhawksworth #sxexcess

  139. ...so preoccupied with whether they could that they didn't stop

    to think if they should - Dr. Ian Malcolm @philhawksworth #excessiveenhancement @philhawksworth #sxexcess
  140. @philhawksworth #excessiveenhancement that is really rather a lot of http

    requests for a web site about a car. - Dr. Ian Malcolm @philhawksworth #sxexcess
  141. eaten by dinosaurs (possibly while on the toilet) @philhawksworth #excessiveenhancement

    @philhawksworth #sxexcess
  142. @philhawksworth #sxexcess

  143. but... it will work on an iPhone @philhawksworth #sxexcess

  144. but... it will work on an iPhone http://beetle.de @philhawksworth #sxexcess

  145. but... it will work on an iPhone http://beetle.de /full @philhawksworth

    #sxexcess
  146. /reduced but... it will work on an iPhone http://beetle.de @philhawksworth

    #sxexcess
  147. @philhawksworth #sxexcess

  148. who cares about iPhones? @philhawksworth #sxexcess

  149. @philhawksworth #sxexcess

  150. who cares about iPads? @philhawksworth #sxexcess

  151. @philhawksworth #sxexcess

  152. @philhawksworth #sxexcess

  153. target the real audience @philhawksworth #sxexcess

  154. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  155. @philhawksworth #excessiveenhancement hijacking the links @philhawksworth #sxexcess

  156. @philhawksworth #excessiveenhancement “why don’t the f*cking wheels f*cking move?!!” @bruised_blood

    @philhawksworth #sxexcess
  157. @philhawksworth #sxexcess

  158. pixels the web > @philhawksworth #sxexcess

  159. pixels the web > @philhawksworth #sxexcess

  160. without javascript? @philhawksworth #sxexcess

  161. @philhawksworth #sxexcess

  162. @philhawksworth #sxexcess

  163. @philhawksworth #sxexcess

  164. what is the address of that content? @philhawksworth #sxexcess

  165. URIs are what make the Web a web @philhawksworth #sxexcess

  166. @philhawksworth #sxexcess

  167. forgotten how the web works @philhawksworth #sxexcess

  168. @philhawksworth #sxexcess

  169. being seduced @philhawksworth #sxexcess by the possible

  170. @philhawksworth #sxexcess

  171. effective campaign? @philhawksworth #sxexcess

  172. effective campaign? @philhawksworth #sxexcess longevity?

  173. effective campaign? @philhawksworth #sxexcess longevity? all the users?

  174. effective campaign? @philhawksworth #sxexcess longevity? all the users? good or

    great?
  175. @philhawksworth #sxexcess

  176. why u no shizzle? @philhawksworth #sxexcess

  177. @philhawksworth #sxexcess

  178. curl http://some.stuff @philhawksworth #sxexcess

  179. @philhawksworth #sxexcess

  180. facebook.com/thing @philhawksworth #sxexcess

  181. @philhawksworth #sxexcess @philhawksworth #sxexcess

  182. @philhawksworth #sxexcess

  183. /thatthing @philhawksworth #sxexcess

  184. thatthing @philhawksworth #sxexcess

  185. thatthing @philhawksworth #sxexcess

  186. whatthing @philhawksworth #sxexcess ?

  187. @philhawksworth #sxexcess

  188. renting @philhawksworth #sxexcess buying v

  189. @philhawksworth #sxexcess

  190. @philhawksworth #sxexcess

  191. twitter.com is not a web site @philhawksworth #sxexcess

  192. twitter.com is not a web site (except of course it

    is) @philhawksworth #sxexcess
  193. @philhawksworth #sxexcess

  194. @philhawksworth #sxexcess

  195. twitter is a platform @philhawksworth #sxexcess

  196. twitter is a platform everything uses the API @philhawksworth #sxexcess

  197. @philhawksworth #sxexcess

  198. "twitter web client" @philhawksworth #sxexcess

  199. @philhawksworth #sxexcess

  200. without javascript? @philhawksworth #sxexcess

  201. @philhawksworth #sxexcess

  202. @philhawksworth #sxexcess

  203. @philhawksworth #sxexcess

  204. @philhawksworth #sxexcess twitter.com

  205. @philhawksworth #sxexcess twitter.com/#!/jaffathecake/status/173574727531638785

  206. @philhawksworth #sxexcess twitter.com/#!/jaffathecake/status/173574727531638785

  207. @philhawksworth #sxexcess

  208. but nobody has javascript disabled @philhawksworth #sxexcess

  209. but nobody has javascript disabled missing the point @philhawksworth #sxexcess

  210. @philhawksworth #sxexcess

  211. what about the contract of the URI? @philhawksworth #sxexcess

  212. @philhawksworth #sxexcess

  213. not known at this address @philhawksworth #sxexcess

  214. @philhawksworth #sxexcess

  215. http://twitter.com/#!/aroundheresomewhere @philhawksworth #sxexcess

  216. http://twitter.com/#!/aroundheresomewhere @philhawksworth #sxexcess

  217. http://twitter.com/aroundheresomewhere @philhawksworth #sxexcess

  218. @philhawksworth #sxexcess

  219. the damage is done @philhawksworth #sxexcess

  220. @philhawksworth #sxexcess

  221. linkrot @philhawksworth #sxexcess

  222. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  223. #! @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  224. #! shbang @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  225. @philhawksworth #sxexcess

  226. #! why use @philhawksworth #sxexcess

  227. #! why use @philhawksworth #sxexcess ?

  228. #! why use (?) @philhawksworth #sxexcess

  229. #! why use (?)! @philhawksworth #sxexcess

  230. @philhawksworth #sxexcess

  231. # @philhawksworth #sxexcess

  232. # window.location.hash @philhawksworth #sxexcess

  233. @philhawksworth #sxexcess

  234. client-side routing @philhawksworth #sxexcess

  235. client-side routing client-side processing @philhawksworth #sxexcess

  236. @philhawksworth #sxexcess

  237. enable history navigation @philhawksworth #sxexcess

  238. enable history navigation @philhawksworth #sxexcess

  239. enable history navigation @philhawksworth #sxexcess

  240. @philhawksworth #sxexcess

  241. apaque to the google bot @philhawksworth #sxexcess

  242. @philhawksworth #sxexcess

  243. google ajax crawling #! @philhawksworth #sxexcess

  244. google ajax crawling #! http://code.google.com/web/ajaxcrawling @philhawksworth #sxexcess

  245. @philhawksworth #sxexcess

  246. when did it get so hard to crawl the web?

    @philhawksworth #sxexcess
  247. when did it get so hard to crawl the web?

    what does it take to write a good crawler? @philhawksworth #sxexcess
  248. interface shizzle doesn't have to break the uri @philhawksworth #sxexcess

  249. @philhawksworth #sxexcess

  250. @philhawksworth #sxexcess

  251. @philhawksworth #sxexcess

  252. html5 history api @philhawksworth #sxexcess

  253. @philhawksworth #sxexcess

  254. @philhawksworth #sxexcess

  255. @philhawksworth #sxexcess

  256. @philhawksworth #sxexcess

  257. @philhawksworth #sxexcess

  258. @philhawksworth #sxexcess

  259. client-side routing client-side processing @philhawksworth #sxexcess

  260. @philhawksworth #sxexcess

  261. fashionable single page apps @philhawksworth #sxexcess

  262. @philhawksworth #sxexcess

  263. helper libraries @philhawksworth #sxexcess

  264. helper libraries levi routes @philhawksworth #sxexcess

  265. helper libraries levi routes http://github.com/PaulKinlan/leviroutes @philhawksworth #sxexcess

  266. @philhawksworth #sxexcess

  267. 2k javascript library @philhawksworth #sxexcess

  268. 2k javascript library unobtrusive @philhawksworth #sxexcess

  269. 2k javascript library unobtrusive progressive enhancement @philhawksworth #sxexcess

  270. data visualisation @philhawksworth #sxexcess

  271. @philhawksworth #sxexcess

  272. amazing libraries @philhawksworth #sxexcess

  273. amazing libraries raphael @philhawksworth #sxexcess

  274. amazing libraries raphael processing @philhawksworth #sxexcess

  275. amazing libraries raphael processing plotkit @philhawksworth #sxexcess

  276. @philhawksworth #sxexcess

  277. representing your data in javascript visualisations @philhawksworth #sxexcess

  278. representing your data in javascript visualisations ...is hiding it @philhawksworth

    #sxexcess
  279. @philhawksworth #sxexcess

  280. @philhawksworth #sxexcess $.get('/data.json', function(data){ var viz = buildAwesomeVisualization(data); $("#funky-chart").append(viz); });

    <div id="funky-chart"></div>
  281. @philhawksworth #sxexcess $.get('/data.json', function(data){ var viz = buildAwesomeVisualization(data); $("#funky-chart").append(viz); });

    <div id="funky-chart"></div>
  282. @philhawksworth #sxexcess $.get('/data.json', function(data){ var viz = buildAwesomeVisualization(data); $("#funky-chart").append(viz); });

    <div id="funky-chart"></div>
  283. @philhawksworth #sxexcess $.get('/data.json', function(data){ var viz = buildAwesomeVisualization(data); $("#funky-chart").append(viz); });

    <div id="funky-chart"></div>
  284. @philhawksworth #sxexcess $.get('/data.json', function(data){ var viz = buildAwesomeVisualization(data); $("#funky-chart").append(viz); });

    <div id="funky-chart"></div>
  285. @philhawksworth #sxexcess <div id="funky-chart"></div>

  286. @philhawksworth #sxexcess <body></body>

  287. tables an abused old friend @philhawksworth #sxexcess

  288. @philhawksworth #sxexcess <table id="data"> <tfoot> <tr> <th>1</th> <th>2</th> <th>3</th> ...

    </tr> </tfoot> <tbody> <tr> <td>8</td> <td>25</td> <td>27</td> ... </tr> </tbody> </table>
  289. progressive enhancement @philhawksworth #sxexcess

  290. @philhawksworth #sxexcess

  291. demos & developer tools @philhawksworth #sxexcess

  292. @philhawksworth #sxexcess

  293. @philhawksworth #sxexcess

  294. @philhawksworth #sxexcess

  295. just a demo @philhawksworth #sxexcess

  296. just a demo the biggest danger is when that demo

    mentality leaks into production websites @brucelawson @philhawksworth #sxexcess
  297. @philhawksworth #sxexcess

  298. developer tools @philhawksworth #sxexcess libraries and utilities

  299. @philhawksworth #sxexcess

  300. developer tools @philhawksworth #sxexcess

  301. developer tools @philhawksworth #sxexcess

  302. @philhawksworth #sxexcess

  303. beware of magic @philhawksworth #sxexcess

  304. @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  305. we've been here before @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

  306. 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 #sxexcess
  307. @philhawksworth #sxexcess

  308. remember @philhawksworth #sxexcess take care of the uri

  309. remember @philhawksworth #sxexcess take care of the uri consider all

    of your users
  310. remember @philhawksworth #sxexcess take care of the uri consider all

    of your users value the pixels and the Web
  311. remember @philhawksworth #sxexcess take care of the uri consider all

    of your users value the pixels and the Web enhance gracefully
  312. remember @philhawksworth #sxexcess take care of the uri consider all

    of your users value the pixels and the Web enhance gracefully dinosaur theme parks often end badly
  313. @philhawksworth #sxexcess

  314. experiment & explore @philhawksworth #sxexcess

  315. experiment & explore but take care of the web @philhawksworth

    #sxexcess
  316. @philhawksworth #excessiveenhancement

  317. 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
  318. @philhawksworth #excessiveenhancement

  319. @philhawksworth #excessiveenhancement thanks! @philhawksworth