Upload
klaus-rueggenmann
View
4.347
Download
0
Embed Size (px)
DESCRIPTION
Die Festlegung auf eine technische Umsetzungsstrategie hat direkte Auswirkungen auf die Konzeption und das Design, und zwar entweder durch die sich ergebenden Einschränkungen oder durch zusätzliche Möglichkeiten. Der Vortrag will aufzeigen, welche Umsetzung für welche Art von Projekt geeignet ist. Er soll eine Entscheidungshilfe bieten und dazu befähigen, sich bei dieser zentralen Projektentscheidung informiert einzumischen.
Citation preview
Umsetzungsstrategien für
Cross-Plattform Projekte
IA Konferenz 2013, Berlin
Klaus Rüggenmann, Aperto
Cross-Plattform ist Grundanforderung
geworden – explizit oder implizit
2
Verschiedenste Bildschirmgrößen und Geräte,
auch auf großen Bildschirmen Touch-Bedieung.
3
Die Projekt-Anforderungen sind häufig unscharf
und nicht immer reden alle über dasselbe…
4
„Die Website soll responsive
umgesetzt werden…“
„… optimiert für mobile
Endgeräte“
„Mein Chef will dafür
eine App…“
„Wir dachten, das funktioniert dann auf allen Geräten …“
Häufig wird früh im Projekt über die
Umsetzungsstrategie entschieden.
5
Technik Kunde /
Briefing
Projektmanager /
Budget ?
Mobile
Website? ?
Aber zwischen welchen
Optionen entscheiden wir da?
Responsive Apps
?
?
?
? ?
Für welches Projekt ist
welche Option geeignet?
Mobile
Website? ? Responsive Apps
?
?
?
? ?
Die Strategie-Entscheidung
bringt Freiheitsgrade oder
Einschränkungen!
Insbesondere für Konzept und Design!
9
Es braucht eine gemeinsame
Grundlage und
Entscheidungskriterien
- über alle Disziplinen hinweg
Wir haben bei Aperto mit allen Disziplinen ein
gemeinsames Verständnis entwickelt …
11
Responsive
Webdesign
Device
Templates
Platform
Solution Apps
… und wir haben Kombinations-Strategien
und Entscheidungskriterien erarbeitet.
12
Responsive Webdesign
Responsive
Webdesign
Device
Templates
Platform
Solution Apps
Responsive Webdesgin: Ein Quellcode, eine
Navigation, jeweils angepasste Darstellung
14
Das CMS generiert also nur 1 Seite, die dann
unterschiedlich dargestellt wird.
15
1 HTML- Seite
1 Seite im CMS
Ist besonders geeignet, wenn es um die
Anpassung der Darstellung auf
Bildschirmgrößen geht, …
16
Responsive Webdesign
www.baden-wuerttemberg.de umgesetzt von
www.ressourcenmangel.de
…, und nicht um die Abbildung
gerätespezifischer Use-Cases.
17
Responsive Webdesign
www.mcdonalds.de umgesetzt von www.razorfish.de
18 www.lancs.ac.uk umgesetzt von
www.theroundhouse.co.uk
Nur wenn die gesamte Website neu gemacht
wird, und nicht z.B. die Desktop-Version bleiben
soll!
19
Responsive Webdesign
www.ableton.com , toll umgesetzt von
www.edenspiekermann.com/de/blog/297
Gut geeignet, wenn keine komplexen Features
wie Warenkörbe oder Facettensuchen.
20
Responsive Webdesign
20 www.microsoft.com umgesetzt von
http://paravelinc.com, Shop liegt außerhalb
Und wenn Ladezeit und Performance auf
Smartphones nicht erfolgskritisch sind.
21
Responsive Webdesign
https://www.gov.uk, Performance auf Smartphones
nicht erfolgskritisch und kaum Bilder.
22
http://disney.com/?intoverride=true ist schön gemacht, aber
auf Smartphone nicht ganz so flüssig.
Umsetzung: http://www.thefoxisblack.com/2012/10/02/the-
design-thinking-behind-the-new-disney-com
Funktioniert besonders gut, wenn Responsive
Design als Komplexitätsreduktion gelebt wird.
23
Responsive Webdesign
www.kiwibank.co.nz umgesetzt
durch www.springload.co.nz
Responsive Webdesign
ist besonders geeignet, …
wenn Anpassung der
Darstellung auf
Bildschirmgrößen und keine
Device-spezifischen
Use-Cases
wenn Responsive Design
als Methode der
Komplexitätsreduktion
gelebt wird
wenn die gesamte Website
neu umgesetzt und von
Anfang an
plattformübergreifend
gestaltet wird
wenn Ladezeit und
Performance auf
Smartphones nicht
erfolgskritisch sind
als Grundlage für alle
Cross-Plattform Projekte,
auch wenn Teile durch
Device-Templates gelöst
werden
wenn es keine komplexen
Features wie z.B.
Warenkörbe gibt (diese
über mobile Templates
integrieren)
wenn die Umsetzung auf
Basis von Patterns erfolgen
kann
wenn nicht für ältere mobile
Endgeräte optimiert
werden muss
wenn die Komplexität der
Templates gering gehalten
werden soll
Device Templates
Responsive
Webdesign
Device
Templates
Platform
Solution Apps
Device Templates: Unterschiedlicher
Quellcode für unterschiedliche Geräteklassen
26
Ein CMS, einmalige Eingabe der Inhalte,
Ausspielung optimierter Device-Templates
27
HTML-Seite 1
1 Seite im CMS
HTML-Seite 3
HTML-Seite 2
Häufig für Desktop und Tablets gemeinsam,
für Smartphones separate Device-Templates.
28
HTML-Seite 1
1 Seite im CMS
HTML-Seite 2
Meist hat der Code gar keine gemeinsame
Basis – das kann auch notwendig sein.
29
HTML-Seite 1
1 Seite im CMS
HTML-Seite 2
Schlau: Es werden nur einzelne Seiten
separat ausgespielt…
30
1 responsive HTML-Code
1 Seite im CMS
Einzelne Seiten
… oder einzelne Module von Seiten. Der Rest
ist eine gemeinsame Responsive Grundlage.
31
1 responsive HTML-Code
1 Seite im CMS
Einzelne Module
Besonders notwendig, wenn unterschiedliche
Use-Cases auf unterschiedlichen Geräten –
und damit jeweils unterschiedliche Features
32
Device Templates
Z.B. Location Based Services Z.B. Second Screen
Immer wenn Ladezeit und Performance
erfolgskritisch sind, z.B. weil Bilder und
Videos eine wichtige Rolle spielen
33
Device Templates
www.rallytheworld.com, umgesetzt von Aperto: Ein responsive Template-Set für Desktop und Tablets, ein Template-Set für Smartphones
Komplexere Features und Prozesse wie z.B.
Warenkörbe oder komplexe Suchfunktionen
sind häufig ein Grund für Device Templates
34
Device Templates
www.sos-kinderdorf.de, umgesetzt von Aperto
Wenn eine Desktop-Website schon existiert
und bestehen bleiben soll, dann besser neue
Templates für Smartphones und Tablets
35
Device Templates
www.eads.com, umgesetzt von Aperto
Device Templates
sind besonders geeignet, …
wenn es spezifische Use-
Cases für Smartphones gibt
und damit zusätzliche
Features, wie z.B. Location
Based Services
wenn Ladezeit und
Performance erfolgskritisch
sind, z..B. wenn Bilder und
Videos eine wichtige Rolle
auf der Website spielen
wenn es spezifische Use-
Cases für Tablets gibt und
damit zusätzliche Features,
wie z.B. Second Screen
Anwendungen
wenn komplexe Features
und Prozesse wie z.B.
Warenkörbe oder komplexe
Suchfunktionen abgebildet
werden sollen
wenn stark auf Touch-
Nutzung optimiert werden
soll, eventuell auch
geräteklassenspezifisch
wenn eine Desktop-Website
schon existiert und nur
mobilisiert werden soll
wenn schrittweise
umgesetzt werden muss
(erst wichtigste Templates,
dann später weitere)
wenn später eine Hybrid-
App wahrscheinlich ist, die
dann auf die Device-
Templates zurückgreifen
soll
Plattform Solution
Responsive
Webdesign
Device
Templates
Platform
Solution Apps
Platform Solution: Automatische
Optimierung für hunderte Einzelgeräte
38
Device Datenbank
CMS und Templates
in BiscuitML oder FitML
Plattform generiert
Ansichten aus Device DB
Gerätespezifische
Darstellung
BiscuitML/FitML
Aus den für Geräteklassen definierten Templates
werden gerätespezifische Seiten generiert
39
HTML-Seite 1
1 Seite im CMS
BiscuitML/FitML
Seite 3
BiscuitML/FitML
Seite 2
Kaum zu umgehen, wenn maximale
Geräteabdeckung gefordert ist - insbesondere
auch für ältere Geräte und international.
40
Platform Solution
m.ebay.com, mobile.paypal.com, wap.bild.de, m.spiegel.de laufen alle auf der Netbiscuits Plattform
41 sdf
Alphaguide, Corporate Car Sharing von BMW:
mobile Websites und Apps, international,
Umsetzung von Aperto.
Auch bei sehr hohen Anforderungen an
Ladezeit und Performance, insbesondere bei
Bild- und Video-lastigen Projekten
42
Platform Solution
mobil.rtl.de und wap.bild.de laufen auf netbiscuits
Nur wenn für laufenden Betrieb hohes Budget
zur Verfügung steht (15-20 k/Jahr) oder eine
kostengünstige Cloud-Lösung akzeptabel ist
43
Platform Solution
m.postbank.de läuft auf sevenval
Wenn es akzeptabel ist, in einer proprietären
Beschreibungssprache Templates zu
entwickeln, z.B. BiscuitML von netbiscuits …
44
Platform Solution
https://my.netbiscuits.com/biscuitml-reference
… oder FitML, der proprietären
Beschreibungssprache der Plattform Sevenval.
45
Platform Solution
www.fitml.com
Platform Solutions
sind besonders geeignet, …
wenn maximale
Geräteabdeckung gefordert
ist, insbesondere auch für
ältere Geräte und
international
wenn komplexe Features,
komplexe Prozesse oder
komplexe Inhalte abgebildet
werden sollen
bei extrem hohen
Anforderungen an Ladezeit
und Performance, z.B. für
Bild- und Video-lastige
Projekte
wenn für den laufenden
Betrieb hohes Budget
(eigene Installation) zur
Verfügung steht oder
kostengünstige Cloudlösung
wenn bestehende Websites
mobilisiert werden sollen,
insbesondere wenn die
existierende Code-Basis
schlecht ist
wenn es akzeptabel ist, in
einer proprietären
Beschreibungssprache
Templates zu entwickeln
(z.B. BiscuitML, FITML)
wenn externe Systeme
angebunden werden sollen,
z.B. Shopsysteme
Apps
Responsive
Webdesign
Device
Templates
Platform
Solution Apps
Apps: Native Software für die drei
unterschiedlichen Ökosysteme
48
Windows 8 iOS
Android
Bitte nur, wenn es klar geeignete Use-Cases
und Business-Cases gibt!
49
Apps
Alphaguide, Corporate Car-Sharing von
BMW: Fahrzeug finden und buchen,
Werkstätten, Unfallberichte in der App.
Von Aperto umgesetzt
Beispiel myTaxi:
Taxifahrt anbieten, Taxi rufen,
Vermittlungsgebühr.
Beispiel Spotify:
Alle Musik immer dabei. Im Abo.
Und nur, wenn klar ist, dass es echte
Software-Entwicklung ist, mit häufigen
Updates und laufendem App-Management
50
Apps
Beispiel: AutoScout24-App auf allen Systemen: Mehr als 6 Mio App-Downloads
Apps sind geeignet, wenn Performance und
Joy-of-Use zentral sind
51
Apps
EADS Upmagazine, umgesetzt von Aperto
Performance und Joy-of-Use zählen vor allem
bei Spielen. Also auch dafür Apps.
54
Apps
Volkswagen „Rally the World. The Game“, Aperto
55
56
57
Meist notwendig, wenn native Funktionalitäten
von Geräten genutzt werden sollen
58
Apps
Beispiele: Die WWF Schneekugel App (Aperto) nutzt den Trägheitssensor.
Mit Apps kann Sichtbarkeit in den jeweiligen
App-Stores erreicht werden
59
Apps
Volkswagen „Rally the World. The Game.“ wurde im Appstore gefeatured. App für iOS und Android, von Aperto
Apps
sind besonders geeignet, …
wenn es klare Use-Cases
gibt, die sich zur Umsetzung
in einer App eignen
Wenn Performance extrem
wichtig ist wenn es klare
Business-Cases gibt,
z.B. Abo oder Verkauf
wenn hoher Joy-of-Use
erreicht werden soll
wenn native
Funktionalitäten der Geräte
genutzt werden sollen (z.B.
Trägheitssensor)
wenn komplexe
Interaktionen abgebildet
werden müssen
wenn klar ist, dass App-
Entwicklung Software-
Entwicklung ist, Updates
und App-Management
notwendig sind
wenn Sichtbarkeit in
App-Stores erreicht und
reichweitenstark vermarktet
werden soll
wenn man auf wenige OS
eingrenzen kann
Cross-Plattform
Strategien sind clevere
Kombinationen!
Responsive
Webdesign
Device
Templates
Platform
Solution Apps
Responsive Webdesign ist
eigentlich immer die Basis,
die nach Bedarf ergänzt wird.
Responsive Webdesign
Gut geeignet, …
wenn von Grund auf neu und reduziert konzipiert und gestaltet werden kann
wenn es keine speziellen Use-Cases für Smartphones oder Tablets gibt
wenn es keine komplexen Features wie z.B. einen Shop gibt
wenn Ladezeit und Performance nicht erfolgskritisch sind
Umsetzungsstrategie 1
Alles über Responsive abdecken (+Apps)
Gut geeignet, …
wenn es spezielle Use-Cases für Smartphones oder Tablets gibt und damit
zusätzliche Features auf diesen Devices
wenn Ladezeit und Performance erfolgskritisch sind
wenn es komplexe Features oder Prozesse gibt
wenn eine bestehende Desktop-Website nur mobilisiert werden soll
wenn später eine Hybrid-App die Templates nutzen soll
Responsive oder
Device Templates Responsive Webdesign Device Templates
Umsetzungsstrategie 2a
Responsive plus Device Templates (+Apps)
Gut geeignet, …
wenn es spezielle Use-Cases für Smartphones oder Tablets gibt und damit
zusätzliche Features auf diesen Devices
wenn Ladezeit und Performance erfolgskritisch sind
wenn es komplexe Features oder Prozesse gibt
wenn eine bestehende Desktop-Website nur mobilisiert werden soll
wenn später eine Hybrid-App die Templates nutzen soll
Umsetzungsstrategie 2b
Device Templates nur für einzelne Seiten u. Module
Device Templates
einzelne Seiten / Module Device Templates
einzelne Seiten / Module Responsive Webdesign
Gut geeignet, …
wenn hohes Budget für den Betrieb einer eigenen Installation zur Verfügung steht oder
eine kostengünstige Cloud-Lösung akzeptabel ist
wenn maximale Geräteabdeckung gefordert ist (ältere Geräte und international)
wenn extrem hohe Anforderungen an Ladezeiten und Performance bestehen
wenn es akzeptabel ist, in einer proprietären Beschreibungssprache Templates zu
entwickeln
Umsetzungsstrategie 3
Responsive plus Plattform Solution
66
Platform Solution Responsive Webdesign Responsive oder
Platform Solution
Gut geeignet, …
wenn es klare Use-Cases und Business-Cases für eine App gibt,
wenn halbjährliche Updates und stetiges App-Management einkalkuliert sind
wenn Performance und Joy-of-Use extrem wichtig sind
wenn native Funktionen der Geräte (z.B. Trägheitssensor) genutzt werden sollen
wenn man auf wenige OS eingrenzen kann
wenn Sichtbarkeit in App-Stores erzeugt werden soll
Umsetzungsstrategie 4
Apps und Hybrid-Apps
Desktop Apps Apps und
Hybrid-Apps
Apps und
Hybrid-Apps
Umsetzungsstrategien
Responsive Webdesign
Desktop Apps Apps und
Hybrid-Apps
Apps und
Hybrid-Apps
Device Templates
einzelne Seiten / Module
Responsive oder
Device Templates
Device Templates
einzelne Seiten / Module
Responsive Webdesign
Responsive Webdesign
Device Templates
68
Platform Solution Responsive Webdesign Responsive oder
Platform Solution
Vielen Dank und
viel Spaß auf der IAK 2013!
Klaus Rüggenmann, Aperto AG
http://www.xing.com/profile/Klaus_Rueggenmann
f