What We Don't Know

On any given request for our website there are loads of unknown factors. One of the more obvious unknowns is the browser. There are lots of techniques and tools we can use to ensure good experiences across any browser. But we also don't know about the person. Who are they? Where to they live? What are they thinking? We should be admitting that we don't know those things either. And how does that person interact with their browser? And how does that browser interact with the server behind our website? These are all unknowns. The first step is admitting it and the next is embracing it.

Transcript

1. WHT WE On’T NOw
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
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
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
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
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
47. w StdAs!
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
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
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...
82. A.K.A. IE 8 Preview Mode!
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
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?
107. <audio src="/audio/001.mp3" controls> <!-- fallback --> <a href="/audio/001.mp3">Download MP3</a> </audio>
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>
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>
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.
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, $ }
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...
140. mORnI gIS yO A W T cLNlY OR yO sTEs D bEVO
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!
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.
161. WE On’T NOw wH OR vIToR S UNg BrWse
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
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?
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/
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?
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
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?
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
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?
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
274. 1.7m O ImeS
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
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