What We Don't Know

Transcript

1. WHT WE On’T NOw

2. None

3. HS OEr

4. HS OEr @cHScOEr

5. HS OEr @cHScOEr cHScOEr.E

6. HS OEr @cHScOEr cHScOEr.E pA To, c

7. HS OEr @cHScOEr cHScOEr.E pA To, c cIA 18

8. None

9. sUEyMKE.O

10. sUEyMKE.O wUO.O

11. sUEyMKE.O wUO.O cS-TrIS.O

12. sUEyMKE.O wUO.O cS-TrIS.O dIwP.O

13. sUEyMKE.O wUO.O cS-TrIS.O dIwP.O sHTaLHOw.O

14. WHT WE On’T NOw

15. None

16. OeS IgFT ESt?

17. OeS IgFT ESt?

18. 1967 “Patterson-Gimlin“ Film

19. WHT WE On’T NOw

20. WHT WE On’T NOw ... AUt E wEb.

21. aNOmY F a wB RUS*

22. aNOmY F a wB RUS* * Incredibly oversimplified

23. None

24. SeeR wEIT rEUEs

25. BrWse SeeR wEIT rEUEs

26. BrWse SeeR wEIT rEUEs De

27. BrWse SeeR wEIT rEUEs De

28. BrWse SeeR wEIT rEUEs De

29. BrWse SeeR wEIT rEUEs De

30. BrWse SeeR wEIT rEUEs De

31. BrWse SeeR wEIT rEUEs De

32. BrWse SeeR wEIT rEUEs De Thar Be Dragons

33. BrWse De

34. BrWse De 1

35. BrWse De 1 2

36. BrWse De 1 2 3

37. BrWse De 1 2 3 4

38. BrWse De 1 2 3 4

39. WE On’T NOw wH OR vIToR S UNg BrWse

40. None
41. None

42. 3.6 4 5 6 7 8 9 10 10.63 11.01

    11.10 11.50 11.51 11.52 11.60 11.63 17 6 7 8 9 3 4 5

43. iF Ll OsE RoWRS dI ThIS DFeRTL, W’d  iN

    RoUE.

44. iF Ll OsE RoWRS dI ThIS DFeRTL, W’d  iN

    RoUE. cOLeTY

45. iF Ll OsE RoWRS dI ThIS DFeRTL, W’d  iN

    RoUE. Ut Ey N’t! cOLeTY
46. None

47. w StdAs!

48. None

49. tHReTAl ApPR PSN

50. tHReTAl ApPR PSN

51. Internet Explorer switches over to GRML tHReTAl ApPR PSN

52. Internet Explorer switches over to GRML Apple creates their own

    new proprietary web language. tHReTAl ApPR PSN

53. Mozilla decides Flash is super great and supports only that.

    Internet Explorer switches over to GRML Apple creates their own new proprietary web language. tHReTAl ApPR PSN

54. Mozilla decides Flash is super great and supports only that.

    Opera goes with W3C standard HTML & CSS Internet Explorer switches over to GRML Apple creates their own new proprietary web language. tHReTAl ApPR PSN
55. None

56. DelOps:

57. DelOps: e Tt Noe

58. DelOps: e Tt Noe 4 x T wRk

59. DelOps: e Tt Noe 4 x T wRk 4 x

    T mATeNCE (oR OR)

60. DelOps: e Tt Noe 4 x T wRk 4 x

    T mATeNCE (oR OR) f fEwR PPL

61. Aca pREN

62. Aca pREN IE WebKit Firefox Opera

63. T’s Rt  tH MaRTN! NtEET XpLER 1 TT DVe

64. T’s Rt  tH MaRTN! mOLlA EO

65. T’s Rt  tH MaRTN! aPE.O/Ml5

66. T’s Rt  tH MaRTN! oPA FTEs

67. T’s Rt  tH MaRTN! cHMeEErINT.O

68. DelOps: Reic

69. None

70. Hl c

71. Hl c AVCPt d

72. Hl c AVCPt d AAs s p

