What We Don't Know

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.

8081b26e05bb4354f7d65ffc34cbbd67?s=128

Chris Coyier

February 22, 2012
Tweet

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