Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The On-Ramp to a Successful Responsive Workflow

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

5c415d285e8ae6a5f8af9cbef87c888c?s=128

Peter Anglea

October 07, 2013
Tweet

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