a more responsive workflow

71
A More Responsive Workflow

Upload: brandon-gray

Post on 22-Apr-2015

686 views

Category:

Design


0 download

DESCRIPTION

It wasn’t all that long ago that we made a giant shift in how we design and develop for the web. We slowly stopped using table-based layouts and switched to semantic markup and CSS. Today we're facing another shift; making our websites responsive. Our processes, workflows, and tools break down when faced with an infinite array of devices, resolutions, and feature sets. Designing from content, systematic thinking, separating layout from atmosphere, progressive enhancement, and project deliverables are just a few of the topics that Brandon Gray, a maker of awesome stuff for the web at AKQA, will cover to help you tame the modern web creation process. The web is growing up fast, it's time our process grows up with it!

TRANSCRIPT

Page 1: A More Responsive Workflow

A More Responsive Workflow

Page 2: A More Responsive Workflow

Hello!

This is me

@BrandonGray

Where I work.

@AKQA

Page 3: A More Responsive Workflow

Whatchu Talkin Bout Willis?

Page 4: A More Responsive Workflow

How do we translate ideas amongst team members?

What size do I start my Photoshop document at? How do we support “retina” displays?

How many comps do I need to create for each page?How much more time is this going to require?

Which interface design patterns work best for small screens? How and when do we involve the client?

What are the disadvantages?

What are the advantages of this?

How much more does this cost?

How do we figure out what those break points should be? What are the “break points” for the site?

How should the content display when viewed on a television? How do we resize images for various resolutions?What is it?

What devices are we targeting?

Page 5: A More Responsive Workflow

The World As We Know It

Page 6: A More Responsive Workflow

Research Design PrinterSketch Delivery

Page 7: A More Responsive Workflow

Research Design DevelopWireframe Launch

Page 8: A More Responsive Workflow

Waterfall Process Born From Print Design

Research Design DevelopWireframe Launch

Page 9: A More Responsive Workflow

“Pages”

Page 10: A More Responsive Workflow

“Lock-Up”

Page 11: A More Responsive Workflow

“The Fold”

Page 12: A More Responsive Workflow

You make me feel so comfortable.

1024 x 768

Page 13: A More Responsive Workflow

Welcome to the party! Eh, maybe we’ll invite you...but probably not.

Who the? GTFO!

Page 14: A More Responsive Workflow

Absolute.Total.

Control.

Page 15: A More Responsive Workflow

Feeling slightly less comfortable...but still pretty comfortable.

Page 16: A More Responsive Workflow
Page 17: A More Responsive Workflow

“The fastest way to break the cycle of perfectionism and become a fearless mother is to give up the idea of doing it perfectly - indeed to embrace uncertainty and imperfection.” - Arianna Huffington

Page 18: A More Responsive Workflow

Tesla Type-S - 17” touch display

Page 19: A More Responsive Workflow

Samsung Galaxy Skin - Flexible AMOLED Display

• Extremely wide landscape view

• “Retina” quality resolution

• Potential for new types of interactions with a truly flexible

device

Page 20: A More Responsive Workflow

A Whole New World.

Page 21: A More Responsive Workflow
Page 22: A More Responsive Workflow

Our job now is to create solutions that are flexible and designed with the future in mind.

Page 23: A More Responsive Workflow

1. Starting With Content

2. Thinking in Systems

3. Beyond the Box

4. Separating Layout From Atmosphere

5. Separating Content From Context

6. Enhancing for Feature Sets

7. Collaboration

8. Deliverables

Page 24: A More Responsive Workflow

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Page 25: A More Responsive Workflow

Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.

Page 26: A More Responsive Workflow

“Content precedes design. Design in the absence of content is not design, it’s decoration.” - Jeffrey Zeldman

Page 27: A More Responsive Workflow

1. Starting With Content

2. Thinking in Systems

3. Beyond the Box

4. Separating Layout From Atmosphere

5. Separating Content From Context

6. Enhancing for Feature Sets

7. Collaboration

8. Deliverables

Page 28: A More Responsive Workflow
Page 29: A More Responsive Workflow
Page 30: A More Responsive Workflow
Page 31: A More Responsive Workflow

1. Starting With Content

2. Thinking in Systems

3. Beyond the Box

4. Separating Layout From Atmosphere

5. Separating Content From Context

6. Enhancing for Feature Sets

7. Collaboration

8. Deliverables

Page 32: A More Responsive Workflow
Page 33: A More Responsive Workflow

Common “Desktop” Resolutions

800 x 600

1024 x 768

1280 x 768

1280 x 800

1280 x 1024

1366 x 768

1440 x 900

1600 x 900

1680 x 1050

1920 x 1080

Page 34: A More Responsive Workflow

64 x 98

64 x 112

64 x 128

80 x 120

