Responsive principles

51
1 Responsive Principles More than designing for size @shoobe01 #float2012

description

Presented at Float Mobile eLearning Symposium, at Chicago TechWeek, on 25 July 2012. Buzzwords and trends in design, development and process hold much weight in our industries, and foster much arguing and staking out of opposite positions. But more of these are in fundamental agreement than is generally acknowledged, and merging approaches, much like collaborating with a varied team, can yield the most useful results.Steven will discuss the underlying principles of responsive & fluid design, progressive enhancement, adaptive design, device detection, multi-platform design, cross-platform development processes, and mobile device capabilities. He will present one possible unifying theory of how you can not just develop the shiniest iOS app, but design the best experience for your users, on every screen and with every interaction.

Transcript of Responsive principles

Page 1: Responsive principles

1

Responsive Principles

More than designing for size

@shoobe01 #float2012

Page 2: Responsive principles

22

Learn by typing, talking, and sharing.

Page 3: Responsive principles

33

Select a platform first, right?

Page 4: Responsive principles

44

Lies, damned lies, and statistics.

Page 5: Responsive principles

55

You are screwing yourself.

Page 6: Responsive principles

66

Fragmentation is great.

Page 7: Responsive principles

77

Design for every platform, and every screen.

Page 8: Responsive principles

88

Design responsively, right?

Page 9: Responsive principles

99

Responsive design isn’t new.

Page 10: Responsive principles

1010

But that’s okay.

Page 11: Responsive principles

1111

Device detection and server-side software.

Page 12: Responsive principles

1212

RESS isn’t new, either.

Page 13: Responsive principles

1313

But it’s a convenient acronym.

Page 14: Responsive principles

1414

Page 15: Responsive principles

1515

Design beyond pixels.

Page 16: Responsive principles

1616

Percent? Em? Point, pica, mm, inch, twip.

Page 17: Responsive principles

1717

Design for the real world.

Page 18: Responsive principles

1818

Page 19: Responsive principles

1919

Page 20: Responsive principles

2020

Page 21: Responsive principles

2121

Page 22: Responsive principles

2222

Page 23: Responsive principles

2323

Respond to more than scale.

Page 24: Responsive principles

2424

Page 25: Responsive principles

2525

Principles > Patterns > Templates > Pages

Page 26: Responsive principles

2626

Features != pages

Page 27: Responsive principles

2727

Page 28: Responsive principles

2828

Design for every screen.

Page 29: Responsive principles

2929

Then design for each screen.

Page 30: Responsive principles

3030

Enhance for each platform.

Page 31: Responsive principles

3131

Stick to your principles.

Page 32: Responsive principles

3232

Design to make decisions.

Page 33: Responsive principles

3333

Products, not platforms.

Page 34: Responsive principles

3434

Customers, not users.

Page 35: Responsive principles

3535

Is it still any good?

Page 36: Responsive principles

3636

Is it still the right thing to make?

Page 37: Responsive principles

3737

Then change your principles.

Page 38: Responsive principles

3838

Execute for every screen.

Page 39: Responsive principles

3939

Data and services first.

Page 40: Responsive principles

4040

Build for the future.

Page 41: Responsive principles

4141

Layers and planning.

Page 42: Responsive principles

4242

Do everything once.

Page 43: Responsive principles

4343

Platform teams should borrow and cheat.

Page 44: Responsive principles

4444

Yes.

Page 45: Responsive principles

4545

Page 46: Responsive principles

4646

Don’t copy that last chart.

Page 47: Responsive principles

4747

Actually, don’t copy anything I’ve done.

Page 48: Responsive principles

4848

Principles > Patterns > Templates

Page 49: Responsive principles

4949

Principles > Practices > Tactics

Page 50: Responsive principles

5050

Responsive,native,physical,buildable,extensible.

Page 51: Responsive principles

51

Steven Hoober

[email protected]

+1 816 210 0455

@shoobe01

shoobe01 on:

www.4ourth.com