BY TOM MASLEN, BBC NEWS
THERE WILL BE FIVE VERSIONS OF
Another version of IE?!?!
AAAAAAARGH!!!
INTERNET EXPLORER TO SUPPORT NEXT YEAR
THIS SHOULD REALLY BE CALLED...
Slide 3
Slide 3 text
PART 1
WEB DEVELOPMENT USED TO BE EASY
ME
MY PROJECT MANAGER
Don’t get excited
Slide 4
Slide 4 text
ACCESSIBILITY
4 DIFFERENT
RENDERING ENGINES
SEO
REALLY EASY!
Slide 5
Slide 5 text
ACCESSIBILITY
4 DIFFERENT
RENDERING ENGINES
DIFFERENT TYPES OF
INTERACTION
DIFFERENT
RENDERING SPEEDS
DIFFERENT SIZED
SCREENS
DIFFERENT
BANDWIDTH
SPEEDS
2 MILLION VERSIONS
OF WEBKITS
DEVICE
TSUNAMI !!!!
SEO
BUT THEN IT GOT HARD!
Slide 6
Slide 6 text
@Spock1963
Star Trek is
for little girls.
ME BEFORE iPHONE
Slide 7
Slide 7 text
Negative
@HanSolo1977, Star Trek
is for grown ups!
ME AFTER iPHONE
Slide 8
Slide 8 text
AGILITY vs. ROBUSTNESS
THE PROBLEM IS
Slide 9
Slide 9 text
ACCESSIBILITY
4 DIFFERENT
RENDERING ENGINES
DIFFERENT TYPES OF
INTERACTION
DIFFERENT
RENDERING SPEEDS
DIFFERENT SIZED
SCREENS
DIFFERENT
BANDWIDTH
SPEEDS
2 MILLION VERSIONS
OF WEBKITS
DEVICE
TSUNAMI !!!!
SEO
IE7/8
Slide 10
Slide 10 text
KEY FACT: TESTING IE7/8 IS HARD TO DO
Slide 11
Slide 11 text
QUESTION: SHOULD WE EVEN SUPPORT
REALLY OLD BROWSERS?
TESTING IE7 IS HARDER THAN A WOOKIE
WEARING BOXING GLOVES TRYING TO WIPE
YOUR BOTTOM CLEAN
Slide 12
Slide 12 text
PART 2
EVERYONE’S DOING IT
MAKING A WEB PAGE IS
EASY
BUT WEB DEVELOPMENT IS
HARD
Slide 13
Slide 13 text
KEY FACT: SCALING UP USER SIZE IS COMPLEX
UBIQUITY
LESS
IMPORTANT
THAN
ACCESSIBILITY
PERFORMANCE
USABILITY
SEO FRIENDLY
NO JAVASCRIPT
RESPONSIVE
LESS
IMPORTANT
THAN
HTML5
CSS3
JAVASCRIPT
Slide 14
Slide 14 text
UBIQUITY == BROWSER SUPPORT
100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0%
iOS APP SUPPORT
WEBSITE SUPPORT
100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0%
7
8
9 6
NATIVE APP SUPPORT IS BINARY
WEB BROWSER SUPPORT IS UBIQUITOUS IF DONE RIGHT
Slide 15
Slide 15 text
AGILITY vs. ROBUSTNESS
THE PROBLEM IS
vs.
INCREASING COMPLEXITY
JAVASCRIPT
CUTTING THE MUSTARD
if (
'querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window
) {
// load JS application
Slide 20
Slide 20 text
ENHANCED EXPERIENCE
COMPLEX LAYOUT, FUNCTIONAL, MODERN BROWSERS
CORE EXPERIENCE
SIMPLE LAYOUT, FAST, ALL BROWSERS
7 8
BB OS5
(MANGO)
1.6
9 10
BB OS6+
(WEBKIT)
2.1+
GOOD ENOUGH FOR IE7/8?
Slide 21
Slide 21 text
KEY CONCEPT: LOAD ALTERNATIVE JS APP FOR LEGACY CLIENTS
if (
'querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window
) {
// load all the things
JAVASCRIPT
}
else if (
/MSIE (7|8)/.test(navigator.userAgent)
) {
// load some of the things
}
Slide 22
Slide 22 text
KEY CONCEPT: CREATE DESKTOP SPECIFIC STYLES
7 8
FROM MOBILE FIRST CSS
MOBILE FIRST, MEDIA-QUERIED CSS
IE7/8 DO NOT UNDERSTAND MEDIA QUERIES
SO RENDER STYLES WITH MOBILE VIEW
Slide 23
Slide 23 text
KEY CONCEPT: CREATE DESKTOP SPECIFIC STYLES
7 8
FROM MOBILE FIRST CSS
MOBILE FIRST, MEDIA-QUERIED CSS
USE THIS TECHNIQUE TO GIVE IE7/8 A
DESKTOP VIEW USING A CSS PRE-PROCESSOR
Slide 24
Slide 24 text
body { background: blue; }
@media screen and (max-width: 975px) {
body { background: red; }
}
@media screen and (min-width: 976px) {
body { background: green; }
}
body { background: blue; }
@media screen and (max-width: 975px) {
body { background: red; }
}
@media screen and (min-width: 976px) {
body { background: green; }
}
styles.scss
styles.css
Slide 25
Slide 25 text
body { background: blue; }
respondMinMax(false, 975px) {
body { background: red; }
}
respondMinMax(976px, false) {
body { background: green; }
}
body { background: blue; }
@media screen and (max-width: 975px) {
body { background: red; }
}
@media screen and (min-width: 976px) {
body { background: green; }
}
styles.scss
styles.css
respondMinMax()
Slide 26
Slide 26 text
body { background: blue; }
respondMinMax(false, 975px) {
body { background: red; }
}
respondMinMax(976px, false) {
body { background: green; }
}
body { background: blue; }
@media screen and (max-width: 975px) {
body { background: red; }
}
@media screen and (min-width: 976px) {
body { background: green; }
}
styles.scss
styles.css
respondMinMax()
$fix-mqs: 1024px;
legacy-ie.scss
Slide 27
Slide 27 text
body { background: blue; }
respondMinMax(false, 975px) {
body { background: red; }
}
respondMinMax(976px, false) {
body { background: green; }
}
body { background: blue; }
@media screen and (max-width: 975px) {
body { background: red; }
}
@media screen and (min-width: 976px) {
body { background: green; }
}
styles.scss
styles.css
respondMinMax()
$fix-mqs: 1024px;
legacy-ie.scss
@import "styles";
Slide 28
Slide 28 text
body { background: blue; }
respondMinMax(false, 975px) {
body { background: red; }
}
respondMinMax(976px, false) {
body { background: green; }
}
body { background: blue; }
@media screen and (max-width: 975px) {
body { background: red; }
}
@media screen and (min-width: 976px) {
body { background: green; }
}
styles.scss
styles.css
respondMinMax()
$fix-mqs: 1024px;
legacy-ie.scss
body { background: blue; }
body { background: green; }
legacy-ie.css
@import "styles";
Slide 29
Slide 29 text
ALL INTERNET EXPLORER
EVERYTHING ELSE
LESS THAN OR EQUAL TO 8
Slide 30
Slide 30 text
BE CAREFUL WITH MODERN CSS
SOME STYLES IN IE7/8 WILL RENDER FUNNY LIKE
CSS3 SELECTORS IE7/8
BOX MODEL IE7
PSEUDO ELEMENTS IE7
Z-INDEX IE7/8
OPACITY (USE IE FILTER)
DONALD TRUMP’S HAIR RENDERS ON HIS HEAD
Slide 31
Slide 31 text
HOW DO YOU SUPPORT
LEGACY CLIENTS?
SO...
Slide 32
Slide 32 text
THE PROBLEM WILL GET TO YOU
STOP MAKING EVER MORE
COMPLEX SOLUTIONS
Slide 33
Slide 33 text
PROGRESSIVE
ENHANCEMENT
JAVASCRIPT
SUPPORT LEGACY BROWSERS FROM THE START
AND ENHANCE USING JAVASCRIPT
Slide 34
Slide 34 text
I’m sorry
IE7/8, you’re too old to
go down to the planet
“Eros 69” with the rest
of us
IE7/8
IE9
IE10
IE11
USE JAVASCRIPT TO DECIDE WHEN TO SUPPORT
LEGACY BROWSERS