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
   

   View Slide

2. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. View Slide

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

    View Slide

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

    View Slide

18. 1967 “Patterson-Gimlin“ Film
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. BrWse De
    

    View Slide

34. BrWse De
    1
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. View Slide

41. View Slide

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
    

    View Slide

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

    View Slide

44. iF Ll OsE RoWRS
    dI ThIS DFeRTL,
    W’d  iN RoUE.
    cOLeTY
    

    View Slide

45. iF Ll OsE RoWRS
    dI ThIS DFeRTL,
    W’d  iN RoUE.
    Ut Ey N’t!
    cOLeTY
    

    View Slide

46. View Slide

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

    View Slide

48. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

55. View Slide

56. DelOps:
    

    View Slide

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

    View Slide

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

    View Slide

59. DelOps:
    e Tt Noe
    4 x T wRk
    4 x T mATeNCE (oR OR)
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

69. View Slide

70. Hl c
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

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

    View Slide

83. View Slide

84. View Slide

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

    View Slide

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/
    

    View Slide

87. IrEX 1
    

    View Slide

88. IrEX 1
    

    View Slide

89. IrEX 1
    

    View Slide

90. AfA 4
    

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

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?
     

     View Slide

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?
     

     View Slide

102. View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. 
     
     Download MP3
     
     

     View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

112. 
     
     
     
     Download MP3
     
     

     View Slide

113. 
     
     
     
     Download MP3
     

     View Slide

114. View Slide

115. 
     
     
     
     ...
     <br/>
     <br/>$("audio").mediaelementplayer();<br/>
     

     View Slide

116. View Slide

117. View Slide

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

     View Slide

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

     View Slide

120. View Slide

121. View Slide

122. View Slide

123. View Slide

124. View Slide

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

     View Slide

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

     View Slide

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, $
     }
     

     View Slide

128. View Slide

129. View Slide

130. View Slide

131. View Slide

132. 1) Grab copy of normalize.css
     2) Customize it
     (basics, typography, tables, etc)
     3) @import that
     

     View Slide

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
     

     View Slide

134. And you avoid this...
     

     View Slide

135. View Slide

136. View Slide

137. View Slide

138. View Slide

139. View Slide

140. mORnI gIS
     yO A W T
     cLNlY OR
     yO sTEs D
     bEVO
     

     View Slide

141. View Slide

142. View Slide

143. Warning!
     

     View Slide

144. Warning!
     

     View Slide

145. .warning {
     background: white;
     .boxshadow & {
     @include box-shadow(0, 0, 100px, red);
     }
     .no-boxshadow & {
     border: 10px solid red;
     }
     }
     

     View Slide

146. Warning!
     

     View Slide

147. Warning!
     Warning!
     

     View Slide

148. Warning!
     Warning!
     

     View Slide

149. Warning!
     Warning!
     

     View Slide

150. View Slide

151. View Slide

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

     View Slide

153. Opera 11 Firefox 4
     

     View Slide

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
     

     View Slide

155. pOFL
     A shim that mimics a [present] API
     with fallback functionality for older
     browsers.
     — Paul Irish
     

     View Slide

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

     View Slide

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.
     

     View Slide

158. View Slide

159. View Slide

160. View Slide

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

     View Slide

162. View Slide

163. 640X480
     

     View Slide

164. 640X480
     800x600
     

     View Slide

165. 640X480
     800x600
     1024x768
     

     View Slide

166. 640X480
     800x600
     1024x768
     1280x720
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

171. View Slide

172. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

176. View Slide

177. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

182. HiN AbO mA
     sCEn ZS & DIE
     Do you need to do anything?
     Responsive Design?
     How does your media fare?
     

     View Slide

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?
     

     View Slide

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

     View Slide

185. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

189. De
     

     View Slide

190. DeT
     

     View Slide

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

     View Slide

192. De
     pIA
     

     View Slide

193. oN Of EsE IrL ThA LiK To OK
     iN eA oTRs Es
     

     View Slide

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

     View Slide

195. View Slide

196. `
     

     View Slide

197. `
     Sparkling Coin Laundry
     

     View Slide

198. `
     Sparkling Coin Laundry
     New Orleans, LA
     124 5th Street
     (Corner of Aberdeen & 5th)
     

     View Slide

199. `
     Sparkling Coin Laundry
     New Orleans, LA
     124 5th Street
     (Corner of Aberdeen & 5th)
     

     View Slide

200. `
     Sparkling Coin Laundry
     New Orleans, LA
     124 5th Street
     (Corner of Aberdeen & 5th)
     Hours
     Mon-Fri 7am-11pm
     Sat-Sun 8am-10pm
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

205. View Slide

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
     

     View Slide

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?
     

     View Slide

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
     

     View Slide

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?
     

     View Slide

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?
     

     View Slide

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

     View Slide

212. View Slide

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

     View Slide

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

     View Slide

215. Bod i  Huy aNY
     Gd Md b Md
     FLiN SoCL ReaRcn
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

219. View Slide

220. View Slide

221. View Slide

222. View Slide

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
     

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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

     View Slide

228. View Slide

229. View Slide

230. View Slide

231. View Slide

232. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

243. w-Aa
     

     View Slide

244. WAI-ARIA Tree Example
     Animal
     
     Birds
     Cats
     
     Siamese
     Tabby
     
     
     Dogs
     
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

264. 1,00
     

     View Slide

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

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

269. 1) Sprite as much as you can
     2) Concatenate and minify CSS (2 per page)
     I’s T VY HD
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

273. View Slide

274. 1.7m O
     ImeS
     

     View Slide

275. View Slide

276. View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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

     View Slide

282. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

288. Wp u
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide