Responsive goes Agile!

1.722 Aufrufe

Veröffentlicht am

Dynamisches Umdenken des Projektmanagements in Responsive-Projekten.
Ein Manifest.

Von Dirk Pogrzeba

Veröffentlicht in: Mobil
0 Kommentare
16 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.722
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
16
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive goes Agile!

  1. 1. RESPONSIVE GOES AGILE! DYNAMISCHES UMDENKEN DES PROJEKTMANAGEMENTS IN RESPONSIVE-PROJEKTEN. MÜNCHEN, 16.09.2014 Dirk Pogrzeba Beratung • Strategie • Training dirk@pogrzeba.net +49-173-5148656 16.09.2014 | Seite 1 RESPONSIVE GOES AGILE!
  2. 2. Profil & Expertise Dirk Pogrzeba Projektmanagement / Consulting • Seit 2007 freier Berater und Projektleiter • Geschäftsführer, Unitleiter und Head of Project Management in großen Agenturen (u.a. Antwerpes AG, I-D Media AG) • Mehr als 18 Jahre Erfahrung in Beratung und Projektmanagement in digitalen Projekten für internationale Kunden 16.09.2014 | Seite 2 RESPONSIVE GOES AGILE! Didaktik / Training • Seit 2007 freier Trainer • Lehraufträge an verschiedenen Hochschulen und Akademien • Studium Medieninformatik mit Auszeichnung • Studienschwerpunkt in den Bereichen Mediendidaktik und Medienpsychologie Marketing / Digital • Mehr als 18 Jahre Erfahrung in digitalen Medien • Umsetzung von zahlreichen Projekten im digitalen Umfeld • Schwerpunkte: Digitale Strategien, Responsive Webdesign, eCRM, Agiles Projektmanagement • Langjährige Erfahrungen mit internationalen Marken in unterschiedlichen Branchen
  3. 3. INTRO WARUM RESPONSIVE? 16.09.2014 | Seite 3 RESPONSIVE GOES AGILE!
  4. 4. INTRO: WARUM RESPONSIVE? Das Internet 2004... 16.09.2014 | Seite 4 RESPONSIVE GOES AGILE! ... am Beispiel von Microsoft.de
  5. 5. INTRO: WARUM RESPONSIVE? ... versus: Das Internet 2014 16.09.2014 | Seite 5 RESPONSIVE GOES AGILE! ... am Beispiel von Microsoft.de
  6. 6. INTRO: WARUM RESPONSIVE? Der Online-Nutzer im Jahr 2014 ist mobil DAS MOBILE INTERNET IST AUF DEM VORMARSCH. 32 Mio. der Deutschen nutzen das mobile Internet1 2013/14 überholt das mobile Internet erstmals das stationäre Internet1 20% der Internetnutzer surfen überwiegend mobil1 MOBILE ENDGERÄTE FINDEN EINE IMMER BREITERE NUTZUNG. 70% nutzen das mobile Internet via Smartphone3 33,4 Mio. der Deutschen werden bis 2016 ein Tablet nutzen5 3,4 Mrd. Apps werden in 2014 heruntergeladen2 77% beträgt der Marktanteil von Android-Smartphones6 Quellen: 1AGOF/Statista, 2014; ⇢Bitkom, 2014; ⇡Accenture/Statista, 2013; 4Google, 2012; 5eMarketer/Statista, 2013; 6Kantar/Statista, 2014 16.09.2014 | Seite 6 RESPONSIVE GOES AGILE!
  7. 7. INTRO: WARUM RESPONSIVE? Konsumenten nutzen oft mehrere Endgeräte Quellen: The New Multi-Screen World: Understanding Cross-Platform Consumer Behaviour; Google, 2012 16.09.2014 | Seite 7 RESPONSIVE GOES AGILE! 90% der medialen Nutzung ist bildschirm-basiert 90% nutzen mehrere Endgeräte sequenziell für Aufgaben (Recherche, Käufe etc.)
  8. 8. INTRO: WARUM RESPONSIVE? Konsumenten nutzen oft mehrere Endgeräte SMARTPHONES TABLETS sind der häufigste Startpunkt für Online-Aktivitäten 16.09.2014 | Seite 8 RESPONSIVE GOES AGILE! sind häufig der Startpunkt für Online- Shopping und Reiseplanung MOBILE DEVICES SIND IMMER AN: ES GIBT KEIN OFFLINE MEHR. NUTZER SIND ALWAYS ON. Quellen: The New Multi-Screen World: Understanding Cross-Platform Consumer Behaviour; Google, 2012
  9. 9. INTRO: WARUM RESPONSIVE? Anforderungen der Nutzer an zeitgemäße Websites tbd • Eigenes Webdesign für jedes Endgerät / Nutzung PERFORMANCE U S A B I L I T Y EFFIZIENZ DESIGN EFFIZIENZ PERFORMANCE CHERHEIT USABILITY DESIGN R E L E V A N Z SERVICE D E S I G N EFFIZIENZ USABILITY RELEVANZ SICHERHEIT USABILITY HAPTIK PERFORMANCE S I C H E R H E I T RELEVANZ DESIGN PERFORMANCE SERVICE 16.09.2014 | Seite 9 RESPONSIVE GOES AGILE!
  10. 10. INTRO: WARUM RESPONSIVE? Responsive Web Design ist ein weites Feld FLUIDE LAYOUTS DEVICE-TESTING FRONTEND-PROGRAMMIERUNG MOBILE CONTENT STRATEGIE HTML5 RESPONSIVE VIRTUAL PIXELS PROTOTYPING MEDIA QUERIES UMBRUCHSTUFEN 16.09.2014 | Seite 10 RESPONSIVE GOES AGILE! CSS3 OFF-CANVAS-NAVIGATION ITERATIVE DESIGN PERFORMANCE MULTIPLE ENDGERÄTE TOUCH-OPTIMIERUNG TABLET MOBILE BROWSER-KOMPATIBILITÄT VIEWPORTS REAL PIXELS LIVING STYLEGUIDE
  11. 11. INTRO: WARUM RESPONSIVE? Anforderungen an den Projektmanager in Responsive-Projekten Aus 1 mach 4 Multiple Webdesigns für alle Devices – trotzdem ist nur das Budget für eine Website vorhanden Komplexes Frontend Frontend-Technologien entwickeln sich rasant weiter – innovative Neuerungen müssen evtl. in laufende Projekte implementiert werden Mitreden können / entscheiden müssen Erhöhte Abstimmungen mit dem Kunden – technisches Verständnis vorhanden? 16.09.2014 | Seite 11 RESPONSIVE GOES AGILE! Überbordendes Testing Wie testet man eine Website, die auf allen Plattformen und Browsern laufen soll? Viel mehr Details Responsive-Projekte sind schwerer zu kalkulieren. Die potenzielle Abstimmung ist schwerer einzuschätzen, die Risiken sind höher Intensiver Austausch notwendig zwischen Design, Konzeption und Technik (Frontend und Backend). Und vor allem mit dem Kunden.
  12. 12. INTRO: WARUM RESPONSIVE? Das 10-Punkte Manifest für Responsive Projektmanagement #1 #2 16.09.2014 | Seite 12 RESPONSIVE GOES AGILE! #3 #10 #4 #9 #5 #8 #7 #6 RESPONSIVE G O E S AG I L E !
  13. 13. #1 MEIDE DEN WASSERFALL! 16.09.2014 | Seite 13 RESPONSIVE GOES AGILE!
  14. 14. #1 MEIDE DEN WASSERFALL! Klassisches Projektmanagement nach der Wasserfall-Methode 16.09.2014 | Seite 14 RESPONSIVE GOES AGILE! CHECK / FEEDBACK / FREIGABE
  15. 15. #1 MEIDE DEN WASSERFALL! Die Wasserfall-Methode auf Responsive Projekte angewandt 16.09.2014 | Seite 15 RESPONSIVE GOES AGILE! Gefahr zu hoher Aufwände / Kosten durch klassische Herangehensweise! Multiples Webdesign für verschiedene Devices! Neue Devices? Potenziertes Testing! Notwendige Abstimmungen zwischen Konzept, Design und Programmierung verkomplizieren sich zunehmend! Notwendigkeit, rückwirkend Konzept / Design anzupassen!
  16. 16. #1 MEIDE DEN WASSERFALL! Projektmanagement-Methoden im direkten Vergleich Projektmanagement nach Wasserfall 16.09.2014 | Seite 16 RESPONSIVE GOES AGILE! Agiles Projektmanagement Modulare Definition der Anforderungen aus Nutzersicht Flexibles Modell, agile Projektphasen Anforderungsmanager; Mediator & Supervisor; Kommunikator Fachliche Hoheit über ihr Gewerk; Enge Abstimmung Enge Einbindung & Abstimmung; Permanentes Feedback auf Umsetzung der Anforderungen Höhere Flexibilität: Anpassungen während der Entwicklung Schnellere Umsetzung von Projektinkrementen Freiräume & Eigenständigkeit Hoher Grad an Transparenz Hoher Kommunikationsaufwand Enge Einbeziehung des Kunden Grundsätzliches Vorgehen Rolle des Projektmanagers Rolle des Teams Rolle des Kunden Vorteile & Nachteile Fixer Scope: Frühes Festschreiben der Anforderungen Feste, klar abgegrenzte Projektphasen Fachlicher Lead; Teamlead; interner Kunde Spezialisten; Abstimmung in Feedbackphasen Extern; Initialbriefing; Feedback & Freigabe am Ende der Phasen Klare Abgrenzung der Phasen Einfache Möglichkeiten der Planung und Kontrolle Akzeptanz Endnutzer und Kunde ist erst nach Launch klar Häufig wenig Abstimmung im Team Kaum Möglichkeit, auf Änderungen der Rahmenbedingungen zu reagieren + + - - - + + + + - -
  17. 17. A #1 N MEIDE F DEN O WASSERFALL! R D E R U N G E N A N R E S P O N S I V E P R O J E K T E Ein agiles Projekt benötigt agiles Projektmanagement Komplexität / Details Intensiver Austausch Schnell reagieren Fachliche Abhängigkeiten Projektmanagement nach Wasserfall 16.09.2014 | Seite 17 RESPONSIVE GOES AGILE! Agiles Projektmanagement Modulare Definition der Anforderungen aus Nutzersicht Flexibles Modell, agile Projektphasen Anforderungsmanager; Mediator & Supervisor; Kommunikator Fachliche Hoheit über ihr Gewerk; Enge Abstimmung Enge Einbindung & Abstimmung; Permanentes Feedback auf Umsetzung der Anforderungen Höhere Flexibilität: Anpassungen während der Entwicklung Schnellere Umsetzung von Projektinkrementen Freiräume & Eigenständigkeit Hoher Grad an Transparenz Hoher Kommunikationsaufwand Enge Einbeziehung des Kunden Grundsätzliches Vorgehen Rolle des Projektmanagers Rolle des Teams Rolle des Kunden Vorteile & Nachteile Fixer Scope: Frühes Festschreiben der Anforderungen Feste, klar abgegrenzte Projektphasen Fachlicher Lead; Teamlead; interner Kunde Spezialisten; Abstimmung in Feedbackphasen Extern; Initialbriefing; Feedback & Freigabe am Ende der Phasen Klare Abgrenzung der Phasen Einfache Möglichkeiten der Planung und Kontrolle Akzeptanz Endnutzer und Kunde ist erst nach Launch klar Häufig wenig Abstimmung im Team Kaum Möglichkeit, auf Änderungen der Rahmenbedingungen zu reagieren + + - - - + + + + - -
  18. 18. #1 MEIDE DEN WASSERFALL! Die etablierteste Methode für agiles Projektmanagement: Scrum Sprint Planning Anforderungen / Features für den nächsten Sprint (Sprint Backlog) Anforderungen Festgehalten im Product Backlog als User Stories Sprint Die Umsetzung erfolgt in agilen Zyklen – sog. „Sprints“ von 1-3 Wochen 16.09.2014 | Seite 18 RESPONSIVE GOES AGILE! Sprint Review Planungs- und Review-Meetings nach bzw. vor jedem Sprint Working Increment Am Ende des Sprints steht ein fertiges Inkrement des Produktes – konzipiert, designt, umgesetzt, gestestet Daily Scrum Tägliche, enge Abstimmung im Team
  19. 19. #1 MEIDE DEN WASSERFALL! Die etablierteste Methode für agiles Projektmanagement: Scrum A G I L E S M A N I F E S T Der Mensch und die Zusammenarbeit ist wichtiger als Prozesse und Tools Ausgelieferte und funktionierende Software kommt 16.09.2014 | Seite 19 RESPONSIVE GOES AGILE! vor ausführlicher Dokumentation Die stetige Zusammenarbeit mit dem Kunden steht über Verträgen Der Mut und die Offenheit für Änderungen ist wichtiger als das Befolgen eines festgelegten Plans
  20. 20. #2 VERBINDE DIZIPLINEN! 16.09.2014 | Seite 20 RESPONSIVE GOES AGILE!
  21. 21. #2 VERBINDE DISZIPLINEN! Einflüsse und Schnittstellen der Disziplinen DESIGN FRONTEND KONZEPT BACKEND 16.09.2014 | Seite 21 RESPONSIVE GOES AGILE! Durch die Diversität der Anwendungsfälle und die multiplen Endgeräte gibt es bei Responsive Projekten den permanenten Bedarf des disziplinen-übergreifenden Austauschs.
  22. 22. #2 VERBINDE DISZIPLINEN! Management des disziplinenübergreifenden Denkens DESIGN FRONTEND KONZEPT BACKEND PROJEKT-MANAGEMENT 16.09.2014 | Seite 22 RESPONSIVE GOES AGILE! Kommunikationskultur • Effizienz in Meetings • Saubere Vor- und Nachbereitung • Professionelle Moderation • Ausgewogenheit der Kommunikation (schriftlich vs. mündlich, synchron vs. asynchron, real vs. virtuell) • Transparenz! (Kollaborations-plattformen, Projekt-Wiki etc.) • Offenheit für Kommunikation (Headphone-Modus) Regeltermine • Jour Fixes für alle Disziplinen • Wichtige Abstimmungen in den Kunden-Jour-Fixe übernehmen • Daily Scrum für disziplinen-übergreifende Themen Anforderungssteuerung • Klares Management der Anforderungen – und konsequente Transparenz allen gegenüber
  23. 23. #3 VERLASSE DEN HEADPHONE-MODUS! 16.09.2014 | Seite 23 RESPONSIVE GOES AGILE!
  24. 24. #3 VERLASSE DEN HEADPHONE-MODUS! Responsive Projekte haben einen hohen Kommunikationsbedarf TALK! 16.09.2014 | Seite 24 RESPONSIVE GOES AGILE!
  25. 25. #3 VERLASSE DEN HEADPHONE-MODUS! Die Dualität zwischen „konzentriert arbeiten“ und Kommunikation In den klar abgegrenzten Phasen von Wasserfall- Projekten konzentriert sich die Kommunikation auf Briefings und Abnahme. Während der Produktion zieht sich das Team zurück. 16.09.2014 | Seite 25 RESPONSIVE GOES AGILE!
  26. 26. #3 VERLASSE DEN HEADPHONE-MODUS! Laufendes Feedback und Interaktion in agilen Projekten In agilen Projekten hingegen ist es unabdingbar, dass das Team sich permanent abstimmt. Ein phasenweises Zurückziehen der Teammitglieder führt schnell zu fehlenden Abstimmungen und Verzögerungen. 16.09.2014 | Seite 26 RESPONSIVE GOES AGILE!
  27. 27. #4 ERKENNE DIE KOMPLEXITÄT! 16.09.2014 | Seite 27 RESPONSIVE GOES AGILE!
  28. 28. #4 ERKENNE DIE KOMPLEXITÄT! Schon in der Strategie gibt es mehrere Komplexitätsdimensionen MOBILE FIRST! 16.09.2014 | Seite 28 RESPONSIVE GOES AGILE! DESKTOP FIRST! CONTENT FIRST!
  29. 29. #4 ERKENNE DIE KOMPLEXITÄT! Multiple Nutzungsszenarien in den Griff bekommen – mit Media Queries 2. DIMENSION: BETRIEBS-SYSTEME Windows Mac OS X Linux 16.09.2014 | Seite 29 RESPONSIVE GOES AGILE! Android iOS Windows Mobile 3. DIMENSION: BROWSER Firefox Safari Chrome IE Opera 1. DIMENSION: ENDGERÄT / DESKTOP VS. MOBILE
  30. 30. #5 VOM KLEINEN ZUM GROSSEN! 16.09.2014 | Seite 30 RESPONSIVE GOES AGILE!
  31. 31. #5 VOM KLEINEN ZUM GROSSEN! So wurden früher Websites entwickelt 16.09.2014 | Seite 31 RESPONSIVE GOES AGILE!
  32. 32. #5 VOM KLEINEN ZUM GROSSEN! Im Bottom-Up-Ansatz werden Module konsequent atomar entwickelt In agilen RWD-Projekten werden alle Details objektorientiert entwickelt – durch alle Disziplinen hindurch. Nur so kann das Projekt in jedem Stadium dynamisch angepasst werden. 16.09.2014 | Seite 32 RESPONSIVE GOES AGILE!
  33. 33. #5 VOM KLEINEN ZUM GROSSEN! Objektorienter Ansatz im Design: Design-Grid DESIGN-GRID Zentrale Definition der Seitenvermaßung, Spaltenbreiten, Standard-Abstände Layout I Mobile Portrait Layout II Mobile Landscape Layout III Tablet Portrait 16.09.2014 | Seite 33 RESPONSIVE GOES AGILE! Layout IV+ Desktop Tablet Landscape
  34. 34. #5 VOM KLEINEN ZUM GROSSEN! Objektorienter Ansatz im Design: Elementebibliothek ELEMENTE-BIBLIOTHEK Objektorientierte Definition aller Website-Atome und -Moleküle – entwickelt in HTML 5 Elemente (Atome) Farben Typo Listen Formular Icons Module (Moleküle) Teaser-Module Content-Module Kontakt-Module Formular-Module Katalog-Module ... ... Seitenbereiche Header Footer Navigation Content Breadcrumb ... 16.09.2014 | Seite 34 RESPONSIVE GOES AGILE! Seitentypen Home Kategorie 1 Kategorie 2 Content-Seite ... Layouts
  35. 35. #6 PRODUZIERE IM BROWSER! 16.09.2014 | Seite 35 RESPONSIVE GOES AGILE!
  36. 36. #6 PRODUZIERE IM BROWSER! Klassischerweise wird erst nach Konzept-/Designfreigabe entwickelt... KLASSISCHER ANSATZ FRÜHER Konzept Design Frontend HTML-Format Non-HTML-Format EINFLUSS DES KUNDEN Word PPT Visio XLS 16.09.2014 | Seite 36 RESPONSIVE GOES AGILE! HTML Photo-shop CSS Java-script PDF PDF Website (Frontend) Projektlaufzeit
  37. 37. #6 PRODUZIERE IM BROWSER! ... In Responsive Projekten geht das jedoch nicht mehr RESPONSIVE ANSATZ JETZT Konzept Design Frontend HTML-Format Non-HTML-Format EINFLUSS DES KUNDEN Axure Visio XLS 16.09.2014 | Seite 37 RESPONSIVE GOES AGILE! Axure HTML 5 In Design CSS 3 Java-script Prototyp ... / Living Styleguide Prototyp Website (Frontend) Projektlaufzeit
  38. 38. #7 TESTE! TESTE! TESTE! 16.09.2014 | Seite 38 RESPONSIVE GOES AGILE!
  39. 39. #7 TESTE! TESTE! TESTE! Wie testet man eine Website, die auf *jedem* Endgerät laufen soll? 16.09.2014 | Seite 39 RESPONSIVE GOES AGILE!
  40. 40. #7 TESTE! TESTE! TESTE! Reduzieren der Komplexität beim Responsive Testing (1) SCHRITT 1: FEATURE TESTS • Festlegen der für Elemente und Module notwendigen CSS3- Features • Testen der notwendigen Features mit speziellen Testsites auf multiplen Endgeräten ERSETZT DIE BISHER IN ONLINE-PROJEKTEN VERWENDETE BROWSER-MATRIX. BESCHLEUNIGT DIE ENTSCHEIDUNG DER BROWSEROPTIMIERUNG MIT MULTIPLEN ENDGERÄTEN. 16.09.2014 | Seite 40 RESPONSIVE GOES AGILE!
  41. 41. #7 TESTE! TESTE! TESTE! Reduzieren der Komplexität beim Responsive Testing (2) SCHRITT 2: DEVICE TESTING Testen mit Simulatoren ami.respon sivedesign.is deviceponsive.com responsivetest.net responsinator.com mobilephoneemulator.com quirktools.com/screenfly responsivepx.com 16.09.2014 | Seite 41 RESPONSIVE GOES AGILE! Testen mit echten Devices Adobe Ed ge Inspect: Synchronisation des Entwicklungsstandes einer Website auf verschiedene Endgeräte Quelle: http://www.perfectneeds.com/blog/what-is-responsive-web-design
  42. 42. #8 SEI PRAGMATISCH! 16.09.2014 | Seite 42 RESPONSIVE GOES AGILE!
  43. 43. #8 SEI PRAGMATISCH! Multidimensionale Responsive-Projekte gehen nur pragmatisch Jeder Tag zählt! Prioritäten setzen! Ausnahmen eingrenzen! Kostentreiber erkennen! Schweigen kostet Geld! Proaktive Entwickler! Eiserne Disziplin! Vergiss den Pixel! DIE BESTEN ENTWICKLER NUTZEN NICHTS, WENN DAS BUGTRACKING-TOOL BEIM TESTEN VOLLKOMMEN MIT EINTRÄGEN ÜBERLADEN WIRD. 16.09.2014 | Seite 43 RESPONSIVE GOES AGILE!
  44. 44. #9 SPRINTE! 16.09.2014 | Seite 44 RESPONSIVE GOES AGILE!
  45. 45. #9 SPRINTE! Projektphasen im RWD Projekt 16.09.2014 | Seite 45 RESPONSIVE GOES AGILE!
  46. 46. #9 SPRINTE! Sinnvolle Sprints in der Entwicklungsphase von Responsive-Projekten Sobald Responsive-Projekte in die Entwicklungsphase einsteigen, macht es Sinn, das Projekt in agilen Phasen („Sprints“) weiterzuführen. Sprint Planning Anforderungsdefinition aus dem Backlog Sprint Review Testing und Abnahme Daily Scrum Enge, transparente Abstimmung im Team 16.09.2014 | Seite 46 RESPONSIVE GOES AGILE! GO LIVE
  47. 47. #10 BEZIEHE DEN KUNDEN EIN! 16.09.2014 | Seite 47 RESPONSIVE GOES AGILE!
  48. 48. #10 BEZIEHE DEN KUNDEN EIN! Der Kunde im agilen Projekt Kunde als Teil des Teams 16.09.2014 | Seite 48 RESPONSIVE GOES AGILE! Kunde als Kommunikator Kunde als Product Owner Kunde als Experte RAPID FEEDBACK HEAVY DEVICE TESTING DYNAMISCHE FREIGABEN
  49. 49. FAZIT Responsive goes Agile: Das 10-Punkte Manifest #10 #9 #8 #2 #7 16.09.2014 | Seite 49 RESPONSIVE GOES AGILE! #6 #4 #5 #1 #3 RESPONSIVE G O E S AG I L E !
  50. 50. FAZIT Responsive goes Agile: Das 10-Punkte Manifest #1 Meide den Wasserfall! #2 Verbinde Disziplinen! #3 Verlasse den Headphone-Modus! #4 Erkenne die Komplexität! #5 Vom Kleinen zum Großen! #6 Produziere im Browser! #7 Teste! Teste! Teste! #8 Sei pragmatisch! #9 Sprinte! #10 Beziehe den Kunden ein! 16.09.2014 | Seite 50 RESPONSIVE GOES AGILE!
  51. 51. RESPONSIVE GOES AGILE! VIELEN DANK FÜR DIE AUFMERKSAMKEIT! pogrzeba.net reserves all property, copyright and other legal-protection rights related to this presentation. Full or partial translation, editing or any other revision of this presentation is not permitted. 16.09.2014 | Seite 51 RESPONSIVE GOES AGILE!

×