Clients & the Responsive Design Process

I explain the process Bearded is using for RWD, and how clients figure into that. Updated for project managers for the 2014 Digital PM Summit!

Transcript

1. Hi, I’m Matt Griffin
   I’m on the Twitter @ElefontPress @BeardedStudio @FutureIsNext @WoodTypeRevival
3. Clients & Responsive Web Design
4. Process
5. “What [deliverables] really are is
   this whole thing of getting the idea
   out of your head – into a form where
   you think it’s communicating what you
   want it to do – and then you put it in
   front of somebody else.” –Jared Spool, UIE
6. It’s a Conversation
7. No More Big Reveal
8. No More Big Reveal • What’s the quickest path to the clearest communication? • How do we keep the project moving?
9. Get Small
10. Break Up Those Big Deliverables • Allow you to pivot more easily • Keep clients feeling heard • Avoid drastic revisions • Build trust
11. Kick-off http://kevinmhoffman.com/
12. Interviews • What problems have you noticed with the current site? • What kinds of information, features, or functionality need to be part of the site that aren’t there now? • What can change; what should stay the same? • Does this site need to generate revenue? • How would you define success for this project? • What do you think will be the biggest challenges to the project's success
16. Text-Based Deliverables
17. Strategy Document
18. Content Audit
19. Content Style Guide
20. Site Maps
21. User Workflows
22. Finally, the Visual Things!
23. Content & Views • Identify content types • Determine fields for those content types • Enumerate the views for each one
24. Collaborative View Sketching
25. Lorem Ipsum?
26. How About Real Copy? • Better character / word count • Confirm the purpose of the copy • Make sure it’s necessary or realistic
27. How About Real Copy?
28. Mark Up That Content
29. Mobile Wireframes
30. Colors $text-color: #888; $heading-color: $text-color; $text-color-subtle: lighten($text-color, 30%); $link-color: #555; $link-color-hover: darken($link-color, 15%); $highlight-color: #333; $highlight-color-hover: darken($highlight-color, 15%);
31. Colors $border-color: #ccc; $background-color: #fff; $background-color-subtle: #eee; $footer-color: $link-color;
32. Images
33. Images
34. Images
35. Typography
36. Reusable Elements
37. Reusable Elements
39. Where’s That Breakpoint Go?
41. Thanks Obama http://bgr.com/2013/06/17/samsung-galaxy-devices-chart/
42. Responsive Wireframes http://alistapart.com/column/start-coding-with-wireframes
44. In-Browser Wireframes • More efficient to show all viewport widths • They can show interactions and navigational workflow • You can run user testing on them • Earlier user testing is better user testing
45. Wait It Gets Better
46. Element Collage
47. Element Collage Iteration
48. HTML & CSS Interactive Mock-Ups
49. Wireframes → Mockups
51. HTML / CSS Styleguide
53. Also, OK Yeah, Photoshop Comps
54. Collaboration!
55. Learning to Code?
56. Working Closer to the Medium
57. Working Closer to the Medium • Better understanding of scope, effort, and time • Increases team flexibility • Deepens understanding of what we’re doing • Closer team relationships
58. Let Me Tell You a Story
59. It Was Bad
60. Communication!
61. Fear Not
63. HTML & CSS Book http://htmlandcssbook.com/
64. HTML & CSS Book http://htmlandcssbook.com/
65. More Advanced Reading • abookapart.com • alistapart.com • oreilly.com
66. Learn the Web from the Web! • lynda.com • teamtreehouse.com • codecademy.com
67. Learn the Web from the Web! • lynda.com • teamtreehouse.com • codecademy.com
68. The People You Work With
69. It’s Going To Be OK
71. Technology!
72. The Internet Is Your Friend Listen Share Adapt Repeat
73. Let’s Do This
74. I’m still Matt Griffin
    And I give you all the thanks! @ElefontPress @BeardedStudio @FutureIsNext @WoodTypeRevival