Excessive Enhancement - JSday

Slide 1

Slide 1 text

EXCESSIVE ENHANCEMENT # @PHILHAWKSWORTH JSDAY

Slide 2

Slide 2 text

~ EXCESSIVE ENHANCEMENT SEX ENHANCEMENTS # @PHILHAWKSWORTH JSDAY

Slide 3

Slide 3 text

CONTEXT JSDAY # @PHILHAWKSWORTH

Slide 4

Slide 4 text

# @PHILHAWKSWORTH JSDAY JSDAY # Marc - SVG Luca - data viz

Slide 5

Slide 5 text

CAN DO # @PHILHAWKSWORTH ANIMATION 3D EFFECTS DATA VISUALISATION JSDAY

Slide 6

Slide 6 text

BROWSER SHIZZLE # @PHILHAWKSWORTH JSDAY

Slide 7

Slide 7 text

CAUTION # @PHILHAWKSWORTH JSDAY

Slide 8

Slide 8 text

DESIGN RESPONSIBLE & DEVELOPMENT # @PHILHAWKSWORTH JSDAY

Slide 9

Slide 9 text

JSDAY # @PHILHAWKSWORTH - DR IAN MALCOM ...SO PREOCCUPIED WITH WHETHER THEY COULD THAT THEY DIDN'T STOP TO THINK IF THEY SHOULD

Slide 10

Slide 10 text

JSDAY # @PHILHAWKSWORTH IT’S A UNIX SYSTEM - LEX MURPHY

Slide 11

Slide 11 text

I THE WEB # @PHILHAWKSWORTH JSDAY

Slide 12

Slide 12 text

INSPIRATION # @PHILHAWKSWORTH JSDAY

Slide 13

Slide 13 text

@PHILHAWKSWORTH is THE WEB AGREEMENT #JSDAY

Slide 14

Slide 14 text

@PHILHAWKSWORTH #JSDAY

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

@PHILHAWKSWORTH ~ THE URI IS THE THING #JSDAY

Slide 20

Slide 20 text

@PHILHAWKSWORTH #JSDAY

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

AGREEMENT @PHILHAWKSWORTH #JSDAY THE CONTRACT OF THE URI

Slide 23

Slide 23 text

NOT A LECTURE ON REST @PHILHAWKSWORTH #JSDAY

Slide 24

Slide 24 text

GET http://some.stuff @PHILHAWKSWORTH #JSDAY REPRESENTATION OF CONTENT

Slide 25

Slide 25 text

THE SEDUCTIVE POWER OF THE POSSIBLE @PHILHAWKSWORTH #JSDAY

Slide 26

Slide 26 text

HTML5 @PHILHAWKSWORTH #JSDAY WHATEVER THAT IS

Slide 27

Slide 27 text

FLASH @PHILHAWKSWORTH #JSDAY MISTAKES MADE WITH

Slide 28

Slide 28 text

@PHILHAWKSWORTH #JSDAY YOU’RE A MEMBER OF THE ANTI FLASH MOB

Slide 29

Slide 29 text

@PHILHAWKSWORTH #JSDAY FROZEN CONTENT COPY/PASTE BOOKMARK-ABLE ACCESSIBLE SEARCHABLE

Slide 30

Slide 30 text

@PHILHAWKSWORTH #JSDAY FLASH CAN DO IT

Slide 31

Slide 31 text

SHOW ME #JSDAY @PHILHAWKSWORTH

Slide 32

Slide 32 text

@PHILHAWKSWORTH #JSDAY PIXELS THE WEB > >

Slide 33

Slide 33 text

CAUTIONARY TALE # @PHILHAWKSWORTH JSDAY OUR OLD MISTAKES

Slide 34

Slide 34 text

EVOLUTION @PHILHAWKSWORTH #JSDAY

Slide 35

Slide 35 text

SOPHISTICATION @PHILHAWKSWORTH #JSDAY

Slide 36

Slide 36 text

1996 @PHILHAWKSWORTH #JSDAY

Slide 37

Slide 37 text

MCDONALDS.COM @PHILHAWKSWORTH #JSDAY

Slide 38

Slide 38 text

MCDONALDS.COM @PHILHAWKSWORTH #JSDAY

Slide 39

Slide 39 text

PEPSI.COM @PHILHAWKSWORTH #JSDAY

Slide 40

Slide 40 text

LEGO.COM @PHILHAWKSWORTH #JSDAY

Slide 41

Slide 41 text

@PHILHAWKSWORTH #JSDAY 1,427 KB AVERAGE PAGE WEIGHT

Slide 42

Slide 42 text

@PHILHAWKSWORTH #JSDAY 500ms DELAY 20% TRAFFIC REDUCTION http://www.codinghorror.com/blog/2006/11/speed-still-matters.html

Slide 43

Slide 43 text

BEETLE.DE @PHILHAWKSWORTH #JSDAY A RICH USER EXPERIENCE WEB TECHNOLOGIES ...AND WHY I THINK IT SUCKS

