Breaking The Broken Web

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

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