Web is Flux

The amount of control that we as a community exercise on the web is unfortunate. The web is far more flexible and inclusive than we believe it to be. The objective of this talk is to appreciate the beauty of the web and understand why we should adopt (and encourage) practices that uphold the spirit of the web.

Transcript

1. Web is Flux
   

   View Slide

2. @souvikdg
   

   View Slide

3. View Slide

4. Hi!
   

   View Slide

5. View Slide

6. My rst exposure to
   HTML was as a 7th grader.
   

   View Slide

7. IE5, Netscape
   

   View Slide

8. ,
   

   View Slide

9. Tim Berners-Lee, 1989
   

   View Slide

10. ~25 years
    

    View Slide

11. Have you ever wondered
    how has it managed to
    survive so long, and also
    improve over time?
    

    View Slide

12. Principles
    

    View Slide

13. Principle of Least Power
    

    View Slide

14. Tim Bernes-Lee
    Computer Science spent the last forty years
    making languages which were as powerful
    as possible.
    Nowadays we have to appreciate the
    reasons for picking not the most powerful
    solution but the least powerful. e less
    powerful the language, the more you can
    do with the data stored in that language.
    

    View Slide

15. HTML is forwards compatible.
    It has healthy fallbacks for
    things it doesn’t know yet.
    

    View Slide

16. As a result of many such
    excellent design principles…
    

    View Slide

17. 824*
    di erent ways to connect to the web
    

    View Slide

18. 7,063*
    kinds of web browsers access the web
    

    View Slide

19. 432,102*
    kinds of devices access the web
    

    View Slide

20. 1,180*
    di erently sized screens access the web
    

    View Slide

21. *cooked up facts
    

    View Slide

22. However, the
    point still stands.
    

    View Slide

23. Web is everywhere,
    and in many ways
    we’re dependent on it.
    

    View Slide

24. View Slide

25. e clients are fragmented
    — a side e ect of ubiquity
    

    View Slide

26. How did we deal with this?
    

    View Slide

27. For a long time by
    Graceful Degradation
    

    View Slide

28. is site is best viewed
    on IE6 at 800×600.
    

    View Slide

29. Today?
    

    View Slide

30. BrowserStack claims to have
    300+ browser versions.
    

    View Slide

31. In 2011 there were
    20+ mobile browsers.
    http://www.quirksmode.org/presentations/USTourApril11/albany.pdf
    

    View Slide

32. How long can we
    continue doing
    things that way?
    

    View Slide

33. Looks are deceiving.
    

    View Slide

34. Because the web is tolerant,
    you can make any code
    “look” good on your
    preferred web browser.
    

    View Slide

35. Are we catering to
    just web browsers?
    

    View Slide

36. A whole bunch of services
    consume our websites —
    read-it-later, accessibility
    tools, search bots…
    

    View Slide

37. http://futurefriendlyweb.com
    Disruption will only accelerate. e
    quantity and diversity of connected
    devices—many of which we haven't
    imagined yet—will explode, as will
    the quantity and diversity of the
    people around the world who use
    them.
    

    View Slide

38. Fads will die,
    and new ones will be born.
    

    View Slide

39. :/
    SEO
    

    View Slide

40. :/
    Mobile is in
    

    View Slide

41. “Inclusive Web Design
    For the Future”
    Steve Champeon and Nick Finck, 2003
    

    View Slide

42. Progressive
    Enhancement
    

    View Slide

43. Content
    

    View Slide

44. Content
    HTML
    

    View Slide

45. Content
    HTML
    CSS
    

    View Slide

46. Content
    HTML
    CSS
    JS
    

    View Slide

47. People who are on basic
    browsers get a base experience,
    those on newer browsers get an
    enhanced experience.
    

    View Slide

48. No one’s excluded.
    

    View Slide

49. Christian Heilmann
    I am always amazed about the lack
    of support for progressive
    enhancement on the web.
    Whenever you mention it, you face
    a lot of “yeah, but…” and you feel
    having to defend something that
    should be ingrained in the DNA of
    anyone who works on the web.
    

    View Slide

