A Process for Responsive Design
description
Transcript of A Process for Responsive Design
![Page 1: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/1.jpg)
/A Process for Responsive Design
![Page 2: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/2.jpg)
Verne HoCo-founder + Creative DirectorJet Cooper
@verneho
2
![Page 3: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/3.jpg)
We design products for web, mobile and tablet devices
3
![Page 4: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/4.jpg)
People we work withWe’ve had an opportunity to work alongside leading Canadian startups, brands, and organizations
4
![Page 5: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/5.jpg)
CommunityWe take an active role in changing the way people think about design in our communities
5
![Page 6: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/6.jpg)
ProgramsWe get hands on by helping Canada’s highest potential startups better integrate design
6
![Page 7: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/7.jpg)
Me + Jet CooperCreative Direction + Process
7
![Page 8: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/8.jpg)
ProcessA process exists to support creativity, not resist it
![Page 9: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/9.jpg)
Today1. Getting Started2. Our Process
9
![Page 10: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/10.jpg)
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
![Page 11: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/11.jpg)
Getting StartedConsiderations for starting a responsive design project
![Page 12: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/12.jpg)
Our ecosystem∞ Devices
12
![Page 13: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/13.jpg)
Why RWD?A common access pointContinuity in the experienceA tailored experience
13
![Page 14: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/14.jpg)
And for us?Scalability + Maintainability
14
![Page 15: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/15.jpg)
Differences to expectNature of planningPace of iterationsDegree of finalizationClient sign-offsWorkflows & Roles
15
![Page 16: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/16.jpg)
Be neighboursThere’s no substitute for pointing at a screen
16
![Page 17: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/17.jpg)
Start devs earlyAn equally important voice
17
![Page 18: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/18.jpg)
Our ProcessHow we do it
![Page 19: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/19.jpg)
Content is still kingAsk yourself: what matters most?
19
![Page 20: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/20.jpg)
20
![Page 21: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/21.jpg)
21
1
2
3
4
5
6
![Page 22: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/22.jpg)
22
1
3
4 ...
2
![Page 23: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/23.jpg)
23
1
3
4 ...
*
*
*
2
![Page 24: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/24.jpg)
Design is still a holistic activityDesign for all screens in mind
24
![Page 25: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/25.jpg)
Comps are expensiveMinimize the comps you need to explicitly design
25
![Page 26: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/26.jpg)
26
![Page 27: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/27.jpg)
27
![Page 28: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/28.jpg)
28
![Page 29: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/29.jpg)
29
1 2 3
![Page 30: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/30.jpg)
30
![Page 31: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/31.jpg)
31
![Page 32: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/32.jpg)
Do it live!Design can (and should) happen in a browser, too
32
![Page 33: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/33.jpg)
33
![Page 34: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/34.jpg)
34
![Page 35: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/35.jpg)
35
![Page 36: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/36.jpg)
36
![Page 37: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/37.jpg)
37
![Page 38: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/38.jpg)
38
![Page 39: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/39.jpg)
39
![Page 40: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/40.jpg)
Dynamic duoDesign informs, dev informs design
40
![Page 41: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/41.jpg)
WarningThis takes practice
41
![Page 42: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/42.jpg)
TipsMore things to keep in mind
![Page 43: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/43.jpg)
Choosing screensIt’s not supposed to be one size fits all
Desktops
Laptops
Tablets
Mobile
Televisions
Kiosks
Large Format Displays
...
43
![Page 44: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/44.jpg)
Defining breakpointsIt’s not always just about the devices
44
![Page 45: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/45.jpg)
45
780px840px
![Page 46: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/46.jpg)
TestingBuild your test suite
46
![Page 47: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/47.jpg)
In Summary...A quick recap
![Page 48: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/48.jpg)
In Summary...1. Ask yourself “what matters most?”2. Design is still a holistic activity3. Comps are expensive4. Iterate in a live environment
48
![Page 49: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/49.jpg)
When all else fails1. Stay lean2. Open conversation channels3. Think about obsess over process
49
![Page 51: A Process for Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022042813/547ea5bfb4795993508b4bd9/html5/thumbnails/51.jpg)
Questions+ Answers (Possibly)