Legacy Browsers: Supporting IE7/8 with Responsive Web Design

How do we support legacy browsers with responsive web design? Tom Maslen from BBC News introduces the problem for the panel discussion "Legacy Browsers" from Edgeconf NY 2013 http://edgeconf.com/2013-nyc/

Transcript

1. LEGACY CLIENTS BY TOM MASLEN, BBC NEWS
2. 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...
3. PART 1 WEB DEVELOPMENT USED TO BE EASY ME MY PROJECT MANAGER Don’t get excited
4. ACCESSIBILITY 4 DIFFERENT RENDERING ENGINES SEO REALLY EASY!
5. 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!
6. @Spock1963 Star Trek is for little girls. ME BEFORE iPHONE
7. Negative @HanSolo1977, Star Trek is for grown ups! ME AFTER iPHONE
8. AGILITY vs. ROBUSTNESS THE PROBLEM IS
9. 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
10. KEY FACT: TESTING IE7/8 IS HARD TO DO
11. QUESTION: SHOULD WE EVEN SUPPORT REALLY OLD BROWSERS? TESTING IE7 IS HARDER THAN A WOOKIE WEARING BOXING GLOVES TRYING TO WIPE YOUR BOTTOM CLEAN
12. PART 2 EVERYONE’S DOING IT MAKING A WEB PAGE IS EASY BUT WEB DEVELOPMENT IS HARD
13. 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
14. 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
15. AGILITY vs. ROBUSTNESS THE PROBLEM IS vs. INCREASING COMPLEXITY
16. PART 3 SUPPORTING ALL THE THINGS
17. CORE EXPERIENCE SIMPLE LAYOUT, FAST, ALL BROWSERS 7 8 BB OS5 (MANGO) 1.6 9 10 BB OS6+ (WEBKIT) 2.1+
18. 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+
19. JAVASCRIPT CUTTING THE MUSTARD if ( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window ) { // load JS application
20. 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?
21. 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 }
22. 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
23. 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
24. 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
25. 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()
26. 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
27. 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";
28. 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";
29. ALL INTERNET EXPLORER <!--[if lte IE 8]> <link href=”legacy-ie.css” /> <![endif]--> <!--[if gt IE 8]><!--> <link href=”styles.css” /> <!--<![endif]--> EVERYTHING ELSE LESS THAN OR EQUAL TO 8
30. 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
31. HOW DO YOU SUPPORT LEGACY CLIENTS? SO...
32. THE PROBLEM WILL GET TO YOU STOP MAKING EVER MORE COMPLEX SOLUTIONS
33. PROGRESSIVE ENHANCEMENT JAVASCRIPT SUPPORT LEGACY BROWSERS FROM THE START AND ENHANCE USING JAVASCRIPT
34. 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
35. LET THE PANEL BEGIN!