Tweet
Tweet

Slide 1

Slide 1 text

breaking the broken web kyle simpson @getify

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

broken by decision

Slide 8

Slide 8 text

romantic but impractical backwards compatibility

Slide 9

Slide 9 text

tech hacks

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

the web is broken

Slide 18

Slide 18 text

and we're determined to keep it that way

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

do we have to?

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

browser game theory

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

@BreakWebForward

Slide 25

Slide 25 text

crazy? already *happening! *sort of

Slide 26

Slide 26 text

control characters

Slide 27

Slide 27 text

many break the web forwards

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

broken by design

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

>1mb >$23

Slide 32

Slide 32 text

WhatDoesMySiteCost.com

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

the web is totally sucked F ^we built

Slide 41

Slide 41 text

progressive enhancement responsive design

Slide 42

Slide 42 text

didn't go far enough

Slide 43

Slide 43 text

feature tests broken assumption

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

@UnsuckTheWeb

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

vision for the future of the web

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

browsers must enforce

Slide 59

Slide 59 text

even crazier? already *happening! *sort of

Slide 60

Slide 60 text

Client Hints

Slide 61

Slide 61 text

"RQ: low" Resource Quality

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

what's our part?

Slide 64

Slide 64 text

build in s

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

objections client budget too much work boss will say no

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

let the user decide

Slide 71

Slide 71 text

break from the web of the past break from the web of the current

Slide 72

Slide 72 text

because the better future web is waiting...

Slide 73

Slide 73 text

kyle simpson @getify thanks!