RWD IRL - Speaker Deck

Slide 1

Slide 1 text

#RWD IRL @trentwalton

Slide 2

Slide 2 text

#RWD IRL

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

RESPONSIVE WEB DESIGN

Slide 5

Slide 5 text

IN REAL LIFE

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

OUR WORK…

Slide 11

Slide 11 text

9 fittextjs.com

Slide 12

Slide 12 text

fitvidsjs.com

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

marksimonson.com

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

BUT LOTS HASN’T SEEN THE LIGHT OF DAY

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

WHY?

Slide 22

Slide 22 text

RWD IS HARD

Slide 23

Slide 23 text

RWD IS HARD

Slide 24

Slide 24 text

WEB DESIGN IS HARD

Slide 25

Slide 25 text

BUT IT DIDN’T USED TO BE

Slide 26

Slide 26 text

BUT IT DIDN’T USED TO BE

Slide 27

Slide 27 text

BUT IT DIDN’T USED TO BE

Slide 28

Slide 28 text

BUT IT DIDN’T USED TO BE

Slide 29

Slide 29 text

BUT IT DIDN’T USED TO BE

Slide 30

Slide 30 text

BUT IT DIDN’T USED TO BE

Slide 31

Slide 31 text

BUT IT DIDN’T USED TO BE

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

WHAT CHANGED?

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

29 whatyouseeiswhatyouget.net

Slide 38

Slide 38 text

flickr.com/photos/lukew/10412448136

Slide 39

Slide 39 text

! —John Allsopp, A Dao of Web Design, 2000 It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.

Slide 40

Slide 40 text

EMBRACE THE MULTI-DEVICE WEB

Slide 41

Slide 41 text

LET’S PRETEND

Slide 42

Slide 42 text

HOW WE #RWD (At Paravel)

Slide 43

Slide 43 text

DEVICE-AGNOSTIC (device not-known)

Slide 44

Slide 44 text

1. Hostile browsers DEVICE-AGNOSTIC

Slide 45

Slide 45 text

1. Hostile browsers 2. Tiny screens DEVICE-AGNOSTIC

Slide 46

Slide 46 text

1. Hostile browsers 2. Tiny screens 3. Slow connection speeds DEVICE-AGNOSTIC

Slide 47

Slide 47 text

1. Hostile browsers 2. Tiny screens 3. Slow connection speeds 4. Touch inputs DEVICE-AGNOSTIC

Slide 48

Slide 48 text

1. Hostile browsers 2. Tiny screens 3. Slow connection speeds 4. Touch inputs (no uni-taskers) DEVICE-AGNOSTIC

Slide 49

Slide 49 text

1. HOSTILE BROWSERS

Slide 50

Slide 50 text

MORE TO CONSIDER THAN

Slide 51

Slide 51 text

A USER’S DELIBERATE CHOICE

Slide 52

Slide 52 text

OPERA MINI

Slide 53

Slide 53 text

OPERA MINI

Slide 54

Slide 54 text

OPERA MINI • Up to 90% data savings

Slide 55

Slide 55 text

OPERA MINI • Up to 90% data savings • Over 250 million users

Slide 56

Slide 56 text

CSS “Dotted and dashed borders are however rendered as solid for bandwidth and memory reasons.”

Slide 57

Slide 57 text

WEBFONTS “Mini uses the fonts present on the device it runs on.” ! “Opera Mini will only use one family of font per page, and setting font-family will have no effect.”

Slide 58

Slide 58 text

dowebsitesneedtolookexactlythesameineverybrowser.com

Slide 59

Slide 59 text

Further reading: adactio.com/journal/6692

Slide 60

Slide 60 text

THE PROBLEM WITH…

Slide 61

Slide 61 text

2. TINY SCREENS

Slide 62

Slide 62 text

Obligatory Stats

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

! —Google, The New Multi-screen World 90% [of users] use multiple screens sequentially to accomplish a task over time.

Slide 65

Slide 65 text

! —Karen McGrane, Your Content, Now Mobile, 2012 It is your mission to get your content out, on whichever platform, in whichever format your audience wants to consume it. Your users get to decide how, when, and where they want to read your content. It is your challenge and your responsibility to deliver a good experience to them.

Slide 66

Slide 66 text

via http://wtfmobileweb.com/

Slide 67

Slide 67 text

via http://wtfmobileweb.com/

Slide 68

Slide 68 text

via http://wtfmobileweb.com/

Slide 69

Slide 69 text

If a piece of content doesn’t fit into a mobile experience, what qualifies it for the desktop? ! —Anyone from Paravel in a room full of pissed off people

Slide 70

Slide 70 text

3. SLOW CONNECTION SPEEDS

Slide 71

Slide 71 text

via http://radar.oreilly.com SLOW PAGES LOSE USERS

Slide 72

Slide 72 text

via http://www.webperformancetoday.com THE AVERAGE WEB PAGE HAS ALMOST DOUBLED IN SIZE SINCE 2010

Slide 73

Slide 73 text

