Tweet
Tweet

Slide 1

Slide 1 text

EXCESSIVE ENHANCEMENT # @PHILHAWKSWORTH GOTHAMJS

Slide 2

Slide 2 text

PHILHAWKSWORTH @

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

CONTEXT GOTHAMJS # @PHILHAWKSWORTH

Slide 5

Slide 5 text

# @PHILHAWKSWORTH GOTHAMJS GOTHAMJS #

Slide 6

Slide 6 text

CAN DO # @PHILHAWKSWORTH ANIMATION 3D EFFECTS DATA VISUALISATION SINGLE PAGE APPS GOTHAMJS

Slide 7

Slide 7 text

BROWSER SHIZZLE # @PHILHAWKSWORTH GOTHAMJS

Slide 8

Slide 8 text

CAUTION # @PHILHAWKSWORTH GOTHAMJS

Slide 9

Slide 9 text

DESIGN RESPONSIBLE & DEVELOPMENT # @PHILHAWKSWORTH GOTHAMJS

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

# @PHILHAWKSWORTH EATEN BY DINOSAURS (POSSIBLY WHILE ON THE TOILET) GOTHAMJS

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

I THE WEB # @PHILHAWKSWORTH GOTHAMJS

Slide 14

Slide 14 text

INSPIRATION # @PHILHAWKSWORTH GOTHAMJS

Slide 15

Slide 15 text

@PHILHAWKSWORTH #GOTHAMJS is THE WEB AGREEMENT

Slide 16

Slide 16 text

@PHILHAWKSWORTH #GOTHAMJS ~ THE URI IS THE THING

Slide 17

Slide 17 text

@PHILHAWKSWORTH #GOTHAMJS ~ THE URI IS THE THING

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

@PHILHAWKSWORTH #GOTHAMJS ~ THE CONTRACT OF THE URI AGREEMENT

Slide 20

Slide 20 text

NOT A LECTURE ON REST @PHILHAWKSWORTH #GOTHAMJS

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

THE @PHILHAWKSWORTH #GOTHAMJS OF THE POSSIBLE POWER SEDUCTIVE

Slide 23

Slide 23 text

HTML5 @PHILHAWKSWORTH WHATEVER THAT IS #GOTHAMJS

Slide 24

Slide 24 text

FLASH @PHILHAWKSWORTH MISTAKES MADE WITH #GOTHAMJS

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

SNOOTY ATTITUDE OF DEVELOPERS copyright Chris Kennett @PHILHAWKSWORTH #GOTHAMJS

Slide 27

Slide 27 text

COMMON CRITICISMS @PHILHAWKSWORTH #GOTHAMJS

Slide 28

Slide 28 text

@PHILHAWKSWORTH FROZEN CONTENT COPY/PASTE #GOTHAMJS

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

@PHILHAWKSWORTH FLASH CAN DO IT #GOTHAMJS

Slide 31

Slide 31 text

SHOW ME @PHILHAWKSWORTH #GOTHAMJS

Slide 32

Slide 32 text

@PHILHAWKSWORTH PIXELS THE WEB > > #GOTHAMJS

Slide 33

Slide 33 text

CAUTIONARY TALE @PHILHAWKSWORTH OUR OLD MISTAKES #GOTHAMJS

Slide 34

Slide 34 text

EVOLUTION @PHILHAWKSWORTH #GOTHAMJS

Slide 35

Slide 35 text

SOPHISTICATION

Slide 36

Slide 36 text

1996 @PHILHAWKSWORTH #GOTHAMJS

Slide 37

Slide 37 text

MCDONALDS.COM @PHILHAWKSWORTH #GOTHAMJS

Slide 38

Slide 38 text

MCDONALDS.COM @PHILHAWKSWORTH #GOTHAMJS

Slide 39

Slide 39 text

PEPSI.COM @PHILHAWKSWORTH #GOTHAMJS

Slide 40

Slide 40 text

LEGO.COM @PHILHAWKSWORTH #GOTHAMJS

Slide 41

Slide 41 text

TODAY OR THERE ABOUTS @PHILHAWKSWORTH #GOTHAMJS

Slide 42

Slide 42 text

floppy disk @PHILHAWKSWORTH #GOTHAMJS

Slide 43

Slide 43 text

floppy disk 1,427 KB AVERAGE PAGE WEIGHT @PHILHAWKSWORTH #GOTHAMJS

Slide 44

Slide 44 text

PERFORMANCE MATTERS @PHILHAWKSWORTH #GOTHAMJS

Slide 45

Slide 45 text

Marrissa Mayer, Google 500ms OF EXTRA LOAD TIME CAUSED 20% FEWER SEARCHES @PHILHAWKSWORTH #GOTHAMJS

Slide 46

Slide 46 text

Greg Linden, Amazon 100ms OF EXTRA LOAD TIME CAUSED 1% DROP IN SALES @PHILHAWKSWORTH #GOTHAMJS

Slide 47

Slide 47 text

BEETLE.COM @PHILHAWKSWORTH A RICH USER EXPERIENCE WEB TECHNOLOGIES #GOTHAMJS

Slide 48

Slide 48 text

BEETLE.COM @PHILHAWKSWORTH @PHILHAWKSWORTH 13 #GOTHAMJS seconds

Slide 49

Slide 49 text

BEETLE.COM GOTHAMJS # @PHILHAWKSWORTH @PHILHAWKSWORTH #GOTHAMJS

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

MCDONALDS.CO.UK @PHILHAWKSWORTH #GOTHAMJS

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

@PHILHAWKSWORTH THIS IS NOTHING #GOTHAMJS

Slide 57

Slide 57 text

@PHILHAWKSWORTH MOTO.OAKLEY.COM #GOTHAMJS

Slide 58

