The On-Ramp to a Successful Responsive Workflow

Slide 1

Slide 1 text

#AIM6 The On-Ramp to a Successful Responsive Workﬂow Peter Anglea @peteranglea Bob Jones University

Slide 2

Slide 2 text

#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.

Slide 3

Slide 3 text

#AIM6 A Brief History of RWD 2010 RWD is born 2011 2012 2013 RWD is slowly adopted RWD all the things! RWD best practices

Slide 4

Slide 4 text

#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.

Slide 5

Slide 5 text

#AIM6

Slide 6

Slide 6 text

#AIM6 So, what’s the solution?

Slide 7

Slide 7 text

#AIM6 So, what’s the solution?

Slide 8

Slide 8 text

#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.

Slide 9

Slide 9 text

#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/

Slide 10

Slide 10 text

#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/

Slide 11

Slide 11 text

#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/

Slide 12

Slide 12 text

#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

Slide 13

Slide 13 text

#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

Slide 14

Slide 14 text

#AIM6 Change Management • Awareness • Desire • Knowledge • Ability • Reinforcement ADKAR is a registered trademark of Prosci Research. (ugly clip art… noooo!!)

Slide 15

Slide 15 text

#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?

Slide 16

Slide 16 text

#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

Slide 17

Slide 17 text

#AIM6 My o∞ce’s score… A D K A R 5 3 1 2 4

Slide 18

Slide 18 text

#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

Slide 19

Slide 19 text

#AIM6 Awareness sitefinity.com/cms-mobile/responsive-design-graph

Slide 20

Slide 20 text

#AIM6 Desire “Are they willing to change their familiar, comfortable workflow?” •  You could show numbers…

Slide 21

Slide 21 text

#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

Slide 22

Slide 22 text

#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.

Slide 23

Slide 23 text

Slide 24

Slide 24 text

#AIM6 Why Choose BJU? behance.net/gallery/BJU-Brochure/6645729

Slide 25

Slide 25 text

#AIM6 Why Choose BJU? bju.edu/why

Slide 26

Slide 26 text

#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

Slide 27

Slide 27 text

#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

Slide 28

Slide 28 text

#AIM6 Knowledge “Do they know how to work responsively?” •  How best to teach them? – Books? – Conferences? – Self-education?

Slide 29

Slide 29 text

Slide 30

Slide 30 text

#AIM6 Responsive Academy ™ •  Reading lists •  Video classes/tutorials •  Example sites and demos •  Information sharing sessions

Slide 31

Slide 31 text

#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)

Slide 32

Slide 32 text

#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

Slide 33

Slide 33 text

#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

Slide 34

Slide 34 text

#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

Slide 35

Slide 35 text

#AIM6 Workﬂow Problems to fix •  Who owns/runs point on projects? •  How to avoid the “big reveal?” •  How/where to get sign-oﬀ(s)? •  How best to collaborate? •  How to inform clients about RWD?

Slide 36

Slide 36 text

#AIM6 Workﬂow •  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

Slide 37

Slide 37 text

#AIM6 Workﬂow Discover Define Design Develop Deploy (bask in its awesomeness)

Slide 38

Slide 38 text

#AIM6 Discover •  Requirements Gathering •  Client Questionnaire •  Content Inventory •  Project Charter •  Client sign-oﬀ

Slide 39

Slide 39 text

#AIM6 Deﬁne •  Creative Brief •  Information Architecture •  Establish content priority •  B/W wireframes •  Style guides / Styletiles •  Client sign-oﬀ

Slide 40

Slide 40 text

#AIM6 Design •  Rough Photoshop design (desktop, small) •  Code preliminary design •  Iterate coding/designing •  Complete basic HTML/CSS templates •  Client sign-oﬀ

Slide 41

Slide 41 text

#AIM6 Develop •  Create content pages •  CMS integration •  Design review/spot check •  Editorial review (proofing) •  Client sign-oﬀ

Slide 42

Slide 42 text

#AIM6 Deploy •  Pre-launch – User training – Transition/update/maintenance plans – Design archival •  Launch website •  (party)

Slide 43

Slide 43 text

#AIM6 Workﬂow Discover Define Design Develop Deploy

Slide 44

Slide 44 text

#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

Slide 45

Slide 45 text

#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

Slide 46

Slide 46 text

#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

Slide 47

Slide 47 text

#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.

Slide 48

Slide 48 text

#AIM6 RWD is a game-changer. Game-changers require a fundamental change in our workflow. Change means investing in people.

Slide 49

Slide 49 text

#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/

Slide 50

Slide 50 text

#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/

Slide 51

Slide 51 text

#AIM6 Thank you! Questions? @peteranglea [email protected] bit.ly/rwdonramp blogs.bju.edu/webteam