a process for responsive design
DESCRIPTION
FITC Toronto December 1, 2012TRANSCRIPT
/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
Questions+ Answers (Possibly)