Slide 44

Slide 44 text

BEETLE.COM JSDAY # @PHILHAWKSWORTH @PHILHAWKSWORTH #JSDAY 13 sec

Slide 45

Slide 45 text

BEETLE.COM JSDAY # @PHILHAWKSWORTH @PHILHAWKSWORTH #JSDAY

Slide 46

Slide 46 text

@PHILHAWKSWORTH #JSDAY 11MB 251 HTTP REQUESTS NO CACHE EXPIRATION

Slide 47

Slide 47 text

@PHILHAWKSWORTH #JSDAY 15MB 316 HTTP REQUESTS NO CACHE EXPIRATION

Slide 48

Slide 48 text

LINGSCARS.COM JSDAY # @PHILHAWKSWORTH @PHILHAWKSWORTH #JSDAY

Slide 49

Slide 49 text

@PHILHAWKSWORTH #JSDAY 4MB 314 HTTP REQUESTS NO CACHE EXPIRATION

Slide 50

Slide 50 text

GROLSCH.COM @PHILHAWKSWORTH #JSDAY

Slide 51

Slide 51 text

MCDONALDS.CO.UK @PHILHAWKSWORTH #JSDAY

Slide 52

Slide 52 text

38.28 MB 405 HTTP REQUESTS 1.1 MINUTE ONLOAD @PHILHAWKSWORTH #JSDAY

Slide 53

Slide 53 text

JSDAY # @PHILHAWKSWORTH - DR IAN MALCOM ...SO PREOCCUPIED WITH WHETHER THEY COULD THAT THEY DIDN'T STOP TO THINK IF THEY SHOULD

Slide 54

Slide 54 text

JSDAY # @PHILHAWKSWORTH - DR IAN MALCOM (PROBABLY) THAT REALLY IS AN AWFUL LOT OF HTTP REQUESTS FOR A WEBSITE ABOUT A CHICKEN WRAP

Slide 55

Slide 55 text

@PHILHAWKSWORTH #JSDAY

Slide 56

Slide 56 text

MILWAUKEE POLICENEWS.COM @PHILHAWKSWORTH #JSDAY

Slide 57

Slide 57 text

@PHILHAWKSWORTH #JSDAY

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

EXAMPLE LEARN by @PHILHAWKSWORTH #JSDAY

Slide 60

Slide 60 text

@PHILHAWKSWORTH #JSDAY THIS IS NOTHING

Slide 61

Slide 61 text

@PHILHAWKSWORTH #JSDAY MOTO.OAKLEY.COM

Slide 62

Slide 62 text

MOTO.OAKLEY.COM #JSDAY @PHILHAWKSWORTH

Slide 63

Slide 63 text

@PHILHAWKSWORTH #JSDAY 85.4MB PAGE WEIGHT 471 HTTP REQUESTS 2 MIN 45 SEC UNTIL CONTENT 4 MIN 10 SEC ONLOAD EVENT

Slide 64

Slide 64 text

@PHILHAWKSWORTH #JSDAY $22 TO DOWNLOAD ON VERIZON’S SMALLEST PLAN

Slide 65

Slide 65 text

@PHILHAWKSWORTH #JSDAY BACK TO BEETLE.DE

Slide 66

Slide 66 text

@PHILHAWKSWORTH #JSDAY WITHOUT JAVASCRIPT?

Slide 67

Slide 67 text

BEETLE.COM JSDAY # @PHILHAWKSWORTH @PHILHAWKSWORTH #JSDAY

Slide 68

Slide 68 text

BEETLE.COM #JSDAY @PHILHAWKSWORTH

Slide 69

Slide 69 text

BUT NOBODY HAS JAVASCRIPT DISABLED #JSDAY @PHILHAWKSWORTH EVERY CLIENT, EVER

Slide 70

Slide 70 text

#JSDAY @PHILHAWKSWORTH WHAT ABOUT THE CONTRACT OF THE URI?

Slide 71

Slide 71 text

of the WHAT IS THE ADDRESS CONTENT? # @PHILHAWKSWORTH JSDAY

Slide 72

Slide 72 text

made of THE WEB IS LINKS # @PHILHAWKSWORTH JSDAY

Slide 73

Slide 73 text

BEING SEDUCED BY THE POSSIBLE @PHILHAWKSWORTH #JSDAY

Slide 74

Slide 74 text

#JSDAY @PHILHAWKSWORTH BEETLE.COM

Slide 75

Slide 75 text

WHY DON’T THE F***ING WHEELS F***ING MOVE?! @PHILHAWKSWORTH #JSDAY

Slide 76

Slide 76 text

@PHILHAWKSWORTH #JSDAY PIXELS THE WEB > >

Slide 77

Slide 77 text

@PHILHAWKSWORTH #JSDAY PIXELS THE WEB > >

Slide 78

Slide 78 text

@philhawksworth #fullfrontalconf WHY U NO SHIZZLE? @PHILHAWKSWORTH #JSDAY

