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.

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

9. OMG! SELF-DRIVING CAR!

10. WHY THE WHEEL?

11. CREEPY TECHNOLOGY

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.

17. http://kryogenix.org/code/browser/everyonehasjs.html

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/

32. http://fr.wikipedia.org/wiki/Air_France#/media/File:Air_France_E-Checkin.jpg
SELF-SERVICE TICKET MACHINES

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!

39. HOW
PROGRESSIVE
ENHANCEMENT
WORKS FOR YOU!

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!

44. USING
PROGRESSIVE
ENHANCEMENT IS
WRITING TRULY
WEB-NATIVE CODE!

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.

49. “CUTTING THE MUSTARD”
https://justmarkup.com/log/2015/02/26/cut-the-mustard-revisited/

50. SETTING YOUR BASELINE…

51. EXTENDING THE BASELINE

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

64. Chris Heilmann
christianheilmann.com
@codepo8
THANKS!