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

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