Slide 1
Slide 1 text
WHT WE
On’T NOw
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
HS OEr
Slide 4
Slide 4 text
HS OEr
@cHScOEr
Slide 5
Slide 5 text
HS OEr
@cHScOEr
cHScOEr.E
Slide 6
Slide 6 text
HS OEr
@cHScOEr
cHScOEr.E
pA To, c
Slide 7
Slide 7 text
HS OEr
@cHScOEr
cHScOEr.E
pA To, c
cIA 18
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
sUEyMKE.O
Slide 10
Slide 10 text
sUEyMKE.O
wUO.O
Slide 11
Slide 11 text
sUEyMKE.O
wUO.O
cS-TrIS.O
Slide 12
Slide 12 text
sUEyMKE.O
wUO.O
cS-TrIS.O
dIwP.O
Slide 13
Slide 13 text
sUEyMKE.O
wUO.O
cS-TrIS.O
dIwP.O
sHTaLHOw.O
Slide 14
Slide 14 text
WHT WE
On’T NOw
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
OeS IgFT ESt?
Slide 17
Slide 17 text
OeS IgFT ESt?
Slide 18
Slide 18 text
1967 “Patterson-Gimlin“ Film
Slide 19
Slide 19 text
WHT WE
On’T NOw
Slide 20
Slide 20 text
WHT WE
On’T NOw
... AUt E wEb.
Slide 21
Slide 21 text
aNOmY F
a wB RUS*
Slide 22
Slide 22 text
aNOmY F
a wB RUS*
* Incredibly oversimplified
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
SeeR
wEIT
rEUEs
Slide 25
Slide 25 text
BrWse
SeeR
wEIT
rEUEs
Slide 26
Slide 26 text
BrWse
SeeR
wEIT
rEUEs
De
Slide 27
Slide 27 text
BrWse
SeeR
wEIT
rEUEs
De
Slide 28
Slide 28 text
BrWse
SeeR
wEIT
rEUEs
De
Slide 29
Slide 29 text
BrWse
SeeR
wEIT
rEUEs
De
Slide 30
Slide 30 text
BrWse
SeeR
wEIT
rEUEs
De
Slide 31
Slide 31 text
BrWse
SeeR
wEIT
rEUEs
De
Slide 32
Slide 32 text
BrWse
SeeR
wEIT
rEUEs
De
Thar Be
Dragons
Slide 33
Slide 33 text
BrWse De
Slide 34
Slide 34 text
BrWse De
1
Slide 35
Slide 35 text
BrWse De
1
2
Slide 36
Slide 36 text
BrWse De
1
2
3
Slide 37
Slide 37 text
BrWse De
1
2
3
4
Slide 38
Slide 38 text
BrWse De
1
2
3
4
Slide 39
Slide 39 text
WE On’T NOw
wH OR
vIToR S UNg
BrWse
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
iF Ll OsE RoWRS
dI ThIS DFeRTL,
W’d iN RoUE.
Slide 44
Slide 44 text
iF Ll OsE RoWRS
dI ThIS DFeRTL,
W’d iN RoUE.
cOLeTY
Slide 45
Slide 45 text
iF Ll OsE RoWRS
dI ThIS DFeRTL,
W’d iN RoUE.
Ut Ey N’t!
cOLeTY
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
w StdAs!
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
tHReTAl ApPR PSN
Slide 50
Slide 50 text
tHReTAl ApPR PSN
Slide 51
Slide 51 text
Internet Explorer switches
over to GRML
tHReTAl ApPR PSN
Slide 52
Slide 52 text
Internet Explorer switches
over to GRML
Apple creates their
own new proprietary
web language.
tHReTAl ApPR PSN
Slide 53
Slide 53 text
Mozilla decides Flash
is super great and
supports only that.
Internet Explorer switches
over to GRML
Apple creates their
own new proprietary
web language.
tHReTAl ApPR PSN
Slide 54
Slide 54 text
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.
tHReTAl ApPR PSN
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
DelOps:
Slide 57
Slide 57 text
DelOps:
e Tt Noe
Slide 58
Slide 58 text
DelOps:
e Tt Noe
4 x T wRk
Slide 59
Slide 59 text
DelOps:
e Tt Noe
4 x T wRk
4 x T mATeNCE (oR OR)
Slide 60
Slide 60 text
DelOps:
e Tt Noe
4 x T wRk
4 x T mATeNCE (oR OR)
f fEwR PPL
Slide 61
Slide 61 text
Aca pREN
Slide 62
Slide 62 text
Aca pREN
IE
WebKit
Firefox
Opera
Slide 63
Slide 63 text
T’s Rt tH MaRTN!
NtEET XpLER 1 TT DVe
Slide 64
Slide 64 text
T’s Rt tH MaRTN!
mOLlA EO
Slide 65
Slide 65 text
T’s Rt tH MaRTN!
aPE.O/Ml5
Slide 66
Slide 66 text
T’s Rt tH MaRTN!
oPA FTEs
Slide 67
Slide 67 text
T’s Rt tH MaRTN!
cHMeEErINT.O
Slide 68
Slide 68 text
DelOps:
Reic
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Hl c
Slide 71
Slide 71 text
Hl c
AVCPt d
Slide 72
Slide 72 text
Hl c
AVCPt d
AAs s p
Slide 73
Slide 73 text
Hl c
AVCPt d
AAs s p
w-Aa Wf
Slide 74
Slide 74 text
bU EvE WiT StAAD...
HeR ArE IfFEnC bEwEN
bRwSeR ApALiTS
Slide 75
Slide 75 text
bU EvE WiT StAAD...
HeR ArE IfFEnC bEwEN
bRwSeR ApALiTS
wH dO wE D?
Slide 76
Slide 76 text
o Stte i...
Slide 77
Slide 77 text
m
o Stte i...
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
A.K.A.
IE 8
Preview
Mode!
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
eMAC
pRReSVe HaNMN
N
RaCUl GrATO
Slide 86
Slide 86 text
pRReSVe HaNMN
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/
Slide 87
Slide 87 text
IrEX 1
Slide 88
Slide 88 text
IrEX 1
Slide 89
Slide 89 text
IrEX 1
Slide 90
Slide 90 text
AfA 4
Slide 91
Slide 91 text
gREfU DeGDaTN
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/
Slide 92
Slide 92 text
header {
background: linear-gradient(black, #444);
color: white;
}
Slide 93
Slide 93 text
header {
background: linear-gradient(black, #444);
color: white;
}
HEADER
Slide 94
Slide 94 text
header {
background: linear-gradient(black, #444);
color: white;
}
HEADER
Awwww Poor IE 8 =(
Slide 95
Slide 95 text
header {
background: black; /* fallback */
background: linear-gradient(black, #444);
color: white;
}
HEADER
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
iS T IAl wEItE EsSTiAY
wO tH SM I AlL RoWRs,
pRIdI eSNtI fEUE A
O’t PeA ToTLy SE?
Slide 101
Slide 101 text
iS T IAl wEItE EsSTiAY
wO tH SM I AlL RoWRs,
pRIdI eSNtI fEUE A
O’t PeA ToTLy SE?
d c?
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
No content
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
No content
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
...
$("audio").mediaelementplayer();
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
WE On’T NOw
wH OR
vIToR S UNg
BrWse
Slide 119
Slide 119 text
SE tOS T EE
cRS-BWsE PNs.
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
@import "mixins";
body {
@include gradient(white, #ccc);
}
Slide 126
Slide 126 text
https://gist.github.com/1867165
Slide 127
Slide 127 text
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, $
}
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
1) Grab copy of normalize.css
2) Customize it
(basics, typography, tables, etc)
3) @import that
Slide 133
Slide 133 text
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
Slide 134
Slide 134 text
And you avoid this...
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
mORnI gIS
yO A W T
cLNlY OR
yO sTEs D
bEVO
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
Warning!
Slide 144
Slide 144 text
Warning!
Slide 145
Slide 145 text
.warning {
background: white;
.boxshadow & {
@include box-shadow(0, 0, 100px, red);
}
.no-boxshadow & {
border: 10px solid red;
}
}
Slide 146
Slide 146 text
Warning!
Slide 147
Slide 147 text
Warning!
Warning!
Slide 148
Slide 148 text
Warning!
Warning!
Slide 149
Slide 149 text
Warning!
Warning!
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
yepnope({
test : Modernizr.inputtypes.date,
nope : [
'scripts/jquery-ui.js',
'css/jquery-ui.css',
'scripts/datepicker.js'
]
});
Slide 153
Slide 153 text
Opera 11 Firefox 4
Slide 154
Slide 154 text
pOFL
A polyfill is a piece of code that
provides the technology that the
developer expects the browser to
provide natively.
— Remy Sharp
Slide 155
Slide 155 text
pOFL
A shim that mimics a [present] API
with fallback functionality for older
browsers.
— Paul Irish
Slide 156
Slide 156 text
pOFL
Regressive enhancement.
— Alex Sexton
Slide 157
Slide 157 text
O’t* uS MoDNR
wI pOFLs.
Ue pOFiL dO EaTE
dECtI aLAD.
* Or do, but know what’s going on. And ideally strip out the
feature detect from the polyfill and load it with YepNope.
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
No content
Slide 160
Slide 160 text
No content
Slide 161
Slide 161 text
WE On’T NOw
wH OR
vIToR S UNg
BrWse
Slide 162
Slide 162 text
No content
Slide 163
Slide 163 text
640X480
Slide 164
Slide 164 text
640X480
800x600
Slide 165
Slide 165 text
640X480
800x600
1024x768
Slide 166
Slide 166 text
640X480
800x600
1024x768
1280x720
Slide 167
Slide 167 text
640X480
800x600
1024x768
1280x720
1344x1008
Slide 168
Slide 168 text
640X480
800x600
1024x768
1280x720
1344x1008
1600x900
Slide 169
Slide 169 text
640X480
800x600
1024x768
1280x720
1344x1008
1600x900
1920x1080
Slide 170
Slide 170 text
640X480
800x600
1024x768
1280x720
1344x1008
1600x900
1920x1080
983409x834094
Slide 171
Slide 171 text
No content
Slide 172
Slide 172 text
No content
Slide 173
Slide 173 text
http://css-tricks.com/screen-resolution-notequalto-browser-window/
Slide 174
Slide 174 text
sUR CMoN UeSOn:
wH wIH SUD mA
mY wEbSE?
Slide 175
Slide 175 text
90
sUR CMoN UeSOn:
wH wIH SUD mA
mY wEbSE?
Slide 176
Slide 176 text
No content
Slide 177
Slide 177 text
No content
Slide 178
Slide 178 text
The i n NueR
Slide 179
Slide 179 text
HiN AbO mA
sCEn ZS & DIE
Slide 180
Slide 180 text
HiN AbO mA
sCEn ZS & DIE
Do you need to do anything?
Slide 181
Slide 181 text
HiN AbO mA
sCEn ZS & DIE
Do you need to do anything?
Responsive Design?
Slide 182
Slide 182 text
HiN AbO mA
sCEn ZS & DIE
Do you need to do anything?
Responsive Design?
How does your media fare?
Slide 183
Slide 183 text
HiN AbO mA
sCEn ZS & DIE
Do you need to do anything?
Responsive Design?
How does your media fare?
Dedicated Mobile Version of Site?
Slide 184
Slide 184 text
http://xkcd.com/869/
Slide 185
Slide 185 text
No content
Slide 186
Slide 186 text
BrWse De
1
2
3
4
Slide 187
Slide 187 text
BrWse De
1
2
3
4
Slide 188
Slide 188 text
WE On’T NOw
aBT He PeoN
vITiN OuR wEbSE
Slide 189
Slide 189 text
De
Slide 190
Slide 190 text
DeT
Slide 191
Slide 191 text
DeT
Maie
Slide 192
Slide 192 text
De
pIA
Slide 193
Slide 193 text
oN Of EsE IrL ThA LiK To OK
iN eA oTRs Es
Slide 194
Slide 194 text
WHeR DoE DuD LV?
Slide 195
Slide 195 text
No content
Slide 196
Slide 196 text
`
Slide 197
Slide 197 text
`
Sparkling Coin Laundry
Slide 198
Slide 198 text
`
Sparkling Coin Laundry
New Orleans, LA
124 5th Street
(Corner of Aberdeen & 5th)
Slide 199
Slide 199 text
`
Sparkling Coin Laundry
New Orleans, LA
124 5th Street
(Corner of Aberdeen & 5th)
Slide 200
Slide 200 text
`
Sparkling Coin Laundry
New Orleans, LA
124 5th Street
(Corner of Aberdeen & 5th)
Hours
Mon-Fri 7am-11pm
Sat-Sun 8am-10pm
Slide 201
Slide 201 text
`
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
Slide 202
Slide 202 text
`
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
Slide 203
Slide 203 text
`
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
Slide 204
Slide 204 text
`
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
Slide 205
Slide 205 text
No content
Slide 206
Slide 206 text
`
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
Slide 207
Slide 207 text
`
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?
Slide 208
Slide 208 text
`
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
Slide 209
Slide 209 text
`
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?
Slide 210
Slide 210 text
`
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?
Slide 211
Slide 211 text
Wt i a t
t o Dus Md?
Slide 212
Slide 212 text
No content
Slide 213
Slide 213 text
Bod i Huy aNY
Slide 214
Slide 214 text
Bod i Huy aNY
Gd Md b Md
Slide 215
Slide 215 text
Bod i Huy aNY
Gd Md b Md
FLiN SoCL ReaRcn
Slide 216
Slide 216 text
Bod i Huy aNY
Gd Md b Md
FLiN SoCL ReaRcn
Trli Loin t b Ap
Slide 217
Slide 217 text
Bod i Huy aNY
Gd Md b Md
FLiN SoCL ReaRcn
Trli Loin t b Ap
Cod b CoiNd t b
Slide 218
Slide 218 text
Bod i Huy aNY
Gd Md b Md
FLiN SoCL ReaRcn
Trli Loin t b Ap
Cod b CoiNd t b
cUEnT sPNN
Slide 219
Slide 219 text
No content
Slide 220
Slide 220 text
No content
Slide 221
Slide 221 text
No content
Slide 222
Slide 222 text
No content
Slide 223
Slide 223 text
R, JT SP I UsI yO
bE jUEmE D
eXRiEE A A DIEr*
aN TN bE EsPSV
wI fEBC.
* please internally iterate
Slide 224
Slide 224 text
*rELy* CPlE SySM
Slide 225
Slide 225 text
Hey Chris,
A few folks have had problems
with getting stuck in a loop in
the Facebook App.
*rELy* CPlE SySM
Slide 226
Slide 226 text
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.
*rELy* CPlE SySM
Slide 227
Slide 227 text
wH iS US
nAVe NgUE?
Slide 228
Slide 228 text
No content
Slide 229
Slide 229 text
No content
Slide 230
Slide 230 text
No content
Slide 231
Slide 231 text
No content
Slide 232
Slide 232 text
No content
Slide 233
Slide 233 text
cUUrA CoNDeRIN
Slide 234
Slide 234 text
cUUrA CoNDeRIN
Research it
Slide 235
Slide 235 text
cUUrA CoNDeRIN
Research it
Ask friends
Slide 236
Slide 236 text
cUUrA CoNDeRIN
Research it
Ask friends
ask users
Slide 237
Slide 237 text
cUUrA CoNDeRIN
Research it
Ask friends
ask users
Ask Twitter Followers
Slide 238
Slide 238 text
BrWse De
1
2
3
4
Slide 239
Slide 239 text
BrWse De
1
2
3
4
Slide 240
Slide 240 text
wE On’t Ow
hOw DD iNRTs
wI hI BrOwEr
Slide 241
Slide 241 text
OeS UdE AE
aN DiSIlIEs?
Slide 242
Slide 242 text
mAE DE I BlI (oR As OR
eYIH) A uS a ReE ReAR
• 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
Slide 243
Slide 243 text
w-Aa
Slide 244
Slide 244 text
WAI-ARIA Tree Example
- Animal
- Birds
- Cats
- Siamese
- Tabby
- Dogs
Slide 245
Slide 245 text
hW Cout Say i De?
Slide 246
Slide 246 text
hW Cout Say i De?
Slide 247
Slide 247 text
hW Cout Say i De?
Good interfaces work well for everyone.
Slide 248
Slide 248 text
ApALiTS F ECe
Slide 249
Slide 249 text
ApALiTS F ECe
dETO/lAOp
Slide 250
Slide 250 text
ApALiTS F ECe
dETO/lAOp
Click
Slide 251
Slide 251 text
ApALiTS F ECe
dETO/lAOp
Click
Click-and-Drag
Slide 252
Slide 252 text
ApALiTS F ECe
dETO/lAOp
Click
Click-and-Drag
Right-Click
Slide 253
Slide 253 text
ApALiTS F ECe
dETO/lAOp
Click
Click-and-Drag
Right-Click
Double-Click
Slide 254
Slide 254 text
ApALiTS F ECe
dETO/lAOp
Click
Click-and-Drag
Right-Click
Double-Click
Command-S
Slide 255
Slide 255 text
ApALiTS F ECe
tOH DIC
dETO/lAOp
Click
Click-and-Drag
Right-Click
Double-Click
Command-S
Slide 256
Slide 256 text
ApALiTS F ECe
tOH DIC
dETO/lAOp
Click
Click-and-Drag
Right-Click
Double-Click
Command-S
Tap
Slide 257
Slide 257 text
ApALiTS F ECe
tOH DIC
dETO/lAOp
Click
Click-and-Drag
Right-Click
Double-Click
Command-S
Tap
Swipe
Slide 258
Slide 258 text
ApALiTS F ECe
tOH DIC
dETO/lAOp
Click
Click-and-Drag
Right-Click
Double-Click
Command-S
Tap
Swipe
Multi-finger Swipe
Slide 259
Slide 259 text
ApALiTS F ECe
tOH DIC
dETO/lAOp
Click
Click-and-Drag
Right-Click
Double-Click
Command-S
Tap
Swipe
Multi-finger Swipe
Pinch
Slide 260
Slide 260 text
ApALiTS F ECe
tOH DIC
dETO/lAOp
Click
Click-and-Drag
Right-Click
Double-Click
Command-S
Tap
Swipe
Multi-finger Swipe
Pinch
Expand
Slide 261
Slide 261 text
BrWse De
1
2
3
4
Slide 262
Slide 262 text
BrWse De
1
2
3
4
Slide 263
Slide 263 text
WE On’t Ow
hOw ThE RoWR
cOET T ThE NtEEt
Slide 264
Slide 264 text
1,00
Slide 265
Slide 265 text
HeR Is Ly E GL:
Ft
Slide 266
Slide 266 text
mA T St T DoWOaD Or E
1BpS ELe
tH I’S sUR FT T DoWOD
R 5mB pELe
Slide 267
Slide 267 text
I’s T VY HD
Slide 268
Slide 268 text
1) Sprite as much as you can
I’s T VY HD
Slide 269
Slide 269 text
1) Sprite as much as you can
2) Concatenate and minify CSS (2 per page)
I’s T VY HD
Slide 270
Slide 270 text
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 VY HD
Slide 271
Slide 271 text
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 VY HD
Slide 272
Slide 272 text
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 VY HD
Slide 273
Slide 273 text
No content
Slide 274
Slide 274 text
1.7m O
ImeS
Slide 275
Slide 275 text
No content
Slide 276
Slide 276 text
No content
Slide 277
Slide 277 text
oN O’vE EaL WH
aL TA, TN Y cA WoR
aBT OEr TLs
Slide 278
Slide 278 text
oN O’vE EaL WH
aL TA, TN Y cA WoR
aBT OEr TLs
1) CSS and JS selector performance
Slide 279
Slide 279 text
oN O’vE EaL WH
aL TA, TN Y cA WoR
aBT OEr TLs
1) CSS and JS selector performance
2) Preventing redraws
Slide 280
Slide 280 text
oN O’vE EaL WH
aL TA, TN Y cA WoR
aBT OEr TLs
1) CSS and JS selector performance
2) Preventing redraws
3) Squeezing scraps
Slide 281
Slide 281 text
WE On’t Ow
hOw ThE RoWR
cOET T ThE NtEEt
Slide 282
Slide 282 text
No content
Slide 283
Slide 283 text
“mOLe” DIE
Slide 284
Slide 284 text
significantly slower internet connection speed
“mOLe” DIE
Slide 285
Slide 285 text
significantly slower internet connection speed
significantly less caching
“mOLe” DIE
Slide 286
Slide 286 text
significantly slower internet connection speed
significantly less caching
significantly less processing speed
“mOLe” DIE
Slide 287
Slide 287 text
significantly slower internet connection speed
significantly less caching
significantly less processing speed
significantly less memory
“mOLe” DIE
Slide 288
Slide 288 text
Wp u
Slide 289
Slide 289 text
WE On’t Ow WT BWE
oU ViSOr uSG
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.
Slide 290
Slide 290 text
WE On’t Ow BoU TE
pEOn SiTG O wEIT
So we do our best to accommodate
any kind of person.
Slide 291
Slide 291 text
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 Hw oU ViSOR
iNRaC wI tHR BWE
Slide 292
Slide 292 text
So we make our sites as fast as
possible by reducing requests and
considering a wide range of devices.
WE On’t Ow T iNRT
cOEcTN SEd oU ViSOr
Slide 293
Slide 293 text
http://www.bfro.net/GDB/NewAdditionsRss.asp
Slide 294
Slide 294 text
THANKS!
HS OyI @cHScOEr
Slides:
bit.ly/thisconferencewasawesome