Responsive Design Process

Responsive Design Process

A look at some tools for better collaboration between designers and developers when working with responsive design

9c9bcdbab2f098f69b3adadde6ee2936?s=128

Natalie MacLees

February 01, 2015
Tweet

Transcript

  1. Responsive Design Process for Designers and Developers by Natalie MacLees

    *
  2. None
  3. Introductions *

  4. What is responsive design? *

  5. A few quick things… *

  6. One hour!?!?

  7. Lots of tools

  8. No single correct way

  9. The things we *do* know *

  10. Blurred lines

  11. Collaboration

  12. Usable deliverables

  13. Device agnostic

  14. A proposed process *

  15. Discovery

  16. Content strategy

  17. Content prioritization

  18. Layout sketches

  19. Common responsive layout patterns

  20. Mostly fluid

  21. Column drop

  22. Layout shifter

  23. Off-Canvas

  24. Layout sketches

  25. Develop-y Design Work

  26. Typography Browser or Typecast http://typecast.com/

  27. Shape

  28. Color

  29. Style tiles http://styletil.es/

  30. Style prototypes https://github.com/sparkbox/style-prototype

  31. Element collages http://danielmall.com/articles/rif-element-collages/

  32. Design-y Development Work

  33. Developer Sprint Review Action Items

  34. Experiment *

  35. Collaborate *

  36. Communicate *

  37. Questions? *

  38. http://goo.gl/9jUJPO