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. 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
4. INTRO: WARUM RESPONSIVE?
Das Internet 2004...
16.09.2014 | Seite 4 RESPONSIVE GOES AGILE!
... am Beispiel von Microsoft.de
5. INTRO: WARUM RESPONSIVE?
... versus: Das Internet 2014
16.09.2014 | Seite 5 RESPONSIVE GOES AGILE!
... am Beispiel von Microsoft.de
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. 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. 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. 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. 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. 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. 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. #1
MEIDE DEN WASSERFALL!
16.09.2014 | Seite 13 RESPONSIVE GOES AGILE!
14. #1 MEIDE DEN WASSERFALL!
Klassisches Projektmanagement nach der Wasserfall-Methode
16.09.2014 | Seite 14 RESPONSIVE GOES AGILE!
CHECK /
FEEDBACK /
FREIGABE
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. #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. 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. #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. #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
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. #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. #3
VERLASSE DEN HEADPHONE-MODUS!
16.09.2014 | Seite 23 RESPONSIVE GOES AGILE!
24. #3 VERLASSE DEN HEADPHONE-MODUS!
Responsive Projekte haben einen hohen Kommunikationsbedarf
TALK!
16.09.2014 | Seite 24 RESPONSIVE GOES AGILE!
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. #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. #4
ERKENNE DIE KOMPLEXITÄT!
16.09.2014 | Seite 27 RESPONSIVE GOES AGILE!
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. #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. #5
VOM KLEINEN ZUM GROSSEN!
16.09.2014 | Seite 30 RESPONSIVE GOES AGILE!
31. #5 VOM KLEINEN ZUM GROSSEN!
So wurden früher Websites entwickelt
16.09.2014 | Seite 31 RESPONSIVE GOES AGILE!
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. #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. #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. #6
PRODUZIERE IM BROWSER!
16.09.2014 | Seite 35 RESPONSIVE GOES AGILE!
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. #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
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. #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. #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
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!
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. #10
BEZIEHE DEN KUNDEN EIN!
16.09.2014 | Seite 47 RESPONSIVE GOES AGILE!
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. 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. 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. 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!