Rocket packs on escalators - stop messing with progressive enhancement
•
17 likes•5,120 views
One of the never-ending debates of web development surrounds the concept of progressive enhancement vs. graceful degradation. With our increased complexity of technology the excuse “but we build apps” keeps thrown around to make our products dependent on many technology layers. The other side of the argument keeps accusing others of breaking the web. Fact is, progressive enhancement is your friend, and it is not that hard to apply it sensibly. In this talk Chris Heilmann of Microsoft will try to ease our confusion and un-block some loggerhead debates. We build things for people and developer convenience should never trump user experience.
Report
Share
Rocket packs on escalators - stop messing with progressive enhancement
- 1. ROCKET PACKS ON ESCALATORS CHRIS HEILMANN (@CODEPO8), AT THE FRONTEND 2015, COPENHAGEN Stop messing with Progressive Enhancement
- 2. MITCH HEDBERG An escalator can never break – it can only become stairs. You would never see an “Escalator Temporarily Out Of Order” sign, just “Escalator Temporarily Stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.”
- 3. A PERFECT SIMILE FOR PROGRESSIVE ENHANCEMENT ON THE WEB. christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
- 4. PROGRESSIVE ENHANCEMENT IS A HOT TOPIC AGAIN… Crippling the Web http://timkadlec.com/2013/07/crippling- the-web/ The True Cost of Progressive Enhancement https://medium.com/@AaronGustafson/ the-true-cost-of-progressive- enhancement-d395b6502979 The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement http://www.sitepoint.com/javascript- dependency-backlash-myth-busting- progressive-enhancement/ Progressive enhancement is still important http://jakearchibald.com/2013/ progressive-enhancement-still-important/
- 5. THE DISCUSSION RAGES ON ABOUT ALL KIND OF THINGS… • Frameworks and their dependency on scripting (Angular) • “Aren’t all our users using modern browsers?” • “Do we still have to care about old browsers in a mobile age?” • “Shouldn’t we be able to build things faster?”
- 6. ALL OF THIS IS IMPORTANT… …AND ISN’T ABOUT PROGRESSIVE ENHANCEMENT
- 7. PROGRESSIVE ENHANCEMENT IN A NUTSHELL: USE TECHNOLOGY TO ENHANCE WORKING SOLUTIONS WHEN AND IF THE ENHANCEMENTS CAN BE APPLIED.
- 8. IN OTHER WORDS… • Build on a solid foundation • Jump into the lake after checking it is deep enough • Enhance to add convenience
- 10. WHY THE WHEEL?
- 12. AS DEVELOPERS, WE ALWAYS WANT TO LEAP-FROG AHEAD AND INNOVATE. Photo by BiblioArchives / LibraryArchives https://www.flickr.com/photos/28853433@N02/6347652875/
- 13. AND WHEN WE CAN’T, WE FIND SCAPEGOATS. • Browsers don’t give us what we need • Users have outdated environments • Standards take too long • The languages of the web aren’t good enough • Framework $x makes me much more effective and it needs JavaScript!
- 14. ALL OF THIS IS TRUE AND THERE IS NOTHING YOU CAN DO ABOUT IT.
- 15. USERS DON’T HAVE OUTDATED ENVIRONMENTS OR TURNED OFF SCRIPTING BECAUSE THEY HATE YOU.
- 16. WHAT WE SEE A GIVEN AS DEVELOPERS, IS NOT AS RELIABLE AS WE CONSIDER IT TO BE.
- 22. WHEN YOU WORK ON THE WEB, YOU ARE WORKING IN THE UNKNOWN… "The Web is the most hostile software engineering environment imaginable." - Douglas Crockford
- 23. SO, CAN WE PLEASE JUST DEAL WITH THE FACT THAT WE CAN’T AND SHOULDN’T CONTROL OUR AUDIENCE’S ENVIRONMENTS?
- 24. PROGRESSIVE ENHANCEMENT IS NOT ABOUT… • Catering to old browsers • JavaScript in/dependence • Apps vs. Web • Us developers
- 25. PROGRESSIVE ENHANCEMENT IS ABOUT DELIVERING A GREAT SERVICE TO THE USERS OF NOW AND TOMORROW
- 26. LET’S LOOK AT ANOTHER REAL-LIFE EXAMPLE. People at airports are stressed, confused, don’t pay attention to things, eat badly and are not always feeling good. They are tired, they feel rushed and they want just to get things over with and get where they want to go. Others – those new to travel – are overly excited about everything and want to things right, making mistakes because they are too eager. Exactly what users on the web are like. http://christianheilmann.com/2015/05/24/the-ryanair-approach-to-progressive-enhancement/
- 27. WHAT YOU TAKES TO FLY • Ticket confirmation number • Origin airport • Destination airport • Proof that you are you
- 28. WHAT YOU WANT IS A BOARDING PASS! Photo by mroach https://www.flickr.com/photos/mroach/4659815616/
- 29. CHECK-IN COUNTERS Photo by Daniel Incandela https://www.flickr.com/photos/50378660@N00/3788243443/
- 30. + — CHECK-IN COUNTERS… • Need staffing • Are time-consuming • Are expensive for the company (need trained staff) • Don’t scale well (causing queues) • Provide a knowledgable human being to talk to • Have up-to-date information • Allows for dropping luggage • Gives a human interaction (no need to feel stupid) • Offer flexibility on error
- 31. WHAT YOU WANT TO AVOID IS QUEUES! Photo by James Emery https://www.flickr.com/photos/emeryjl/520109861/
- 33. + — SELF-SERVICE TICKET MACHINES • Not fault tolerant • No up-to-date information • Can appear intimidating • Lack a sense of accompllishment • Prevent queues • Great offer for power users • Allow for multi-airline use • Prevent unneccessary printouts
- 34. ONLINE CHECK-IN & MOBILE APPS
- 35. + — ONLINE CHECK-IN & MOBILE APPS • Needs a turned on phone with full battery (no charger on flights, phone needs turning off) • Needs a reader at the airport gate • Might clash with TSA regulations (need to carry boarding pass whilst X-Ray of phone) • No need to queue at all • Up-to-date information • Easy to track past and future travels • Reminders, notifications, etc…
- 36. GREAT AIRLINES OFFER FALLBACKS AND REWARD YOU FOR USING THE APP.
- 37. SELFISH AIRLINES DEMAND YOU TO USE THE APP, OR CHARGE FOR BOARDING PASS PRINTOUTS.
- 38. DON’T BE A SELFISH AIRLINE!
- 40. PROGRESSIVE ENHANCEMENT PROTECTS THE BASIC BUSINESS CASE OF YOUR PRODUCT…
- 41. THIS IS GOOGLE WITHOUT CSS…
- 42. THIS IS GOOGLE WITHOUT CSS…
- 43. IT WORKS, AND IT EVEN GETS BETTER!
- 45. XHTML WAS CONSIDERED EVIL, AS ONE MISTAKE OF THE DEVELOPER MEANS THE SITE WOULDN’T RENDER. HTML5 FIXED THAT.
- 46. HTML AND CSS ARE DESIGNED TO BE FAULT TOLERANT. https://adactio.com/journal/4272
- 47. JAVASCRIPT IS NOT FAULT TOLERANT.
- 48. CAPABILITY TESTING MEANS YOU NEVER DELIVER BROKEN EXPERIENCES.
- 52. TESTING FEATURES, DELIVERING WIN. https://featuretests.io/
- 53. LET’S GET READY FOR THE NEXT NEW THING
- 54. FRANKLY, I AM GETTING TIRED OF THIS… LET’S LIBERATE US FROM BROWSER SUPPORT ISSUES
- 55. LET’S STOP THE RAT-RACE AND CONCENTRATE ON BUILDING WORKING, STURDY SOLUTIONS.
- 56. ENJOY WHAT BROWSERS CAN DO WHEN YOU TEST FOR CAPABILITIES… http://caniuse.com
- 57. BROWSERS CAN’T GET BETTER IF WE NEED TO CATER TO OLD MISTAKES…
- 58. BUT WE CAN GET BETTER IF WE FOCUS ON DELIVERING WORKING SOLUTIONS TO OUR USERS…
- 59. CHECK-IN COUNTERS SELF-SERVICE TICKET MACHINE MOBILE APP STATIC VERSION OF THE PRODUCT USING HTML+CSS (TOTALLY FINE TO CREATE WITH NODE.JS) PROGRESSIVELY ENHANCED WITH JS AND CAPABILITY TESTING HIGH END SOLUTION FOR MOST CAPABLE ENVIRONMENTS. HYBRID APP, USING MANIFOLD.JS / PHONEGAP?
- 60. AS WE LIVE IN A VIRTUAL ENVIRONMENT, WE HAVE NO HARDWARE COST LIKE AIRPORTS DO.
- 61. ALL WE NEED TO PUT IN IS UNDERSTANDING THE BASICS OF THE WEB AND ITS TECHNOLOGIES. https://developer.mozilla.org/
- 62. ALL YOU NEED IS HONESTY…
- 63. “We crave for new sensations but soon become indifferent to them. The wonders of yesterday are today common occurrences.” ― Nikola Tesla, My Inventions