Cutting The Mustard: Future Friendly Browser Support

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

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