Legacy Browsers: Supporting IE7/8 with Responsive Web Design

2b3837af1d68d0b71639e693c780386f?s=47 Tom Maslen
September 27, 2013

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/

2b3837af1d68d0b71639e693c780386f?s=128

Tom Maslen

September 27, 2013
Tweet

Transcript

  1. 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...
  2. 3.

    PART 1 WEB DEVELOPMENT USED TO BE EASY ME MY

    PROJECT MANAGER Don’t get excited
  3. 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!
  4. 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
  5. 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
  6. 12.

    PART 2 EVERYONE’S DOING IT MAKING A WEB PAGE IS

    EASY BUT WEB DEVELOPMENT IS HARD
  7. 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
  8. 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
  9. 17.

    CORE EXPERIENCE SIMPLE LAYOUT, FAST, ALL BROWSERS 7 8 BB

    OS5 (MANGO) 1.6 9 10 BB OS6+ (WEBKIT) 2.1+
  10. 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+
  11. 19.

    JAVASCRIPT CUTTING THE MUSTARD if ( 'querySelector' in document &&

    'localStorage' in window && 'addEventListener' in window ) { // load JS application
  12. 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?
  13. 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 }
  14. 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
  15. 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
  16. 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
  17. 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()
  18. 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
  19. 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";
  20. 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";
  21. 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
  22. 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
  23. 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