Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus Rüggenmann

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