Your SlideShare is downloading. ×
A Process for Responsive Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

A Process for Responsive Design

238
views

Published on

FITC Toronto …

FITC Toronto
December 1, 2012

Published in: Design, Technology, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
238
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. /A Process for Responsive Design
  • 2. VerneHo Co-founder + Creative Director Jet Cooper @verneho 2
  • 3. We design products for web, mobile and tablet devices 3
  • 4. Peopleweworkwith We’ve had an opportunity to work alongside leading Canadian startups, brands, and organizations 4
  • 5. Community We take an active role in changing the way people think about design in our communities 5
  • 6. Programs We get hands on by helping Canada’s highest potential startups better integrate design 6
  • 7. Me+JetCooper Creative Direction + Process 7
  • 8. Process A process exists to support creativity, not resist it
  • 9. Today 1. Getting Started 2. Our Process 9
  • 10. Disclaimers 1. This is only our approach 2. This is best case scenario 3. This is difficult 4. There is no such thing as perfect, just perfect-er 10
  • 11. GettingStarted Considerations for starting a responsive design project
  • 12. Ourecosystem ∞ Devices 12
  • 13. WhyRWD? A common access point Continuity in the experience A tailored experience 13
  • 14. Andforus? Scalability + Maintainability 14
  • 15. Differencestoexpect Nature of planning Pace of iterations Degree of finalization Client sign-offs Workflows & Roles 15
  • 16. Beneighbours There’s no substitute for pointing at a screen 16
  • 17. Startdevsearly An equally important voice 17
  • 18. OurProcess How we do it
  • 19. Contentisstillking Ask yourself: what matters most? 19
  • 20. 20
  • 21. 21 1 2 3 4 5 6
  • 22. 22 1 3 4 ... 2
  • 23. 23 1 3 4 ... * * * 2
  • 24. Designisstilla holisticactivity Design for all screens in mind 24
  • 25. Compsareexpensive Minimize the comps you need to explicitly design 25
  • 26. 26
  • 27. 27
  • 28. 28
  • 29. 29 1 2 3
  • 30. 30
  • 31. 31
  • 32. Doitlive! Design can (and should) happen in a browser, too 32
  • 33. 33
  • 34. 34
  • 35. 35
  • 36. 36
  • 37. 37
  • 38. 38
  • 39. 39
  • 40. Dynamicduo Design informs, dev informs design 40
  • 41. Warning This takes practice 41
  • 42. Tips More things to keep in mind
  • 43. Choosingscreens It’s not supposed to be one size fits all Desktops Laptops Tablets Mobile Televisions Kiosks Large Format Displays ... 43
  • 44. Definingbreakpoints It’s not always just about the devices 44
  • 45. 45 780px840px
  • 46. Testing Build your test suite 46
  • 47. InSummary... A quick recap
  • 48. InSummary... 1. Ask yourself “what matters most?” 2. Design is still a holistic activity 3. Comps are expensive 4. Iterate in a live environment 48
  • 49. Whenallelsefails 1. Stay lean 2. Open conversation channels 3. Think about obsess over process 49
  • 50. Thanks! @verneho jetcooper.com
  • 51. Questions + Answers (Possibly)