Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web is Flux

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.

Souvik Das Gupta

February 14, 2014
Tweet

More Decks by Souvik Das Gupta

Other Decks in Technology

Transcript

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

    View full-size slide

  2. IE5, Netscape

    View full-size slide

  3. Tim Berners-Lee, 1989

    View full-size slide

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

    View full-size slide

  5. Principle of Least Power

    View full-size slide

  6. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. *cooked up facts

    View full-size slide

  14. However, the
    point still stands.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. How did we deal with this?

    View full-size slide

  18. For a long time by
    Graceful Degradation

    View full-size slide

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

    View full-size slide

  20. BrowserStack claims to have
    300+ browser versions.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Looks are deceiving.

    View full-size slide

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

    View full-size slide

  25. Are we catering to
    just web browsers?

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide

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

    View full-size slide

  29. :/
    Mobile is in

    View full-size slide

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

    View full-size slide

  31. Progressive
    Enhancement

    View full-size slide

  32. Content
    HTML
    CSS

    View full-size slide

  33. Content
    HTML
    CSS
    JS

    View full-size slide

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

    View full-size slide

  35. No one’s excluded.

    View full-size slide

  36. 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 full-size slide

  37. :/
    We know our customers.

    View full-size slide

  38. :/
    No one uses that browser.

    View full-size slide

  39. :/
    We build enterprise apps.

    View full-size slide

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

    View full-size slide

  41. :/
    Move fast, break things.

    View full-size slide

  42. :/
    We make “web apps”

    View full-size slide

  43. :/
    Who has Javascript
    disabled anyways?

    View full-size slide

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

    View full-size slide

  45. Dependence on
    Javascript
    is a mistake.

    View full-size slide

  46. “Shoot this idiot down!”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. 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 full-size slide

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

    View full-size slide

  55. Some people have
    inaccurate notions.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. We write code that
    run on client systems.

    View full-size slide

  62. We shouldn’t ignore
    the known unknowns.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. Don’t control it, embrace it.

    View full-size slide

  67. 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 full-size slide

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

    View full-size slide

  69. Focus on functionality and
    content out design.

    View full-size slide

  70. Uphold the core
    principles of web.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  73. e web is an
    amazing platform.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  76. e web is an
    amazing platform.

    View full-size slide

  77. e web is an
    amazing stack.

    View full-size slide

  78. e web is an
    amazing medium.

    View full-size slide

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

    View full-size slide