95 x 76

96 x 44

96 x 64

96 x 65

96 x 68

96 x 72

96 x 76

96 x 78

96 x 84

96 x 89

96 x 90

96 x 91

96 x 95

96 x 96

96 x 104

96 x 113

96 x 120

98 x 64

100 x 120

101 x 54

101 x 64

101 x 65

101 x 67

101 x 80

101 x 111

102 x 80

104 x 80

104 x 208

108 x 82

110 x 72

111 x 100

111 x 106

112 x 64

112 x 76

112 x 84

112 x 128

116 x 122

116 x 181

118 x 114

118 x 128

118 x 256

119 x 64

120 x 72

120 x 80

120 x 96

120 x 108

120 x 110

120 x 112

120 x 115

120 x 116

120 x 117

120 x 120

120 x 124

120 x 126

120 x 127

120 x 128

120 x 130

120 x 143

120 x 144

120 x 145

120 x 160

123 x 69

125 x 96

128 x 50

128 x 64

128 x 80

128 x 83

128 x 92

128 x 95

128 x 96

128 x 97

128 x 100

128 x 112

128 x 115

128 x 120

128 x 121

128 x 127

128 x 128

128 x 131

128 x 141

128 x 143

128 x 144

128 x 146

128 x 160

128 x 176

128 x 220

128 x 256

130 x 130

132 x 65

132 x 126

132 x 128

132 x 136

132 x 142

132 x 144

132 x 147

132 x 156

132 x 158

132 x 160

132 x 162

132 x 163

132 x 176

136 x 120

136 x 176

140 x 160

144 x 135

144 x 136

144 x 140

144 x 144

144 x 156

144 x 176

144 x 262

150 x 100

150 x 170

160 x 120

160 x 128

160 x 160

160 x 180

160 x 198

160 x 240

162 x 176

162 x 178

162 x 216

174 x 132

176 x 144

176 x 157

176 x 160

176 x 164

176 x 176

176 x 178

176 x 180

176 x 182

176 x 183

176 x 184

176 x 185

176 x 186

176 x 187

176 x 192

176 x 198

176 x 200

176 x 208

176 x 220

176 x 229

176 x 240

177 x 223

178 x 220

208 x 104

208 x 208

208 x 320

216 x 162

220 x 113

220 x 176

220 x 220

222 x 261

230 x 240

230 x 310

232 x 323

240 x 160

240 x 224

240 x 235

240 x 240

240 x 255

240 x 260

240 x 266

240 x 269

240 x 270

240 x 272

240 x 274

240 x 275

240 x 292

240 x 298

240 x 300

240 x 302

240 x 320

240 x 345

240 x 352

240 x 375

240 x 378

240 x 384

240 x 400

240 x 427

240 x 428

240 x 432

240 x 440

240 x 480

256 x 240

256 x 384

320 x 194

320 x 199

320 x 204

320 x 240

320 x 256

320 x 320

320 x 400

320 x 480

324 x 352

345 x 800

352 x 416

360 x 120

360 x 400

360 x 480

360 x 640

384 x 288

400 x 240

400 x 427

400 x 800

432 x 240

450 x 854

480 x 272

480 x 320

480 x 360

480 x 427

480 x 540

480 x 640

480 x 690

480 x 760

480 x 800

480 x 845

480 x 854

480 x 860

480 x 862

480 x 864

480 x 960

480 x 1024

540 x 960

600 x 800

600 x 1024

640 x 200

640 x 240

640 x 320

640 x 360

640 x 480

640 x 960

640 x 1136

720 x 1280

768 x 1024

800 x 352

800 x 480

800 x 600

800 x 1280

854 x 480

960 x 544

1024 x 480

1024 x 600

1024 x 768

1136 x 640

1280 x 768

1280 x 800

Common “Mobile” Resolutions

Page 35: A More Responsive Workflow

240 x 320

240 x 345

240 x 352

240 x 375

240 x 378

240 x 384

240 x 400

240 x 427

240 x 428

240 x 432

240 x 440

240 x 480

256 x 240

256 x 384

320 x 194

320 x 199

320 x 204

320 x 240

320 x 256

320 x 320

320 x 400

320 x 480

324 x 352

345 x 800

352 x 416

360 x 120

360 x 400

360 x 480

360 x 640

384 x 288

400 x 240

400 x 427

400 x 800

432 x 240

450 x 854

480 x 272

480 x 320

480 x 360

480 x 427

480 x 540

480 x 640

480 x 690

480 x 760

480 x 800

480 x 845

480 x 854

480 x 860

480 x 862

480 x 864

480 x 960

480 x 1024

540 x 960

600 x 800

600 x 1024

640 x 200

640 x 240

640 x 320

640 x 360

640 x 480

640 x 960

640 x 1136