via http://www.webperformancetoday.com 828KB TO 1.2MB

Slide 74

Slide 74 text

! —Tim Kadlec, Fast Enough, 2014 With anything added to a page, you need to be able to answer the question of “What value does this provide?” and in turn be able to determine if the value outweighs the pain.

Slide 75

Slide 75 text

EVERY DECISION IS A BUSINESS DECISION

Slide 76

Slide 76 text

via http://www.apple.com/mac-pro 7.4MB ON LOAD, 24.7MB TOTAL

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

4. TOUCH INPUTS

Slide 79

Slide 79 text

TOUCH≠MOBILE

Slide 80

Slide 80 text

TOUCH≠TABLET

Slide 81

Slide 81 text

http://today.tumblr.com http://www.zktek.com

Slide 82

Slide 82 text

via http://www.crn.com.au

Slide 83

Slide 83 text

FAT FINGER FRIENDLY

Slide 84

Slide 84 text

via http://www.usetechtips.com

Slide 85

Slide 85 text

trentwalton.com/2010/07/05/non-hover

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

*PAUSE*

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

Seems legit.

Slide 92

Slide 92 text

THIS IS EASY TO AGREE WITH ON THE SURFACE

Slide 93

Slide 93 text

1. Hostile browsers 2. Tiny screens 3. Slow connection speeds 4. Touch inputs DEVICE-AGNOSTIC

Slide 94

Slide 94 text

CHANGE IS HARD

Slide 95

Slide 95 text

1. Organization structure CHANGE IS HARD

Slide 96

Slide 96 text

1. Organization structure 2. Content CHANGE IS HARD

Slide 97

Slide 97 text

1. Organization structure 2. Content 3. Process / deliverables CHANGE IS HARD

Slide 98

Slide 98 text

1. Organization structure 2. Content 3. Process / deliverables 4. Tools CHANGE IS HARD

Slide 99

Slide 99 text

1. Organization structure 2. Content 3. Process / deliverables 4. Tools 5. Measures of success CHANGE IS HARD

Slide 100

Slide 100 text

Thanks, @robweychert

Slide 101

Slide 101 text

PERCEPTIONS DON’T CHANGE OVERNIGHT

Slide 102

Slide 102 text

CLIENT CONSULTANT

Slide 103

Slide 103 text

CLIENT CONSULTANT progress

Slide 104

Slide 104 text

#RWD IRL

Slide 105

Slide 105 text

It’s not browsers, devices, or a lack of tools that keeps a site from launching successfully.

Slide 106

Slide 106 text

It’s not browsers, devices, or a lack of tools that keeps a site from launching successfully. It’s us.

Slide 107

Slide 107 text

WHAT CAN WE DO?

Slide 108

Slide 108 text

1. Reorganize WHAT CAN WE DO?

Slide 109

Slide 109 text

1. Reorganize 2. Improve our relationships WHAT CAN WE DO?

Slide 110

Slide 110 text

1. Reorganize 2. Improve our relationships 3. Learn new things WHAT CAN WE DO?

Slide 111

Slide 111 text

1. Reorganize 2. Improve our relationships 3. Learn new things 4. Focus on the browser WHAT CAN WE DO?

Slide 112

Slide 112 text

REORGANIZE

Slide 113

Slide 113 text

https://twitter.com/mulegirl/status/458674029717897216

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

• Team not fully utilized

Slide 117

Slide 117 text

• Team not fully utilized • Iteration is slow

Slide 118

Slide 118 text

• Team not fully utilized • Iteration is slow • Morale drops (tension rises)

Slide 119

Slide 119 text

• Team not fully utilized • Iteration is slow • Morale drops (tension rises) • Final product diminished

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

BABY STEPS Thanks, @danielmall

Slide 123

Slide 123 text

DESIGN CODE PLAN

Slide 124

Slide 124 text

DESIGN CODE PLAN

Slide 125

Slide 125 text

DESIGN CODE PLAN

Slide 126

Slide 126 text

DESIGN CODE PLAN

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

IMPROVE RELATIONSHIPS

Slide 129

Slide 129 text

really easy for us to hate each other

Slide 130

Slide 130 text

PLANNERS…

Slide 131

Slide 131 text

ur-prblm-now.xls

Slide 132

Slide 132 text

DESIGNERS…

Slide 133

Slide 133 text

f#©k-you.jpg

Slide 134

Slide 134 text

CODERS…

Slide 135

Slide 135 text

LET’S TALK ABOUT OUR FEELINGS

Slide 136

Slide 136 text

PLANNERS

Slide 137

Slide 137 text

PLANNERS 1. Scripting improv

Slide 138

Slide 138 text

PLANNERS 1. Scripting improv 2. Stopgap for sign-off & scheduling

Slide 139

Slide 139 text

DESIGNERS

Slide 140

Slide 140 text

DESIGNERS 1. Fear losing control

Slide 141

Slide 141 text

DESIGNERS 1. Fear losing control 2. Insecure about code

Slide 142

Slide 142 text

