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

Breaking The Broken Web

Breaking The Broken Web

The web is broken. We have to break it to fix it.

Kyle Simpson
PRO

September 17, 2015
Tweet

More Decks by Kyle Simpson

Other Decks in Programming

Transcript

  1. breaking the broken web
    kyle simpson @getify

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. broken by
    decision

    View Slide

  8. romantic but
    impractical
    backwards
    compatibility

    View Slide

  9. tech hacks

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. the web is
    broken

    View Slide

  18. and we're
    determined to
    keep it that way

    View Slide

  19. View Slide

  20. do we have to?

    View Slide

  21. View Slide

  22. browser game
    theory

    View Slide

  23. View Slide

  24. @BreakWebForward

    View Slide

  25. crazy?
    already *happening!
    *sort of

    View Slide

  26. control
    characters

    View Slide

  27. many break
    the web
    forwards

    View Slide

  28. View Slide

  29. broken by
    design

    View Slide

  30. View Slide

  31. >1mb
    >$23

    View Slide

  32. WhatDoesMySiteCost.com

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. the web is
    totally
    sucked
    F
    ^we
    built

    View Slide

  41. progressive
    enhancement
    responsive
    design

    View Slide

  42. didn't go
    far enough

    View Slide

  43. feature
    tests
    broken
    assumption

    View Slide

  44. broken
    assumption
    if the device
    can do it, the
    user wants it

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. "perfection is achieved,
    not when there's
    nothing more to add,
    but when there's
    nothing left to take away"
    Antoine de Saint-Exupery

    View Slide

  50. http://www.w3.org/TR/html-design-principles/#priority-of-constituencies

    View Slide

  51. @UnsuckTheWeb

    View Slide

  52. The Unsucked Web Manifesto
    WHEREAS, the web is built on an amazing collection of features that's ever-expanding, both in
    complexity and in size of resources;
    WHEREAS, designers and developers currently exert near-complete control over the experience a
    user has on their site or web application;
    WHEREAS, designers and developers tend to design for the best experience, making assumptions of
    free, fast, unlimited bandwidth to deliver this experience to users;
    WHEREAS, user access to a lower fidelity experience is often treated as unimportant to business
    goals, and usually given the same amount of (non-)care as Accessibility concerns, which is to say
    little to none, or as older "unsupported" browsers (like IE6);
    WHEREAS, many users are often disenfranchised from this web because a site or web application is
    too big—either too costly in time to download over slow internet, or too costly in money over
    metered bandwidth, and must unfortunately therefore make a choice simply not to visit at all;
    WHEREAS, principles such as progressive enhancement and responsive design are nearly universally
    accepted among the community, but mainly only focus on device capabilities and characteristics
    instead of user choice;
    WHEREAS, we can build a web that embraces users and gives them choice over their experience;
    WE THEREFORE ASSERT the following principles of unsucked web design:
    THAT designers and developers of sites and web applications must be free to continue to adopt the
    latest and greatest web technologies as appropriate to their goals, including retina images, web
    fonts, etc.
    THAT all sites and web applications must also at a minimum provide a useful, if significantly
    limited, low fidelity version that consists variously of: HTML/text, basic styling, a few (low-
    resolution) images, etc.

    View Slide

  53. WHEREAS, principles such as progressive enhancement and responsive design are nearly universally
    accepted among the community, but mainly only focus on device capabilities and characteristics
    instead of user choice;
    WHEREAS, we can build a web that embraces users and gives them choice over their experience;
    WE THEREFORE ASSERT the following principles of unsucked web design:
    THAT designers and developers of sites and web applications must be free to continue to adopt the
    latest and greatest web technologies as appropriate to their goals, including retina images, web
    fonts, etc.
    THAT all sites and web applications must also at a minimum provide a useful, if significantly
    limited, low fidelity version that consists variously of: HTML/text, basic styling, a few (low-
    resolution) images, etc.
    THAT designers and developers of sites and web applications must begin to intentionally design
    the web inlayers, not unlike the original principles of progressive enhancement, and not
    dissimilar from breakpoints in responsive design. However, these layers of features must adapt
    not only to device capabilities, but also to user choice.
    THAT no matter how powerful a user's device may be, or how awesome its screen, designers and
    developers have to respect that a user may not want to pay the time or money for those retina
    images, web fonts, etc.
    THAT developers know how to fiddle with settings to control some aspects of this already, but
    regular non-technical users do not, and should not have to. User choice over the desired fidelity
    of experience on a site or web application must be easily expressible in the main UI of a
    browser, and must be on a per-site basis. For instance, a user may choose in loading a particular
    site between "Faster Load" or "More Features".
    THAT ultimately, if there's a conflict between a user's expressed (or default) choice of fidelity
    of experience and the experience offered or forced by the site or web application, user choice
    must take precedence. Browsers must respect the user choice and refuse to download (not just
    suppress display, as in responsive design) resources that exceed chosen fidelity.

    View Slide

  54. vision for the future
    of the web

    View Slide

  55. View Slide

  56. View Slide

  57. low
    medium
    high
    fast, please
    i'm patient
    more features!

    View Slide

  58. browsers
    must enforce

    View Slide

  59. even
    crazier?
    already *happening!
    *sort of

    View Slide

  60. Client Hints

    View Slide

  61. "RQ: low"
    Resource
    Quality

    View Slide

  62. View Slide

  63. what's our
    part?

    View Slide

  64. build in
    s

    View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. objections
    client
    budget
    too much
    work
    boss will
    say no

    View Slide

  69. build the minimal
    web experience a
    user needs
    build the best
    web experience
    you can dream up

    View Slide

  70. let the
    user decide

    View Slide

  71. break from the web of the past
    break from the web of the current

    View Slide

  72. because the better future
    web is waiting...

    View Slide

  73. kyle simpson @getify
    thanks!

    View Slide