$30 off During Our Annual Pro Sale. View Details »

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.

Tom Maslen

March 05, 2013
Tweet

More Decks by Tom Maslen

Other Decks in Technology

Transcript

  1. CUTTING THE MUSTARD
    FUTURE FRIENDLY BROWSER SUPPORT

    View Slide

  2. YOU WERE EXPECTING ANDY CLARKE...

    View Slide

  3. ... BUT YOU GOT TOM MASLEN INSTEAD

    View Slide

  4. WE’RE BOTH FROM CORBY

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  8. BBC HAS A STANDARD FOR THIS

    View Slide

  9. APOLOGIES FOR IT BEING OUT OF DATE

    View Slide

  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.”

    View Slide

  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

    View Slide

  12. PREMIUM
    EXPERIENCE
    NOT
    RUBBISH
    NOT
    SUPPORTED
    GRACEFUL DEGRADATION
    • 13 LEVEL 1
    BROWSERS TO TEST
    • EASY TO TEST
    • FREE
    • NOT COMPLICATED
    BEFORE DEVICE DIVERSITY:

    View Slide

  13. AFTER DEVICE DIVERSITY
    NOW THERE ARE EVEN MORE BROWSERS ...

    View Slide

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

    View Slide

  15. BROADBAND
    GPRS EDGE 3G 4G
    AFTER DEVICE DIVERSITY
    ... CONNECTING TO WWW IN MANY WAYS

    View Slide

  16. CHROMEBOOK PIXEL EPITOMISES THE PROBLEM
    HI DEF SCREEN TOUCH MOBILE CONNECTION
    AFTER DEVICE DIVERSITY

    View Slide

  17. MONEY
    TIME
    IQ POINTS
    DEVICE DIVERSITY REQUIRES MORE

    View Slide

  18. INCREASED COMPLEXITY INCREASES SADNESS

    View Slide

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

    View Slide

  20. SHOW ME YOUR FIGHT FACE

    View Slide

  21. SHOW ME YOUR FIGHT FACE

    View Slide

  22. SHOW ME YOUR FIGHT FACE

    View Slide

  23. FUTURE FRIENDLY
    BROWSER SUPPORT
    IN 3 STEPS

    View Slide

  24. PRO TIP: IT’S NOT A PHONE, IT’S A COMPUTER
    STOP
    THINKING ABOUT
    DEVICES
    START
    THINKING ABOUT
    BROWSERS

    View Slide

  25. INSTALLABLE
    BROWSERS
    INSTALLABLE
    BROWSERS

    View Slide

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

    View Slide




  27. data-src=”/images/204/picture.jpg” />
    Banks pay for ‘swap’ mis-
    selling

    Four banks are to compensate...


    STEP 1 BUILD A SIMPLE WEBPAGE
    .article { ... }
    .article span { ... }
    .article p { ... }
    HTML4
    HTML5
    CSS2

    View Slide

  28. BRAD PITT (STAR OF “RESPONSIVE BASTERDS”)
    GOOD PERFORMANCE
    IS
    GOOD WEB DESIGN

    View Slide

  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

    View Slide

  30. JS APP GETS VIDEO

    View Slide

  31. JS APP GETS INTERACTIVE INFOGRAPHICS

    View Slide

  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

    View Slide

  33. WE CALL THIS “CUTTING THE MUSTARD”

    View Slide

  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

    View Slide

  35. DOESN’T UNDERSTAND
    “PROGRESSIVE ENHANCEMENT”
    I DON’T
    GET IT

    View Slide

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

    View Slide

  37. I BLAME THIS ON MARKETING ARTICLES...

    View Slide

  38. ... WHICH SHOULD REALLY SAY THIS INSTEAD

    View Slide

  39. STEP 2 CONDITIONALLY LOAD JS APP
    WORKING TABS

    View Slide

  40. STEP 2 CONDITIONALLY LOAD JS APP
    WEATHER WIDGET

    View Slide

  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!

    View Slide

  42. MULTI-COLOURED
    ICON FONTS!!!
    PRO TIP: GO MENTAL (PROGRESSIVELY)

    View Slide

  43. PREMIUM
    EXPERIENCE
    NOT
    RUBBISH
    NOT
    SUPPORTED
    GRACEFUL
    DEGRADATION
    PROGRESSIVE
    ENHANCEMENT
    PREMIUM
    EXPERIENCE
    CORE
    EXPERIENCE
    CUTS THE MUSTARD
    OLD NEW

    View Slide

  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

    View Slide

  45. YOU NEVER KNOW WHAT YOUR
    USER’S EXPERIENCE IS GOING TO BE
    RESPONSIVE WEB DESIGN

    View Slide