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