50. :/
    We know our customers.
    

    View Slide

51. :/
    No one uses that browser.
    

    View Slide

52. :/
    We build enterprise apps.
    

    View Slide

53. :/
    But that’s too much work.
    

    View Slide

54. :/
    Move fast, break things.
    

    View Slide

55. :/
    We make “web apps”
    

    View Slide

56. :/
    Who has Javascript
    disabled anyways?
    

    View Slide

57. :/
    Relying on Javascript is not a
    problem for us. Today no one
    can complete an online
    transaction without
    Javascript anyways.”
    “
    

    View Slide

58. Dependence on
    Javascript
    is a mistake.
    

    View Slide

59. “Shoot this idiot down!”
    

    View Slide

60. Javascript can make your
    application a super-hero…
    

    View Slide

61. …but even
    Superman
    has legs
    http://www. ickr.com/photos/hajagosb/6264235487/
    

    View Slide

62. @andyhume
    Progressive enhancement is more
    about dealing with technology
    failing than technology not
    being supported.
    And you can quote me on that.
    

    View Slide

63. @GnrlMxms
    Most bugs I deal with on a
    daily basis are caused by some
    JavaScript library or the other
    randomly breaking :/
    

    View Slide

64. http://www. ickr.com/photos/vpickering/8777968566/
    

    View Slide

65. Q: Are we not encouraging
    people to continue using old
    browsers by supporting
    absence of Javascript?
    

    View Slide

66. People don’t use old
    browsers out of choice, and
    it is far more important for
    a website to ful l its
    purpose/promise.
    

    View Slide

67. In July 2013, there was a lot
    of discussion on the web
    about the relevance of
    progressive enhancement.
    

    View Slide

68. Some people have
    inaccurate notions.
    

    View Slide

69. Progressive enhancement is
    not about making websites
    for the most basic systems.
    It’s about starting with the
    most basic systems in mind.
    

    View Slide

70. So no one’s asking you to
    not use Javascript.
    

    View Slide

71. Brad Frost
    ere is a di erence between
    support and optimization.
    

    View Slide

72. :/
    Our product should look
    the same everywhere.
    

    View Slide

73. It’s okay if a website looks
    di erent on di erent browsers.
    

    View Slide

74. We write code that
    run on client systems.
    

    View Slide

75. We shouldn’t ignore
    the known unknowns.
    

    View Slide

76. If we start listing the known
    unknowns, we’ll almost
    immediately start feeling
    helpless about the situation.
    

    View Slide

77. e thought of not
    being in control is scary.
    

    View Slide

78. How can you control
    something that is
    changing all the time?
    

    View Slide

79. Don’t control it, embrace it.
    

    View Slide

80. John Allsopp
    A Dao of Web Design
    e control which designers know
    in the print medium, and o en
    desire in the web medium, is simply
    a function of the limitation of the
    printed page. We should embrace
    the fact that the web doesn’t have
    the same constraints, and design for
    this exibility.
    

    View Slide

81. Je Bezos
    Find the things that won’t
    change in your business and
    invest heavily in those things.
    

    View Slide

82. Focus on functionality and
    content out design.
    

    View Slide

83. Uphold the core
    principles of web.
    

    View Slide

84. @lukew
    Perhaps ironically the more
    backwards compatible your
    web site is, the more future
    friendly it is.
    

    View Slide

85. Don’t be fad-friendly.
    Be web-friendly.
    

    View Slide

86. e web is an
    amazing platform.
    

    View Slide

87. “ e Power of Simplicity”
    Jeremy Keith
    border:none 2013
    

    View Slide

88. http://www. ickr.com/photos/theenmoy/9356165709/
    

    View Slide

89. e web is an
    amazing platform.
    

    View Slide

90. e web is an
    amazing stack.
    

    View Slide

91. e web is an
    amazing medium.
    

    View Slide

92. e state of web keeps going
    through continuous change.
    

    View Slide

93. Web is Flux
    

    View Slide

94. Web is Flux
    

    View Slide