DESIGNERS 1. Fear losing control 2. Insecure about code 3. Secretive process

Slide 143

Slide 143 text

CODERS

Slide 144

Slide 144 text

CODERS 1. Undervalued creatively

Slide 145

Slide 145 text

CODERS 1. Undervalued creatively 2. Plan & design is prescriptive

Slide 146

Slide 146 text

CODERS 1. Undervalued creatively 2. Plan & design is prescriptive 3. Secretive about the build

Slide 147

Slide 147 text

! Stephen Caver, Why Developers Need to Learn Design, 2014 Nothing is more toxic to a project than developers and designers seeing each other as rivals. —

Slide 148

Slide 148 text

THE LITTLE THINGS

Slide 149

Slide 149 text

LEARN NEW THINGS

Slide 150

Slide 150 text

Design

Slide 151

Slide 151 text

T-SHAPED

Slide 152

Slide 152 text

Design

Slide 153

Slide 153 text

! —Mark Otto, Fatten up those T's Being T-shaped means you can shift yourself and provide value at just about any stage or type of project—like sketching, wireframing, visual design, and code.

Slide 154

Slide 154 text

Design

Slide 155

Slide 155 text

Design Brand Business CSS HTML

Slide 156

Slide 156 text

No content

Slide 157

Slide 157 text

1. Reorganize 2. Improve our relationships 3. Learn new things 4. Focus on the browser WHAT CAN WE DO?

Slide 158

Slide 158 text

FOCUS ON THE BROWSER

Slide 159

Slide 159 text

No content

Slide 160

Slide 160 text

AVOID WASTED EFFORT

Slide 161

Slide 161 text

No content

Slide 162

Slide 162 text

No content

Slide 163

Slide 163 text

No content

Slide 164

Slide 164 text

No content

Slide 165

Slide 165 text

! —Jason Santa Maria, The Nimble Process Ideas want to be ugly.

Slide 166

Slide 166 text

No content

Slide 167

Slide 167 text

No content

Slide 168

Slide 168 text

AVOID VIEWPORT SILOS

Slide 169

Slide 169 text

VIEWPORT SILOS

Slide 170

Slide 170 text

A solution for one viewport isn’t really a solution.

Slide 171

Slide 171 text

PATTERN LAB FOR THE WIN

Slide 172

Slide 172 text

TINY BOOTSTRAPS FOR EVERY CLIENT!

Slide 173

Slide 173 text

! —Dave Rupert, Responsive Deliverables, 2013 These living code samples are self- documenting style guides that extend to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web.

Slide 174

Slide 174 text

patternlab.io

Slide 175

Slide 175 text

INCORPORATION

Slide 176

Slide 176 text

1. Explore via sketching & photoshop INCORPORATION

Slide 177

Slide 177 text

1. Explore via sketching & photoshop 2. Prototype in code INCORPORATION

Slide 178

Slide 178 text

1. Explore via sketching & photoshop 2. Prototype in code 3. Test, discuss, iterate INCORPORATION

Slide 179

Slide 179 text

1. Explore via sketching & photoshop 2. Prototype in code 3. Test, discuss, iterate 4. Incorporate into Pattern Lab INCORPORATION

Slide 180

Slide 180 text

1. Explore via sketching & photoshop 2. Prototype in code 3. Test, discuss, iterate 4. Incorporate into Pattern Lab 5. Deploy to site INCORPORATION

Slide 181

Slide 181 text

! —Jeff Veen, I Don’t Care About Accessibility, 2004 …I end up delivering solutions to my clients that are far less complex to implement, are much easier to maintain, cost exponentially less to serve, work on multiple browsers and devices, do way better in the search engine lottery, and — of course — are accessible to everyone … everyone … using the Web today. And try to argue with the business value of that.

Slide 182

Slide 182 text

No content

Slide 183

Slide 183 text

No content

Slide 184

Slide 184 text

FIGHT THE GOOD FIGHT

Slide 185

Slide 185 text

FIGHT THE GOOD FIGHT

Slide 186

Slide 186 text

EVERYONE HAS AN OPINION

Slide 187

Slide 187 text

BUT I NEED TO HAVE MY OWN

Slide 188

Slide 188 text

MOBILE FIRST RESOLUTION INDEPENDENCE DESIGN IN THE BROWSER STYLE PROTOTYPE AUTOMATION PROJECT HUBS STYLE TILES ELEMENT COLLAGE LESS DEVICE AGNOSTIC ATOMIC DESIGN CONTENT PARITY SASS PHOTOSHOP CONTENT CHOREOGRAPHY WIREFRAME

Slide 189

Slide 189 text

EDUCATION CAMARADERIE HANDOFF DOCUMENTATION BUSINESS GOALS ACCOUNTABILITY TIMELINES SIGN-OFF BUDGET MORALE RESPECT COMMUNICATION HAPPINESS ORGANIZATIONAL POLITICS RESEARCH APPROVAL

Slide 190

Slide 190 text

THANKS! @trentwalton