A Process for Responsive Design

/A Process for Responsive Design

Verne HoCo-founder + Creative DirectorJet Cooper

@verneho

2

We design products for web, mobile and tablet devices

3

People we work withWe’ve had an opportunity to work alongside leading Canadian startups, brands, and organizations

4

CommunityWe take an active role in changing the way people think about design in our communities

5

ProgramsWe get hands on by helping Canada’s highest potential startups better integrate design

6

Me + Jet CooperCreative Direction + Process

7

ProcessA process exists to support creativity, not resist it

Today1. Getting Started2. Our Process

9

Disclaimers1. This is only our approach2. This is best case scenario3. This is difficult4. There is no such thing as perfect, just perfect-er

10

Getting StartedConsiderations for starting a responsive design project

Our ecosystem∞ Devices

12

Why RWD?A common access pointContinuity in the experienceA tailored experience

13

And for us?Scalability + Maintainability

14

Differences to expectNature of planningPace of iterationsDegree of finalizationClient sign-offsWorkflows & Roles

15

Be neighboursThere’s no substitute for pointing at a screen

16

Start devs earlyAn equally important voice

17

Our ProcessHow we do it

Content is still kingAsk yourself: what matters most?

19

20

21

1

2

3

4

5

6

22

1

3

4 ...

2

23

1

3

4 ...

*

*

*

2

Design is still a holistic activityDesign for all screens in mind

24

Comps are expensiveMinimize the comps you need to explicitly design

25

26

27

28

29

1 2 3

30

31

Do it live!Design can (and should) happen in a browser, too

32

33

34

35

36

37

38

39

Dynamic duoDesign informs, dev informs design

40

WarningThis takes practice

41

TipsMore things to keep in mind

Choosing screensIt’s not supposed to be one size fits all

Desktops

Laptops

Tablets

Mobile

Televisions

Kiosks

Large Format Displays

...

43

Defining breakpointsIt’s not always just about the devices

44

45

780px840px

TestingBuild your test suite

46

In Summary...A quick recap

In Summary...1. Ask yourself “what matters most?”2. Design is still a holistic activity3. Comps are expensive4. Iterate in a live environment

48

When all else fails1. Stay lean2. Open conversation channels3. Think about obsess over process

49

Thanks!@vernehojetcooper.com

Questions+ Answers (Possibly)