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.

1. Umsetzungsstrategien für
Cross-Plattform Projekte
IA Konferenz 2013, Berlin
Klaus Rüggenmann, Aperto

2. Cross-Plattform ist Grundanforderung
geworden – explizit oder implizit
2

3. Verschiedenste Bildschirmgrößen und Geräte,
auch auf großen Bildschirmen Touch-Bedieung.
3

4. 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 …“

5. Häufig wird früh im Projekt über die
Umsetzungsstrategie entschieden.
5
Technik
Kunde /
Briefing
Projektmanager /
Budget
?

6. Mobile
Website?
?
Aber zwischen welchen
Optionen entscheiden wir da?
Responsive Apps
?
?
?
??

7. Für welches Projekt ist
welche Option geeignet?
Mobile
Website?
?Responsive Apps
?
?
?
??

8. Die Strategie-Entscheidung
bringt Freiheitsgrade oder
Einschränkungen!

9. Insbesondere für Konzept und Design!
9

10. Es braucht eine gemeinsame
Grundlage und
Entscheidungskriterien
- über alle Disziplinen hinweg

11. Wir haben bei Aperto mit allen Disziplinen ein
gemeinsames Verständnis entwickelt …
11
Responsive
Webdesign
Device
Templates
Platform
Solution
Apps

12. … und wir haben Kombinations-Strategien
und Entscheidungskriterien erarbeitet.
12

13. Responsive Webdesign
Responsive
Webdesign
Device
Templates
Platform
Solution
Apps

14. Responsive Webdesgin: Ein Quellcode, eine
Navigation, jeweils angepasste Darstellung
14

15. Das CMS generiert also nur 1 Seite, die dann
unterschiedlich dargestellt wird.
15
1 HTML-
Seite
1 Seite im
CMS

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

17. …, und nicht um die Abbildung
gerätespezifischer Use-Cases.
17
Responsive Webdesign
www.mcdonalds.de umgesetzt von www.razorfish.de

18. 18www.lancs.ac.uk umgesetzt von
www.theroundhouse.co.uk

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

20. Gut geeignet, wenn keine komplexen Features
wie Warenkörbe oder Facettensuchen.
20
Responsive Webdesign
20www.microsoft.com umgesetzt von
http://paravelinc.com, Shop liegt außerhalb

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

23. Funktioniert besonders gut, wenn Responsive
Design als Komplexitätsreduktion gelebt wird.
23
Responsive Webdesign
www.kiwibank.co.nz umgesetzt
durch www.springload.co.nz

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

25. Device Templates
Responsive
Webdesign
Device
Templates
Platform
Solution
Apps

26. Device Templates: Unterschiedlicher
Quellcode für unterschiedliche Geräteklassen
26

27. Ein CMS, einmalige Eingabe der Inhalte,
Ausspielung optimierter Device-Templates
27
HTML-
Seite 1
1 Seite im
CMS
HTML-
Seite 3
HTML-
Seite 2

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

29. Meist hat der Code gar keine gemeinsame
Basis – das kann auch notwendig sein.
29
HTML-
Seite 1
1 Seite im
CMS
HTML-
Seite 2

30. Schlau: Es werden nur einzelne Seiten
separat ausgespielt…
30
1 responsive
HTML-Code
1 Seite im
CMS
Einzelne
Seiten

31. … oder einzelne Module von Seiten. Der Rest
ist eine gemeinsame Responsive Grundlage.
31
1 responsive
HTML-Code
1 Seite im
CMS
Einzelne
Module

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

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

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

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

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

37. Plattform Solution
Responsive
Webdesign
Device
Templates
Platform
Solution
Apps

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

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

40. 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. 41sdf
Alphaguide, Corporate Car Sharing von BMW:
mobile Websites und Apps, international,
Umsetzung von Aperto.

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

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

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

45. … oder FitML, der proprietären
Beschreibungssprache der Plattform Sevenval.
45
Platform Solution
www.fitml.com

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

47. Apps
Responsive
Webdesign
Device
Templates
Platform
Solution
Apps

48. Apps: Native Software für die drei
unterschiedlichen Ökosysteme
48
Windows 8
iOS
Android

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

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

51. Apps sind geeignet, wenn Performance und
Joy-of-Use zentral sind
51
Apps
EADS Upmagazine, umgesetzt von Aperto

54. 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. 55

56. 56

57. 57

58. Meist notwendig, wenn native Funktionalitäten
von Geräten genutzt werden sollen
58
Apps
Beispiele: Die WWF Schneekugel App (Aperto) nutzt den Trägheitssensor.

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

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

61. Cross-Plattform
Strategien sind clevere
Kombinationen!
Responsive
Webdesign
Device
Templates
Platform
Solution
Apps

62. Responsive Webdesign ist
eigentlich immer die Basis,
die nach Bedarf ergänzt wird.

63. 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)

64. 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)

65. 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 / ModuleResponsive Webdesign

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

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

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

69. Vielen Dank und
viel Spaß auf der IAK 2013!
Klaus Rüggenmann, Aperto AG
http://www.xing.com/profile/Klaus_Rueggenmann
f