1. Jeremy Loyd THE RESPONSIVE DESIGN PROCESS @jeremyloyd

5. There’s not a single, best RWD process The process depends on your team makeup and type of project The process is constantly changing We’re all figuring this out together

6. WEB DESIGNERS STILL USE PHOTOSHOP!

7. A SHIFT IN MINDSET A SHIFT IN PROCESS

8. Before RWD, things were pretty simple.

9. 1024ish 768ish fixed width

10. DESIGNFRONT-ENDBACK-ENDLAUNCH! Linear Workflow

11. DESIGNFRONT-ENDBACK-ENDLAUNCH! THINK ABOUT USERS Linear Workflow

12. DESIGNFRONT-ENDBACK-ENDLAUNCH! Linear Workflow THINK ABOUT USERS THROW IN SOME CONTENT

13. Slightly Better Linear Workflow CONTENTUXDESIGNFRONT-ENDBACK-ENDLAUNCH!

14. Why hello, RWD.

16. Linear Workflow Now with RWD! CONTENTUXDESIGNFRONT-ENDBACK-ENDLAUNCH!

17. Ditto! Now with RWD! Linear Workflow CONTENTUXDESIGNFRONT-ENDBACK-ENDLAUNCH! Me too!

18. This doesn’t work.

19. Linear Workflow Problem

20. We need to invite others into the process (yes, this includes the client)

24. When the process is collaborative, the quality as a whole improves

25. RWD is More Than Layout Content Usability Performance Findability/SEO

26. Linear Workflow Pros Familiar Manageable Aligns with Corporate Structure

27. Linear Workflow Cons Discipline Driven Encourages Isolation

28. A Responsive Workflow Pros Natural Decisions Encourages Collaboration Encourages Iteration Better Results

29. A Responsive Workflow Cons Requires Change May Conflict with Organizational Structure Dependent on Team Make-up

31. THE RWD PROCESS A SHIFT IN PROCESS

32. A Process Myth ‣ Each client deliverable needs to look more like a final, beautiful end- product than the previous one.

33. Which Results In ‣ Pushing toward nearly-designed wireframes quickly and completely designed comps soon after. ‣ (This sets up all sorts of unrealistic client expectations.)

34. A Better Approach ‣ Deliverables that best serve the organization and prioritization of content and function across multiple resolutions. ‣ (Not deliverables made just to impress clients.)

35. Our Deliverables Research Deliverables Content Deliverables Priority Deliverables Style Deliverables Functional Deliverables

36. Let’s Focus On... Research Deliverables Content Deliverables Priority Deliverables Style Deliverables Functional Deliverables

37. Goal of Priority Deliverables: Establish priority of content and/or functionality

38. Content Priority Prototype Takes the place of a traditional wireframe. As much real content as you can. Linear in nature, priority implied. Possibly created in HTML, viewed in a browser. Generated by content/UX people.

39. Other Priority Tools Content Priority Guide (keynote) Frameworks (foundation, pure)

40. Frameworks

41. Goal of Style Deliverables: To communicate the general look and feel of the website

42. Style Prototype Like Style Tiles, but in the browser (styletil.es). Very fast to build. Accurate web typography. Easy to show web interaction. Client reviews in their browser of preference.

43. Other Style Tools Photoshop Comps (Everyone) Style Tiles (Samantha Warren) Element Collages (Dan Mall)

44. Element Collages by Dan Mall

45. Cool, so what happens next?

46. Research Deliverables Content Deliverables Priority Deliverables Style Deliverables Functional Deliverables CREATE DESIGN ASSETS

47. A different viewpoint Research Deliverables Content Deliverables Priority Deliverables Style Deliverables Functional Deliverables

48. A different viewpoint Research Updates Content Updates Priority Updates Style Updates Functional Updates

49. A different viewpoint Research Updates Content Updates Priority Updates Style Updates Functional Updates ‣ Only Deliverable: a website!

50. To Summarize There’s no right RWD process Evaluate what’s right for your team and the projects you work on Changing process is a challenge – must have buy-in from management and those doing the work It’s not easy, we’re still figuring it out

51. “The truly responsive design web designer wasn’t born until after the launch of the iPhone. We haven’t seen his or her work yet.” Andy Clarke http://the-pastry-box-project.net/andy-clarke/2012-april-8/ http://the-pastry-box-project.net/andy-clarke/2012-april-8/

53. THANKS! @jeremyloyd jeremy@heysparkbox.com