Responsive goes Agile!

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!

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

INTRO
WARUM RESPONSIVE?

INTRO: WARUM RESPONSIVE?
Das Internet 2004...
... am Beispiel von Microsoft.de

... versus: Das Internet 2014
... am Beispiel von Microsoft.de

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

Konsumenten nutzen oft mehrere Endgeräte
Quellen: The New Multi-Screen World: Understanding Cross-Platform Consumer Behaviour; Google, 2012
90%
der medialen Nutzung
ist bildschirm-basiert
90%
nutzen mehrere Endgeräte
sequenziell für Aufgaben
(Recherche, Käufe etc.)

Konsumenten nutzen oft mehrere Endgeräte
SMARTPHONES TABLETS
sind der häufigste Startpunkt
für Online-Aktivitäten
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

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

Responsive Web Design ist ein weites Feld
FLUIDE LAYOUTS DEVICE-TESTING
FRONTEND-PROGRAMMIERUNG
MOBILE
CONTENT STRATEGIE
HTML5
RESPONSIVE
VIRTUAL
PIXELS
PROTOTYPING MEDIA QUERIES
UMBRUCHSTUFEN
CSS3
OFF-CANVAS-NAVIGATION
ITERATIVE DESIGN
PERFORMANCE MULTIPLE ENDGERÄTE
TOUCH-OPTIMIERUNG
TABLET
MOBILE BROWSER-KOMPATIBILITÄT
VIEWPORTS
REAL
PIXELS
LIVING
STYLEGUIDE

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?
Ü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.

Das 10-Punkte Manifest für Responsive Projektmanagement
#1
#2
#3
#10 #4
#9 #5
#8
#7
#6
RESPONSIVE
G O E S AG I L E !

#1
MEIDE DEN WASSERFALL!

#1 MEIDE DEN WASSERFALL!
Klassisches Projektmanagement nach der Wasserfall-Methode
CHECK /
FEEDBACK /
FREIGABE

Die Wasserfall-Methode auf Responsive Projekte angewandt
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!

Projektmanagement-Methoden im direkten Vergleich
Projektmanagement
nach Wasserfall
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
+
+
-
-
-
+
+
+
+
-
-

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
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
+
+
-
-
-
+
+
+
+
-
-

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

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

#2
VERBINDE DIZIPLINEN!

#2 VERBINDE DISZIPLINEN!
Einflüsse und Schnittstellen der Disziplinen
DESIGN
FRONTEND
KONZEPT
BACKEND
Durch die
Diversität der
Anwendungsfälle
und die multiplen
Endgeräte gibt es bei
Responsive Projekten
den permanenten
Bedarf des disziplinen-übergreifenden
Austauschs.

#2 VERBINDE DISZIPLINEN!
Management des disziplinenübergreifenden Denkens
DESIGN
FRONTEND
KONZEPT
BACKEND
PROJEKT-MANAGEMENT
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

#3
VERLASSE DEN HEADPHONE-MODUS!

#3 VERLASSE DEN HEADPHONE-MODUS!
Responsive Projekte haben einen hohen Kommunikationsbedarf
TALK!

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.

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.

#4
ERKENNE DIE KOMPLEXITÄT!

#4 ERKENNE DIE KOMPLEXITÄT!
Schon in der Strategie gibt es mehrere Komplexitätsdimensionen
MOBILE
FIRST!
DESKTOP
FIRST!
CONTENT FIRST!

#4 ERKENNE DIE KOMPLEXITÄT!
Multiple Nutzungsszenarien in den Griff bekommen – mit Media Queries
2. DIMENSION:
BETRIEBS-SYSTEME
Windows
Mac OS X
Linux
Android
iOS
Windows Mobile
3. DIMENSION:
BROWSER
Firefox
Safari
Chrome
IE
Opera
1. DIMENSION:
ENDGERÄT /
DESKTOP VS.
MOBILE

#5
VOM KLEINEN ZUM GROSSEN!

#5 VOM KLEINEN ZUM GROSSEN!
So wurden früher Websites entwickelt

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.

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
Layout IV+
Desktop
Tablet Landscape

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
...
Seitentypen
Home
Kategorie 1
Kategorie 2
Content-Seite
...
Layouts

#6
PRODUZIERE IM BROWSER!

#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
HTML Photo-shop
CSS Java-script
PDF PDF Website
(Frontend)
Projektlaufzeit

#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
Axure HTML 5
In
Design
CSS 3 Java-script
Prototyp ...
/ Living
Styleguide
Prototyp Website
(Frontend)
Projektlaufzeit

#7
TESTE! TESTE! TESTE!

#7 TESTE! TESTE! TESTE!
Wie testet man eine Website, die auf *jedem* Endgerät laufen soll?

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.

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

#8
SEI PRAGMATISCH!

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

#9
SPRINTE!

#9 SPRINTE!
Projektphasen im RWD Projekt

#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
GO
LIVE

#10
BEZIEHE DEN KUNDEN EIN!

#10 BEZIEHE DEN KUNDEN EIN!
Der Kunde im agilen Projekt
Kunde als Teil
des Teams
Kunde als
Kommunikator
Kunde als
Product Owner
Kunde als
Experte
RAPID FEEDBACK
HEAVY DEVICE TESTING
DYNAMISCHE FREIGABEN

FAZIT
Responsive goes Agile: Das 10-Punkte Manifest
#10
#9
#8
#2
#7
#6
#4
#5
#1 #3
RESPONSIVE
G O E S AG I L E !

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!

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.

Responsive goes Agile!

Weitere ähnliche Inhalte

Andere mochten auch (20)

Ähnlich wie Responsive goes Agile! (20)

Responsive goes Agile!