The On-Ramp to a Successful Responsive Workflow

Presented at HighEdWeb 2013 in Buffalo, NY (BEST OF CONFERENCE). See bit.ly/rwdonramp for supplemental resources

Transcript

1. #AIM6 The On-Ramp to a Successful Responsive Workflow Peter Anglea @peteranglea Bob Jones University
2. #AIM6 About me •  Web Developer for BJU Marketing & Enrollment •  Part-time social media coordinator for Twitter, Instagram, & Facebook •  Dabbler in design, content, UX, etc. •  Oh, and I have a M.Mus.
3. #AIM6 A Brief History of RWD 2010 RWD is born 2011 2012 2013 RWD is slowly adopted RWD all the things! RWD best practices
4. #AIM6 RWD is the biggest paradigm shi! in web design in the last decade. This requires a re-thinking of how we do web design. The old practices just don’t work.
5. #AIM6
6. #AIM6 So, what’s the solution?
7. #AIM6 So, what’s the solution?
8. #AIM6 So, what’s the solution? •  No two workflows look exactly alike. •  Your workflow will be as unique as your people. •  Implementing a workflow is hard because working with people is hard.
9. #AIM6 “ If I were on a team organized around fixed-width desktop-centric production I wouldn’t want to be expected to immediately start building responsive sites at the usual pace… Trent Walton, Paravel trentwalton.com/2013/02/07/where-to-start/
10. #AIM6 “ Giving teams and individuals a cushion to get back up to speed a"er taking a new direction helps instill a sense of purpose instead of panic… Trent Walton, Paravel trentwalton.com/2013/02/07/where-to-start/
11. #AIM6 “ This cushion could be in the form of extra time for reading and research, extra time budgeted into a project, or even better, a responsive hack week project. Trent Walton, Paravel trentwalton.com/2013/02/07/where-to-start/
12. #AIM6 “ What I’ve learned is that being successful on more complicated projects (like a single site that has to work on any device) is more dependent on having great people than great process… Ben Callahan, Sparkbox qcatpro.com/blog/ben-callahan-responsive- web-design-broken-process
13. #AIM6 “ So, my short advice would be, "Invest in your people and let them solve the problems you pay them to solve." Ben Callahan, Sparkbox qcatpro.com/blog/ben-callahan-responsive- web-design-broken-process
14. #AIM6 Change Management • Awareness • Desire • Knowledge • Ability • Reinforcement ADKAR is a registered trademark of Prosci Research. (ugly clip art… noooo!!)
15. #AIM6 Change Management •  Awareness: Are my co-workers aware of RWD? And do they perceive it as a good thing? •  Desire: Are they willing to give up their comfortable, familiar workflow to accommodate RWD? •  Knowledge: Do they know how to write/ design/code for RWD? •  Ability: Are they capable of applying their knowledge to the task at hand? •  Reinforcement: How can we keep up to speed with the ever-changing web?
16. #AIM6 “ I could see the web changing. And I was ready to take the next steps, but I wasn't sure what all was involved… Will, Creative Director
17. #AIM6 My o∞ce’s score… A D K A R 5 3 1 2 4
18. #AIM6 Awareness “Are they aware of RWD?” •  “2013 is the Year of Responsive Web Design” – Mashable •  “Why You Need to Prioritize Responsive Design Right Now” - Forbes
19. #AIM6 Awareness sitefinity.com/cms-mobile/responsive-design-graph
20. #AIM6 Desire “Are they willing to change their familiar, comfortable workflow?” •  You could show numbers…
21. #AIM6 “ Our mobile traffic has increased 16.61% since last year, and our tablet traffic has seen a 135.18% jump. All while our desktop traffic dropped 24.77%. This effort was a MUST. Jeremy, Senior Manager
22. #AIM6 Desire “Are they willing to change their familiar, comfortable workflow?” •  You could show numbers… •  You could show case-studies… •  Or you could do show-and-tell.
23. #AIM6 “ This cushion could be in the form of extra time for reading and research, extra time budgeted into a project, or even better, a responsive hack week project. Trent Walton, Paravel trentwalton.com/2013/02/07/where-­‐to-­‐start/  
24. #AIM6 Why Choose BJU? behance.net/gallery/BJU-Brochure/6645729
25. #AIM6 Why Choose BJU? bju.edu/why
26. #AIM6 “ I was very surprised by how seamlessly the project went from design to web. Laying a basic wireframe foundation to build on really helped to iron out possible coding and design issues ahead of time, facilitating a smooth transition. Kaylee, Art Director
27. #AIM6 “ Working closely with the developer from the very beginning of the project helped me understand how the elements I had designed would translate to the web. It was a great learning experience! Kaylee, Art Director
28. #AIM6 Knowledge “Do they know how to work responsively?” •  How best to teach them? – Books? – Conferences? – Self-education?
29. #AIM6 “ This cushion could be in the form of extra time for reading and research, extra time budgeted into a project, or even better, a responsive hack week project. Trent Walton, Paravel trentwalton.com/2013/02/07/where-to-start/
30. #AIM6 Responsive Academy ™ •  Reading lists •  Video classes/tutorials •  Example sites and demos •  Information sharing sessions
31. #AIM6 Responsive Academy ™ •  Three weeks, three basic topics – “What is RWD and why do we need it?” (ADkar) – “What is my role in RWD?” (adKar) – “How will this look in practice?” (adkAr)
32. #AIM6 “ We emerged with a more structured, clear plan for tackling responsive web development by considering the mutual needs of the designers and developers…. Greg, Graphic Designer
33. #AIM6 Ability “Can they put their newly-acquired skills into practice?” •  This means creating a workflow! 1.  Adheres to the principles of RWD 2.  Input and consensus from all teams 3.  Tackles the big problems with the old workflow
34. #AIM6 “ RWD doubles as a conflict eliminator because it forces everyone to evaluate and adapt individual workflows in order to create a better final product. Jon, Copy Writer
35. #AIM6 Workflow Problems to fix •  Who owns/runs point on projects? •  How to avoid the “big reveal?” •  How/where to get sign-off(s)? •  How best to collaborate? •  How to inform clients about RWD?
36. #AIM6 Workflow •  Our workflow creation process – Invited all team leaders to brainstorm (giving time for advance preparation) – Conducted a series of a few hour-long meetings to get feedback and input from all parties – Presented final workflow to everyone
37. #AIM6 Workflow Discover Define Design Develop Deploy (bask in its awesomeness)
38. #AIM6 Discover •  Requirements Gathering •  Client Questionnaire •  Content Inventory •  Project Charter •  Client sign-off
39. #AIM6 Define •  Creative Brief •  Information Architecture •  Establish content priority •  B/W wireframes •  Style guides / Styletiles •  Client sign-off
40. #AIM6 Design •  Rough Photoshop design (desktop, small) •  Code preliminary design •  Iterate coding/designing •  Complete basic HTML/CSS templates •  Client sign-off
41. #AIM6 Develop •  Create content pages •  CMS integration •  Design review/spot check •  Editorial review (proofing) •  Client sign-off
42. #AIM6 Deploy •  Pre-launch – User training – Transition/update/maintenance plans – Design archival •  Launch website •  (party)
43. #AIM6 Workflow Discover Define Design Develop Deploy
44. #AIM6 “ 'Thinking Responsively' meant lots of time… communicating with designers, developers and content specialists. The final product marked a change in our mentality and our level of output. Will, Creative Director
45. #AIM6 “ Integrating a process through which our design, content and web teams were collaborating much earlier in the process helps avoid the web team having to “work their magic” on the design when coding. Jeremy, Senior Manager
46. #AIM6 “ Instead of moving forward through specified tasks with assigned users, the workflow was much more organic. I enjoyed constant communication with the writers, creative director, web developers and clients. Kaylee, Art Director
47. #AIM6 Reinforcement “How can we keep up with the pace of the web? And not go backwards?” •  Stick to the workflow! You will have to modify it, but don’t budge on the non-negotiables. •  Don’t stop the information sharing.
48. #AIM6 RWD is a game-changer. Game-changers require a fundamental change in our workflow. Change means investing in people.
49. #AIM6 “ Above all, the key is to not get frustrated if the process gets sloppy or less efficient than we’re accustomed to. While projects may take longer at first, the effort put forth to ensure that teams are headed in the right direction will pay off exponentially. Trent Walton, Paravel trentwalton.com/2013/02/07/where-to-start/
50. #AIM6 “ And remember, it’s less about how we start than where we end up. The trick is simply to get going. Trent Walton, Paravel trentwalton.com/2013/02/07/where-to-start/
51. #AIM6 Thank you! Questions? @peteranglea panglea@bju.edu bit.ly/rwdonramp blogs.bju.edu/webteam