Slide 79

Slide 79 text

#JSDAY @PHILHAWKSWORTH

Slide 80

Slide 80 text

~ VIEW SOURCE #JSDAY @PHILHAWKSWORTH

Slide 81

Slide 81 text

is CRAFT CODE JSDAY # @PHILHAWKSWORTH

Slide 82

Slide 82 text

CURL http://some.stuff @PHILHAWKSWORTH #JSDAY

Slide 83

Slide 83 text

@PHILHAWKSWORTH #JSDAY URL

Slide 84

Slide 84 text

URL DESIGN CRAFT @PHILHAWKSWORTH #JSDAY

Slide 85

Slide 85 text

MAKE URL DESIGN A PRIORITY @PHILHAWKSWORTH #JSDAY

Slide 86

Slide 86 text

@philhawksworth #fullfrontalconf

Slide 87

Slide 87 text

TWITTER IS NOT A WEB SITE #JSDAY @PHILHAWKSWORTH

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

TWITTER IS A PLATFORM, EVERYTHING USES THE API #JSDAY @PHILHAWKSWORTH

Slide 90

Slide 90 text

TWITTER WEB CLIENT #JSDAY @PHILHAWKSWORTH

Slide 91

Slide 91 text

WITHOUT JAVASCRIPT? #JSDAY @PHILHAWKSWORTH

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

NOT ANY MORE!

Slide 94

Slide 94 text

@PHILHAWKSWORTH #JSDAY URL

Slide 95

Slide 95 text

#! WHY USE @PHILHAWKSWORTH #JSDAY

Slide 96

Slide 96 text

#! ? WHY USE @PHILHAWKSWORTH #JSDAY

Slide 97

Slide 97 text

#! (?)! WHY USE @PHILHAWKSWORTH #JSDAY

Slide 98

Slide 98 text

window.location.hash @PHILHAWKSWORTH #JSDAY #

Slide 99

Slide 99 text

@PHILHAWKSWORTH #JSDAY CLIENT-SIDE ROUTING PROCESSING

Slide 100

Slide 100 text

ENABLE HISTORY NAVIGATION @PHILHAWKSWORTH #JSDAY

Slide 101

Slide 101 text

@PHILHAWKSWORTH #JSDAY GOOGLE AJAX CRAWLING http://code.google.com/web/

Slide 102

Slide 102 text

@PHILHAWKSWORTH does’t have to break INTERFACE SHIZZLE THE URL #JSDAY

Slide 103

Slide 103 text

@PHILHAWKSWORTH #JSDAY

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

FUTURE FRIENDLY @PHILHAWKSWORTH #JSDAY

Slide 110

Slide 110 text

& DEMOS # @PHILHAWKSWORTH JSDAY DEV TOOLS

Slide 111

Slide 111 text

BETA.THEEXPRESSIVEWEB.COM

Slide 112

Slide 112 text

JUST A DEMO # @PHILHAWKSWORTH JSDAY

Slide 113

Slide 113 text

THE BIGGEST DANGER IS WHEN THAT DEMO MENTALITY LEAKS INTO PRODUCTION WEBSITES @PHILHAWKSWORTH #JSDAY @BRUCEL

Slide 114

Slide 114 text

EXAMPLE LEARN by # @PHILHAWKSWORTH JSDAY

Slide 115

Slide 115 text

@PHILHAWKSWORTH #JSDAY

Slide 116

Slide 116 text

# @PHILHAWKSWORTH JSDAY

Slide 117

Slide 117 text

IT’S TIME TO REPLACE THOSE MM_SwapImage FUNCTIONS # @PHILHAWKSWORTH JSDAY

Slide 118

Slide 118 text

TO FINISH # @PHILHAWKSWORTH JSDAY

Slide 119

Slide 119 text

DESIGN RESPONSIBLE & DEVELOPMENT # @PHILHAWKSWORTH JSDAY

Slide 120

Slide 120 text

your PROTECT CRAFT # @PHILHAWKSWORTH JSDAY

Slide 121

Slide 121 text

USE THE NEW TOOLS WITH CARE # @PHILHAWKSWORTH JSDAY

Slide 122

Slide 122 text

FIGHT FOR THE CHANCE TO DO GOOD ON THE WEB # @PHILHAWKSWORTH JSDAY

Slide 123

Slide 123 text

THANKS LINKS http://stephenwaller.tumblr.com http://crikeyboy.blogspot.com/2009/05/illustration-friday-hierarchy.html http://www.flickr.com/photos/bredgur/1323025528 http://www.flickr.com/photos/flowercat/2723867176 http://www.flickr.com/photos/marcthiele/4048845899 http://hawksworx.com https://speakerdeck.com/davatron5000/mo-pixels-mo-problems http://thewebisagreement.com/ http://www.codinghorror.com/blog/2006/11/speed-still-matters.html http://code.google.com/web/ajaxcrawling http://github.com/blog/760-the-tree-slider http://www.w3.org/TR/html5/history.html