73. Hl c AVCPt d AAs s p w-Aa Wf

74. bU EvE WiT StAAD... HeR ArE IfFEnC bEwEN bRwSeR ApALiTS

75. bU EvE WiT StAAD... HeR ArE IfFEnC bEwEN bRwSeR ApALiTS

    wH dO wE D?

76. o Stte i...

77. m o Stte i...

78. None
79. None
80. None
81. None

82. A.K.A. IE 8 Preview Mode!

83. None
84. None

85. eMAC pRReSVe HaNMN N RaCUl GrATO

86. pRReSVe HaNMN Starting with a baseline of usable functionality, then

    increasing the richness of the user experience step by step by testing for support for enhancements before applying them. — Christian Heilmann http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/

87. IrEX 1

88. IrEX 1

89. IrEX 1

90. AfA 4

91. gREfU DeGDaTN Providing an alternative version of your functionality or

    making the user aware of shortcomings of a product as a safety measure to ensure that the product is usable. — Christian Heilmann http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/

92. header { background: linear-gradient(black, #444); color: white; }

93. header { background: linear-gradient(black, #444); color: white; } HEADER

94. header { background: linear-gradient(black, #444); color: white; } HEADER Awwww

    Poor IE 8 =(

95. header { background: black; /* fallback */ background: linear-gradient(black, #444);

    color: white; } HEADER
96. None
97. None
98. None
99. None

100. iS T IAl  wEItE EsSTiAY wO tH SM I

     AlL RoWRs, pRIdI eSNtI fEUE A O’t PeA ToTLy SE?

101. iS T IAl  wEItE EsSTiAY wO tH SM I

     AlL RoWRs, pRIdI eSNtI fEUE A O’t PeA ToTLy SE? d c?
102. None
103. None
104. None
105. None
106. None

107. <audio src="/audio/001.mp3" controls> <!-- fallback --> <a href="/audio/001.mp3">Download MP3</a> </audio>

108. None
109. None
110. None
111. None

112. <audio controls> <source src="/audio/001.mp3" type="audio/mpeg"> <source src="/autio/001.oog" type="audio/ogg"> <!-- fallback

     --> <a href="/audio/001.mp3">Download MP3</a> </audio>

113. <audio controls> <source src="/audio/001.mp3" type="audio/mpeg"> <source src="/autio/001.oog" type="audio/ogg"> </audio> <a

     href="/audio/001.mp3">Download MP3</a>
114. None

115. <audio controls> <source src="/audio/005.ogg" type="audio/ogg"> <source src="/audio/005.mp3" type="audio/mpeg"> </audio> ...

     <script src="mediaelement-and-player.min.js"> </script> <script> $("audio").mediaelementplayer(); </script>
116. None
117. None

118. WE On’T NOw wH OR vIToR S UNg BrWse

119. SE tOS T EE cRS-BWsE PNs.

120. None
121. None
122. None
123. None
124. None

125. @import "mixins"; body { @include gradient(white, #ccc); }

126. https://gist.github.com/1867165

127. body { background-color: white; background-image: -webkit-gradient(linear, left to background-image: -webkit-linear-gradient(top,

     w background-image: -moz-linear-gradient(top, whit background-image: -ms-linear-gradient(top, white background-image: -o-linear-gradient(top, white, $ }
128. None
129. None
130. None
131. None

132. 1) Grab copy of normalize.css 2) Customize it (basics, typography,

     tables, etc) 3) @import that

133. That way... 1) You’re not resetting stuff only to set

     it again later. 2) You’ve ensured more consistent styles across more elements and a wider array of browsers

134. And you avoid this...

135. None
136. None
137. None
138. None
139. None

140. mORnI gIS yO A W T cLNlY OR yO sTEs

     D bEVO
141. None
142. None

143. Warning!

144. Warning!

145. .warning { background: white; .boxshadow & { @include box-shadow(0, 0,

     100px, red); } .no-boxshadow & { border: 10px solid red; } }

146. Warning!

147. Warning! Warning!

148. Warning! Warning!

149. Warning! Warning!

150. None
151. None

152. yepnope({ test : Modernizr.inputtypes.date, nope : [ 'scripts/jquery-ui.js', 'css/jquery-ui.css', 'scripts/datepicker.js'

     ] });

153. Opera 11 Firefox 4

154. pOFL A polyfill is a piece of code that provides

     the technology that the developer expects the browser to provide natively. — Remy Sharp

155. pOFL A shim that mimics a [present] API with fallback

     functionality for older browsers. — Paul Irish

156. pOFL Regressive enhancement. — Alex Sexton

157. O’t* uS MoDNR wI pOFLs. Ue pOFiL dO EaTE dECtI

     aLAD. * Or do, but know what’s going on. And ideally strip out the feature detect from the polyfill and load it with YepNope.
158. None
159. None
160. None

161. WE On’T NOw wH OR vIToR S UNg BrWse

162. None

163. 640X480

164. 640X480 800x600

165. 640X480 800x600 1024x768

166. 640X480 800x600 1024x768 1280x720

167. 640X480 800x600 1024x768 1280x720 1344x1008

168. 640X480 800x600 1024x768 1280x720 1344x1008 1600x900

169. 640X480 800x600 1024x768 1280x720 1344x1008 1600x900 1920x1080

170. 640X480 800x600 1024x768 1280x720 1344x1008 1600x900 1920x1080 983409x834094

171. None
172. None

173. http://css-tricks.com/screen-resolution-notequalto-browser-window/

174. sUR CMoN UeSOn: wH wIH SUD  mA mY wEbSE?

175. 90 sUR CMoN UeSOn: wH wIH SUD  mA mY

     wEbSE?
176. None
177. None

178. The i n NueR

179. HiN AbO mA sCEn ZS & DIE

180. HiN AbO mA sCEn ZS & DIE Do you need

     to do anything?

181. HiN AbO mA sCEn ZS & DIE Do you need

     to do anything? Responsive Design?

182. HiN AbO mA sCEn ZS & DIE Do you need

     to do anything? Responsive Design? How does your media fare?

183. HiN AbO mA sCEn ZS & DIE Do you need

     to do anything? Responsive Design? How does your media fare? Dedicated Mobile Version of Site?

184. http://xkcd.com/869/

185. None

186. BrWse De 1 2 3 4

187. BrWse De 1 2 3 4

188. WE On’T NOw aBT He PeoN vITiN OuR wEbSE

189. De

190. DeT

191. DeT Maie

192. De pIA

193. oN Of EsE IrL ThA LiK To OK iN eA

     oTRs Es

194. WHeR DoE DuD LV?

195. None

196. `

197. ` Sparkling Coin Laundry

198. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th)

199. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th)

200. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th) Hours Mon-Fri 7am-11pm Sat-Sun 8am-10pm

201. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th) Hours Mon-Fri 7am-11pm Sat-Sun 8am-10pm 555-555-5555

202. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th) We care about stuff and stuff! Hours Mon-Fri 7am-11pm Sat-Sun 8am-10pm 555-555-5555

203. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th) Home Contact Us Order Pickup Our Services We care about stuff and stuff! Hours Mon-Fri 7am-11pm Sat-Sun 8am-10pm 555-555-5555

204. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th) Home Contact Us Order Pickup Our Services We care about stuff and stuff! Hours Mon-Fri 7am-11pm Sat-Sun 8am-10pm 555-555-5555
205. None

206. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th) Home Contact Us Order Pickup Our Services We care about stuff and stuff! Hours Mon-Fri 7am-11pm Sat-Sun 8am-10pm 555-555-5555

207. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th) Home Contact Us Order Pickup Our Services We care about stuff and stuff! Hours Mon-Fri 7am-11pm Sat-Sun 8am-10pm 555-555-5555 You are super far away dude. Might we suggest a local coin laundry search?

208. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th) Home Contact Us Order Pickup Our Services We care about stuff and stuff! Hours Mon-Fri 7am-11pm Sat-Sun 8am-10pm 555-555-5555

209. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th) Home Contact Us Order Pickup Our Services We care about stuff and stuff! Hours Mon-Fri 7am-11pm Sat-Sun 8am-10pm 555-555-5555 You’re right in our corner dude! How about some local directions?

210. ` Sparkling Coin Laundry New Orleans, LA 124 5th Street

     (Corner of Aberdeen & 5th) Home Contact Us Order Pickup Our Services We care about stuff and stuff! Hours Mon-Fri 7am-11pm Sat-Sun 8am-10pm 555-555-5555 We’re open for 2 more hours! You’re right in our corner dude! How about some local directions?

211. Wt i a t t o Dus Md?

212. None

213. Bod i  Huy aNY

214. Bod i  Huy aNY Gd Md b Md

215. Bod i  Huy aNY Gd Md b Md FLiN

     SoCL ReaRcn

216. Bod i  Huy aNY Gd Md b Md FLiN

     SoCL ReaRcn Trli Loin t b Ap

217. Bod i  Huy aNY Gd Md b Md FLiN

     SoCL ReaRcn Trli Loin t b Ap Cod b CoiNd t b

218. Bod i  Huy aNY Gd Md b Md FLiN

     SoCL ReaRcn Trli Loin t b Ap Cod b CoiNd t b cUEnT sPNN
219. None
220. None
221. None
222. None

223. R, JT SP I UsI yO bE jUEmE D eXRiEE

     A A DIEr* aN TN bE EsPSV wI fEBC. * please internally iterate

224. *rELy* CPlE SySM

225. Hey Chris, A few folks have had problems with getting

     stuck in a loop in the Facebook App. *rELy* CPlE SySM

226. Hey Chris, A few folks have had problems with getting

     stuck in a loop in the Facebook App. OK Andrew, Thanks, I’ll take a look now. Forward those emails to me. *rELy* CPlE SySM

227. wH iS US nAVe NgUE?

228. None
229. None
230. None
231. None
232. None

233. cUUrA CoNDeRIN

234. cUUrA CoNDeRIN Research it

235. cUUrA CoNDeRIN Research it Ask friends

236. cUUrA CoNDeRIN Research it Ask friends ask users

237. cUUrA CoNDeRIN Research it Ask friends ask users Ask Twitter

     Followers

238. BrWse De 1 2 3 4

239. BrWse De 1 2 3 4

240. wE On’t Ow hOw DD iNRTs wI hI BrOwEr

241. OeS UdE AE aN DiSIlIEs?

242. mAE DE I BlI (oR As OR eYIH) A uS

     a ReE ReAR • Are there skip to content / skip to navigation links? • Back to top links? • Alt text for images crucial to content • Careful about display: none; • Not using tables for layout • Careful about details like how you use icons • Related content next to each other in DOM • Tested all Ajax

243. w-Aa

244. <h1 id="treelabel">WAI-ARIA Tree Example</h1> <ul role="tree" aria-labelledby="treelabel" aria-act <li role="treeitem"

     aria-expanded="true">Animal <ul role="group"> <li role="treeitem">Birds</li> <li role="treeitem" aria-expanded="false">Cats <ul role="group"> <li role="treeitem">Siamese</li> <li role="treeitem">Tabby</li> </ul> </li> <li role="treeitem" aria-expanded="true">Dogs <ul role="group">

245. hW Cout Say i De?

246. hW Cout Say i De?

247. hW Cout Say i De? Good interfaces work well for

     everyone.

248. ApALiTS F ECe

249. ApALiTS F ECe dETO/lAOp

250. ApALiTS F ECe dETO/lAOp Click

251. ApALiTS F ECe dETO/lAOp Click Click-and-Drag

252. ApALiTS F ECe dETO/lAOp Click Click-and-Drag Right-Click

253. ApALiTS F ECe dETO/lAOp Click Click-and-Drag Right-Click Double-Click

254. ApALiTS F ECe dETO/lAOp Click Click-and-Drag Right-Click Double-Click Command-S

255. ApALiTS F ECe tOH DIC dETO/lAOp Click Click-and-Drag Right-Click Double-Click

     Command-S

256. ApALiTS F ECe tOH DIC dETO/lAOp Click Click-and-Drag Right-Click Double-Click

     Command-S Tap

257. ApALiTS F ECe tOH DIC dETO/lAOp Click Click-and-Drag Right-Click Double-Click

     Command-S Tap Swipe

258. ApALiTS F ECe tOH DIC dETO/lAOp Click Click-and-Drag Right-Click Double-Click

     Command-S Tap Swipe Multi-finger Swipe

259. ApALiTS F ECe tOH DIC dETO/lAOp Click Click-and-Drag Right-Click Double-Click

     Command-S Tap Swipe Multi-finger Swipe Pinch

260. ApALiTS F ECe tOH DIC dETO/lAOp Click Click-and-Drag Right-Click Double-Click

     Command-S Tap Swipe Multi-finger Swipe Pinch Expand

261. BrWse De 1 2 3 4

262. BrWse De 1 2 3 4

263. WE On’t Ow hOw ThE RoWR cOET T ThE NtEEt

264. 1,00

265. HeR Is Ly E GL: Ft

266. mA T St T DoWOaD Or E 1BpS ELe tH

     I’S sUR FT T DoWOD R 5mB pELe

267. I’s T VY HD

268. 1) Sprite as much as you can I’s T VY

     HD

269. 1) Sprite as much as you can 2) Concatenate and

     minify CSS (2 per page) I’s T VY HD

270. 1) Sprite as much as you can 2) Concatenate and

     minify CSS (2 per page) 3) Concatenate and minify JS (2 per page) I’s T VY HD

271. 1) Sprite as much as you can 2) Concatenate and

     minify CSS (2 per page) 3) Concatenate and minify JS (2 per page) 4) Optimize all images I’s T VY HD

272. 1) Sprite as much as you can 2) Concatenate and

     minify CSS (2 per page) 3) Concatenate and minify JS (2 per page) 4) Optimize all images 5) Load only what you need at rst I’s T VY HD
273. None

274. 1.7m O ImeS

275. None
276. None

277. oN O’vE EaL WH aL TA, TN Y cA WoR

     aBT OEr TLs

278. oN O’vE EaL WH aL TA, TN Y cA WoR

     aBT OEr TLs 1) CSS and JS selector performance

279. oN O’vE EaL WH aL TA, TN Y cA WoR

     aBT OEr TLs 1) CSS and JS selector performance 2) Preventing redraws

280. oN O’vE EaL WH aL TA, TN Y cA WoR

     aBT OEr TLs 1) CSS and JS selector performance 2) Preventing redraws 3) Squeezing scraps

281. WE On’t Ow hOw ThE RoWR cOET T ThE NtEEt

282. None

283. “mOLe” DIE

284. significantly slower internet connection speed “mOLe” DIE

285. significantly slower internet connection speed significantly less caching “mOLe” DIE

286. significantly slower internet connection speed significantly less caching significantly less

     processing speed “mOLe” DIE

287. significantly slower internet connection speed significantly less caching significantly less

     processing speed significantly less memory “mOLe” DIE

288. Wp u

289. WE On’t Ow WT BWE oU ViSOr  uSG So

     we use tools to help make cross browser problems less painful and we do the best we can to make sure our sites work acceptable in all browsers.

290. WE On’t Ow BoU TE pEOn SiTG O wEIT So

     we do our best to accommodate any kind of person.

291. So we make our sites accessible in case they have

     a disability. And we consider different types of devices and their capabilties WE On’t Ow Hw oU ViSOR iNRaC wI tHR BWE

292. So we make our sites as fast as possible by

     reducing requests and considering a wide range of devices. WE On’t Ow T iNRT cOEcTN SEd  oU ViSOr

293. http://www.bfro.net/GDB/NewAdditionsRss.asp

294. THANKS! HS OyI @cHScOEr Slides: bit.ly/thisconferencewasawesome