Cutting The Mustard: Future Friendly Browser Support

Cutting The Mustard: Future Friendly Browser Support

BBC News shows you how to keep your browser support future friendly by using progressive enhancement.

2b3837af1d68d0b71639e693c780386f?s=128

Tom Maslen

March 05, 2013
Tweet

Transcript

  1. CUTTING THE MUSTARD FUTURE FRIENDLY BROWSER SUPPORT

  2. YOU WERE EXPECTING ANDY CLARKE...

  3. ... BUT YOU GOT TOM MASLEN INSTEAD

  4. WE’RE BOTH FROM CORBY

  5. PRE NOVEMBER 2012 CORBY MOST FAMOUS FOR: LOUISE MENSCH

  6. POST NOVEMBER 2012 CORBY MOST FAMOUS FOR: MIAS FAST FOOD

  7. LET’S TALK ABOUT BROWSER SUPPORT THIS WILL SHOW YOU HOW

    BBC NEWS KEEPS ITS WEB BROWSER SUPPORT FUTURE FRIENDLY IN THE NEW AGE OF DEVICE DIVERSITY
  8. BBC HAS A STANDARD FOR THIS

  9. APOLOGIES FOR IT BEING OUT OF DATE

  10. OBJECTIVES OF BROWSER SUPPORT: “Licence fee payers use a variety

    of web browsers. The BBC aims to provide the best possible experience to the largest number of people.” “All license fee payers are considered to be valuable.” “Some licence fee payers do not have the choice of using a popular, modern web browser.”
  11. BEFORE DEVICE DIVERSITY LEVEL 1 • ALL CONTENT MUST WORK

    • MINIMUM VARIATIONS IN STYLE LEVEL 2 • ALL CORE CONTENT MUST WORK • DEGRADATION MUST BE GRACEFUL LEVEL 3 • UNSUPPORTED
  12. PREMIUM EXPERIENCE NOT RUBBISH NOT SUPPORTED GRACEFUL DEGRADATION • 13

    LEVEL 1 BROWSERS TO TEST • EASY TO TEST • FREE • NOT COMPLICATED BEFORE DEVICE DIVERSITY:
  13. AFTER DEVICE DIVERSITY NOW THERE ARE EVEN MORE BROWSERS ...

  14. AFTER DEVICE DIVERSITY ... AND MANY MORE DEVICES ...

  15. BROADBAND GPRS EDGE 3G 4G AFTER DEVICE DIVERSITY ... CONNECTING

    TO WWW IN MANY WAYS
  16. CHROMEBOOK PIXEL EPITOMISES THE PROBLEM HI DEF SCREEN TOUCH MOBILE

    CONNECTION AFTER DEVICE DIVERSITY
  17. MONEY TIME IQ POINTS DEVICE DIVERSITY REQUIRES MORE

  18. INCREASED COMPLEXITY INCREASES SADNESS

  19. HOW DO WE SUPPORT EVERYTHING? GET READY TO FIGHT...

  20. SHOW ME YOUR FIGHT FACE

  21. SHOW ME YOUR FIGHT FACE

  22. SHOW ME YOUR FIGHT FACE

  23. FUTURE FRIENDLY BROWSER SUPPORT IN 3 STEPS

  24. PRO TIP: IT’S NOT A PHONE, IT’S A COMPUTER STOP

    THINKING ABOUT DEVICES START THINKING ABOUT BROWSERS
  25. INSTALLABLE BROWSERS INSTALLABLE BROWSERS

  26. STEP 1 BUILD A SIMPLE WEBPAGE LINK TO MOST READ

    PAGE
  27. <article> <div class=”article”> <a href=”story.html”> <div class=”delayed-image-load” data-src=”/images/204/picture.jpg” /> <span>Banks

    pay for ‘swap’ mis- selling</span> </a> <p>Four banks are to compensate...</p> </div> </article> STEP 1 BUILD A SIMPLE WEBPAGE .article { ... } .article span { ... } .article p { ... } HTML4 HTML5 CSS2
  28. BRAD PITT (STAR OF “RESPONSIVE BASTERDS”) GOOD PERFORMANCE IS GOOD

    WEB DESIGN
  29. ENHANCED EXPERIENCE - MODERN BROWSERS - COMPLEX LAYOUT - FUNCTIONAL

    CORE EXPERIENCE - ALL BROWSERS - SIMPLE LAYOUT - FAST 7 8 BB OS5 (MANGO) 1.6 9 10 BB OS6+ (WEBKIT) 2.1+ STEP 2 CONDITIONALLY LOAD JS APP
  30. JS APP GETS VIDEO

  31. JS APP GETS INTERACTIVE INFOGRAPHICS

  32. if ( ) { JAVASCRIPT 'querySelector' in document && 'localStorage'

    in window && 'addEventListener' in window WE CHECK FOR THESE CAPABILITIES TO DETERMINE IF BROWSER IS WORTH GIVING JAVASCRIPT TO
  33. WE CALL THIS “CUTTING THE MUSTARD”

  34. ENHANCED EXPERIENCE - MODERN BROWSERS - COMPLEX LAYOUT - FUNCTIONAL

    CORE EXPERIENCE - ALL BROWSERS - SIMPLE LAYOUT - FAST 7 8 BB OS5 (MANGO) 1.6 9 10 BB OS6+ (WEBKIT) 2.1+ PRO TIP: BUZZ WORDS CAN HELP HTML 4 BROWSERS HTML 5 BROWSERS
  35. DOESN’T UNDERSTAND “PROGRESSIVE ENHANCEMENT” I DON’T GET IT

  36. COMPREHENDS FEATURES THAT ARE “ONLY FOR HTML5 BROWSERS” I LOVE

    IT!
  37. I BLAME THIS ON MARKETING ARTICLES...

  38. ... WHICH SHOULD REALLY SAY THIS INSTEAD

  39. STEP 2 CONDITIONALLY LOAD JS APP WORKING TABS

  40. STEP 2 CONDITIONALLY LOAD JS APP WEATHER WIDGET

  41. .story-list::before { ... } .top-stories article:first-child { ... } #site-nav-panel

    h2 + ul li:first-child { ... } STEP 3 ADD CSS3 HTML5 BROWSERS *LOVE* CSS3!
  42. MULTI-COLOURED ICON FONTS!!! PRO TIP: GO MENTAL (PROGRESSIVELY)

  43. PREMIUM EXPERIENCE NOT RUBBISH NOT SUPPORTED GRACEFUL DEGRADATION PROGRESSIVE ENHANCEMENT

    PREMIUM EXPERIENCE CORE EXPERIENCE CUTS THE MUSTARD OLD NEW
  44. YESTERDAY 7 8 BB OS5 (MANGO) 1.6 TOMORROW 11 29

    69 iOS 8 TODAY 10 BB OS6+ (WEBKIT) 2.1+ iOS 6 9 DRAWING A LINE BETWEEN YESTERDAY & TODAY IS ONLY WAY WE CAN STAY FUTURE FRIENDLY
  45. YOU NEVER KNOW WHAT YOUR USER’S EXPERIENCE IS GOING TO

    BE RESPONSIVE WEB DESIGN