Slide 58 text

MOTO.OAKLEY.COM @PHILHAWKSWORTH #GOTHAMJS

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

!? @PHILHAWKSWORTH #GOTHAMJS

Slide 62

Slide 62 text

@PHILHAWKSWORTH 85MB #GOTHAMJS

Slide 63

Slide 63 text

@PHILHAWKSWORTH 13MB #GOTHAMJS

Slide 64

Slide 64 text

@PHILHAWKSWORTH #GOTHAMJS SAVED 72MB

Slide 65

Slide 65 text

@PHILHAWKSWORTH BACK TO BEETLE.COM #GOTHAMJS

Slide 66

Slide 66 text

@PHILHAWKSWORTH WITHOUT JAVASCRIPT? #GOTHAMJS

Slide 67

Slide 67 text

BEETLE.COM @PHILHAWKSWORTH @PHILHAWKSWORTH #GOTHAMJS

Slide 68

Slide 68 text

BEETLE.COM @PHILHAWKSWORTH #GOTHAMJS

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

@PHILHAWKSWORTH #GOTHAMJS the WHAT ABOUT CONTRACT OF THE URI?

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

made of THE WEB IS LINKS @PHILHAWKSWORTH #GOTHAMJS

Slide 73

Slide 73 text

Jake Archibald, Google PROGRESSIVE ENHANCEMENT IS STILL IMPORTANT @PHILHAWKSWORTH http://jakearchibald.com/2013/ progressive-enhancement-still-important/ #GOTHAMJS

Slide 74

Slide 74 text

@PHILHAWKSWORTH HTML DOWNLOADS CSS DOWNLOADS CSS FETCHES ADDITIONAL ASSETS JS DOWNLOADS JS EXECUTES JS FETCHES ADDITIONAL ASSETS JS UPDATES DOM #GOTHAMJS

Slide 75

Slide 75 text

@PHILHAWKSWORTH TIME TO GLASS #GOTHAMJS

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

@PHILHAWKSWORTH PERFORMANCE & SUPPORT #GOTHAMJS

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

@PHILHAWKSWORTH #GOTHAMJS

Slide 80

Slide 80 text

~ VIEW SOURCE @PHILHAWKSWORTH #GOTHAMJS

Slide 81

Slide 81 text

is CRAFT CODE @PHILHAWKSWORTH #GOTHAMJS

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

@PHILHAWKSWORTH URL #GOTHAMJS

Slide 84

Slide 84 text

URL DESIGN CRAFT @PHILHAWKSWORTH #GOTHAMJS

Slide 85

Slide 85 text

MAKE URL DESIGN A PRIORITY @PHILHAWKSWORTH #GOTHAMJS

Slide 86

Slide 86 text

#! SHEBANG

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

window.location.hash @PHILHAWKSWORTH # #GOTHAMJS

Slide 89

Slide 89 text

@PHILHAWKSWORTH CLIENT-SIDE ROUTING PROCESSING #GOTHAMJS

Slide 90

Slide 90 text

ENABLE HISTORY NAVIGATION @PHILHAWKSWORTH #GOTHAMJS

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

@PHILHAWKSWORTH #GOTHAMJS

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

HTML5 HISTORY API @PHILHAWKSWORTH #GOTHAMJS

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

& DEMOS @PHILHAWKSWORTH DEV TOOLS #GOTHAMJS

Slide 100

Slide 100 text

BETA.THEEXPRESSIVEWEB.COM

Slide 101

Slide 101 text

Jake Archibald, Google PROGRESSIVE ENHANCEMENT IS STILL IMPORTANT @PHILHAWKSWORTH #GOTHAMJS

Slide 102

Slide 102 text

JUST A DEMO @PHILHAWKSWORTH #GOTHAMJS

Slide 103

Slide 103 text

THE BIGGEST DANGER IS WHEN THAT DEMO MENTALITY LEAKS INTO PRODUCTION WEBSITES @PHILHAWKSWORTH Bruce Lawson, Opera #GOTHAMJS

Slide 104

Slide 104 text

EXAMPLE LEARN by @PHILHAWKSWORTH #GOTHAMJS

Slide 105

Slide 105 text

@PHILHAWKSWORTH #GOTHAMJS

Slide 106

Slide 106 text

@PHILHAWKSWORTH #GOTHAMJS

Slide 107

Slide 107 text

TO FINISH @PHILHAWKSWORTH #GOTHAMJS

Slide 108

Slide 108 text

DESIGN RESPONSIBLE & DEVELOPMENT @PHILHAWKSWORTH #GOTHAMJS

Slide 109

Slide 109 text

your PROTECT CRAFT @PHILHAWKSWORTH #GOTHAMJS

Slide 110

Slide 110 text

USE THE NEW TOYS @PHILHAWKSWORTH #GOTHAMJS WITH CARE

Slide 111

Slide 111 text

SHIZZLE FOR SHIZZLE’S SAKE? @PHILHAWKSWORTH #GOTHAMJS

Slide 112

Slide 112 text

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

Slide 113

Slide 113 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://www.flickr.com/photos/unseen-studios/519988612/ http://hawksworx.com https://speakerdeck.com/davatron5000/mo-pixels-mo-problems http://hawksworx.com/blog/oakleys-moto-diet/ http://thewebisagreement.com/ http://www.codinghorror.com/blog/2006/11/speed-still-matters.html http://www.slideshare.net/nzakas/enough-withthejavascriptalready http://jakearchibald.com/2013/progressive-enhancement-still-important/ http://code.google.com/web/ajaxcrawling http://github.com/blog/760-the-tree-slider http://www.w3.org/TR/html5/history.html

Slide 114

Slide 114 text

THANKS @PHILHAWKSWORTH #GOTHAMJS