720 x 1280

768 x 1024

800 x 352

800 x 480

800 x 600

800 x 1280

854 x 480

960 x 544

1024 x 480

1024 x 600

1024 x 768

1136 x 640

1280 x 768

1280 x 800

1536 x 2048

2048 x 1536

Common Smartphone & Tablet Resolutions

Page 36: A More Responsive Workflow

“Popular” Resolutions

320 x 480

480 x 320

480 x 800

600 x 1024

640 x 960

640 x 1136

720 x 1280

768 x 1024

768 x 1280

768 x 1366

800 x 480

800 x 1280

960 x 640

1024 x 600

1024 x 768

1136 x 640

1200 x 1920

1280 x 720

1280 x 768

1280 x 800

1280 x 1024

1366 x 768

1440 x 900

1600 x 900

1680 x 1050

1920 x 1080

Page 37: A More Responsive Workflow

iOS Resolutions

320 x 480

480 x 320

640 x 960

640 x 1136

768 x 1024

960 x 640

1024 x 768

1136 x 640

1536 x 2048

2048 x 1536

Page 38: A More Responsive Workflow

“The most popular size is every size.” - Jeffrey Zeldman

Page 39: A More Responsive Workflow

1. Starting With Content

2. Thinking in Systems

3. Beyond the Box

4. Separating Layout From Atmosphere

5. Separating Content From Context

6. Enhancing for Feature Sets

7. Collaboration

8. Deliverables

Page 40: A More Responsive Workflow
Page 41: A More Responsive Workflow

Anyone Can Sketch.Everyone Should.

Page 42: A More Responsive Workflow
Page 43: A More Responsive Workflow
Page 44: A More Responsive Workflow
Page 45: A More Responsive Workflow
Page 46: A More Responsive Workflow

Wait...What Do You Mean “Dead”?

Page 47: A More Responsive Workflow

GET EXTREME!

Page 48: A More Responsive Workflow

1. Starting With Content

2. Thinking in Systems

3. Beyond the Box

4. Separating Layout From Atmosphere

5. Separating Content From Context

6. Enhancing for Feature Sets

7. Collaboration

8. Deliverables

Page 49: A More Responsive Workflow

You Do Not Know Me.

Page 50: A More Responsive Workflow

You Do Not Know My Intent.

Page 51: A More Responsive Workflow

You Do Not Know My Environment

Page 52: A More Responsive Workflow

You Do Not Know My Circumstance.

Page 53: A More Responsive Workflow

Oh please! Like you haven’t done it.

You Do Not Know My Circumstance.

Page 54: A More Responsive Workflow

Do Not Limit The Content!

Mobile users expect to be able to do all of the things they would be able to do on a desktop.

Page 55: A More Responsive Workflow

1. Starting With Content

2. Thinking in Systems

3. Beyond the Box

4. Separating Layout From Atmosphere

5. Separating Content From Context

6. Enhancing for Feature Sets

7. Collaboration

8. Deliverables

Page 56: A More Responsive Workflow

Progressive Enhancement

Page 58: A More Responsive Workflow

1. Starting With Content

2. Thinking in Systems

3. Beyond the Box

4. Separating Layout From Atmosphere

5. Separating Content From Context

6. Enhancing for Feature Sets

7. Collaboration

8. Deliverables

Page 59: A More Responsive Workflow

Research Design DevelopWireframe Launch

Page 60: A More Responsive Workflow

Design Develop Wires

Research

Wires Design Develop Launch

Design Develop Wires

Develop Wires Design

Test

Test

Test

Test

Page 61: A More Responsive Workflow

DiscoverySketch &

WireframePlan Prototype

Discussion TestVisualDesign

Deliver

Page 62: A More Responsive Workflow

Tear Down That Silo!

Page 63: A More Responsive Workflow

1. Starting With Content

2. Thinking in Systems

3. Beyond the Box

4. Separating Layout From Atmosphere

5. Separating Content From Context

6. Enhancing for Feature Sets

7. Collaboration

8. Deliverables

Page 64: A More Responsive Workflow
Page 65: A More Responsive Workflow

But It’s A Prototype! It’s Not Finished!

Page 66: A More Responsive Workflow

“A change gonna come” - Sam Cooke

Page 67: A More Responsive Workflow

“A change gonna has already come” - Not Sam Cooke

Page 68: A More Responsive Workflow

Growing Up

Page 69: A More Responsive Workflow

“Innumerable confusions and a profound feeling of despair invariably emerge in periods of great technological and cultural transitions. Our “Age of Anxiety” is, in great part, the result of trying to do today’s job with yesterday’s tools–with yesterday’s concepts.” - Marshal McLuhan

Page 70: A More Responsive Workflow
Page 71: A More Responsive Workflow

Thanks!