Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Chris Coyier

February 22, 2012
Tweet

More Decks by Chris Coyier

Other Decks in Programming

Transcript

  1. 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
  2. iF Ll OsE RoWRS dI ThIS DFeRTL, W’d  iN

    RoUE. Ut Ey N’t! cOLeTY
  3. Internet Explorer switches over to GRML Apple creates their own

    new proprietary web language. tHReTAl ApPR PSN
  4. 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
  5. 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
  6. 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
  7. 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/
  8. 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/
  9. 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?
  10. 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?
  11. <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>
  12. 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, $ }
  13. 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
  14. .warning { background: white; .boxshadow & { @include box-shadow(0, 0,

    100px, red); } .no-boxshadow & { border: 10px solid red; } }
  15. 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
  16. pOFL A shim that mimics a [present] API with fallback

    functionality for older browsers. — Paul Irish
  17. 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.
  18. HiN AbO mA sCEn ZS & DIE Do you need

    to do anything? Responsive Design? How does your media fare?
  19. 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?
  20. `

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

    (Corner of Aberdeen & 5th) Hours Mon-Fri 7am-11pm Sat-Sun 8am-10pm
  22. ` 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
  23. ` 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
  24. ` 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
  25. ` 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
  26. ` 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
  27. ` 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?
  28. ` 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
  29. ` 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?
  30. ` 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?
  31. 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
  32. 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
  33. 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
  34. 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
  35. Hey Chris, A few folks have had problems with getting

    stuck in a loop in the Facebook App. *rELy* CPlE SySM
  36. 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
  37. 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
  38. <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">
  39. 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
  40. 1) Sprite as much as you can 2) Concatenate and

    minify CSS (2 per page) I’s T VY HD
  41. 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
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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
  47. significantly slower internet connection speed significantly less caching significantly less

    processing speed significantly less memory “mOLe” DIE
  48. 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.
  49. 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
  50. 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