Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cutting The Mustard: Future Friendly Browser Su...

Cutting The Mustard: Future Friendly Browser Support

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

Tom Maslen

March 05, 2013
Tweet

More Decks by Tom Maslen

Other Decks in Technology

Transcript

  1. 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
  2. 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.”
  3. 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
  4. PREMIUM EXPERIENCE NOT RUBBISH NOT SUPPORTED GRACEFUL DEGRADATION • 13

    LEVEL 1 BROWSERS TO TEST • EASY TO TEST • FREE • NOT COMPLICATED BEFORE DEVICE DIVERSITY:
  5. PRO TIP: IT’S NOT A PHONE, IT’S A COMPUTER STOP

    THINKING ABOUT DEVICES START THINKING ABOUT BROWSERS
  6. <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
  7. 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
  8. 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
  9. 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
  10. .story-list::before { ... } .top-stories article:first-child { ... } #site-nav-panel

    h2 + ul li:first-child { ... } STEP 3 ADD CSS3 HTML5 BROWSERS *LOVE* CSS3!
  11. PREMIUM EXPERIENCE NOT RUBBISH NOT SUPPORTED GRACEFUL DEGRADATION PROGRESSIVE ENHANCEMENT

    PREMIUM EXPERIENCE CORE EXPERIENCE CUTS THE MUSTARD OLD NEW
  12. 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