SlideShare ist ein Scribd-Unternehmen logo
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
18www.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
20www.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
41sdf
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 / ModuleResponsive 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

Weitere ähnliche Inhalte

Was ist angesagt?

Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
IKS Gesellschaft für Informations- und Kommunikationssysteme mbH
 
Go-Mobile-Strategien für Early Birds und Late Risers - Benno Bartels
Go-Mobile-Strategien für Early Birds und Late Risers - Benno BartelsGo-Mobile-Strategien für Early Birds und Late Risers - Benno Bartels
Go-Mobile-Strategien für Early Birds und Late Risers - Benno Bartels
insertEFFECT GmbH
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Dominik Helleberg
 
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Bokowsky + Laymann GmbH
 
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4Apps
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4AppsWeptun Vortrag Bicc.Net Innovation Forum: 1Code=4Apps
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4AppsDominik Ueblacker
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Bokowsky + Laymann GmbH
 
Einführung in Flex Mobile
Einführung in Flex MobileEinführung in Flex Mobile
Einführung in Flex Mobile
Johannes Hohenbichler
 
Politische Kommunikation mit Apps
Politische Kommunikation mit AppsPolitische Kommunikation mit Apps
Politische Kommunikation mit Apps
compuccino
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
Ralf Lütke
 
Mobile App Entwicklung
Mobile App EntwicklungMobile App Entwicklung
Mobile App Entwicklungmediaman
 
Schulung – iPad für Studium und Arbeit (Einsteiger)
Schulung – iPad für Studium und Arbeit (Einsteiger)Schulung – iPad für Studium und Arbeit (Einsteiger)
Schulung – iPad für Studium und Arbeit (Einsteiger)
ETH-Bibliothek
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
Alexander Beck
 
Mobile Applikationen: Idee und Planung
Mobile Applikationen: Idee und  PlanungMobile Applikationen: Idee und  Planung
BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.
.NET User Group Dresden
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
die.agilen GmbH
 
Best Practices für Multi-Channel Application Development
Best Practices für Multi-Channel Application DevelopmentBest Practices für Multi-Channel Application Development
Best Practices für Multi-Channel Application Development
enpit GmbH & Co. KG
 
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
OPITZ CONSULTING Deutschland
 

Was ist angesagt? (18)

Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
 
Go-Mobile-Strategien für Early Birds und Late Risers - Benno Bartels
Go-Mobile-Strategien für Early Birds und Late Risers - Benno BartelsGo-Mobile-Strategien für Early Birds und Late Risers - Benno Bartels
Go-Mobile-Strategien für Early Birds und Late Risers - Benno Bartels
 
App - und dann?
App - und dann?App - und dann?
App - und dann?
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
 
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4Apps
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4AppsWeptun Vortrag Bicc.Net Innovation Forum: 1Code=4Apps
Weptun Vortrag Bicc.Net Innovation Forum: 1Code=4Apps
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
 
Einführung in Flex Mobile
Einführung in Flex MobileEinführung in Flex Mobile
Einführung in Flex Mobile
 
Politische Kommunikation mit Apps
Politische Kommunikation mit AppsPolitische Kommunikation mit Apps
Politische Kommunikation mit Apps
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
Mobile App Entwicklung
Mobile App EntwicklungMobile App Entwicklung
Mobile App Entwicklung
 
Schulung – iPad für Studium und Arbeit (Einsteiger)
Schulung – iPad für Studium und Arbeit (Einsteiger)Schulung – iPad für Studium und Arbeit (Einsteiger)
Schulung – iPad für Studium und Arbeit (Einsteiger)
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
Mobile Applikationen: Idee und Planung
Mobile Applikationen: Idee und  PlanungMobile Applikationen: Idee und  Planung
Mobile Applikationen: Idee und Planung
 
BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
 
Best Practices für Multi-Channel Application Development
Best Practices für Multi-Channel Application DevelopmentBest Practices für Multi-Channel Application Development
Best Practices für Multi-Channel Application Development
 
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
 

Andere mochten auch

Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
Markus Eiglsperger
 
Design Thinking Methoden in der Praxis - Klaus Rüggenmann IA-Konferenz 2010 ...
Design Thinking Methoden in der Praxis -  Klaus Rüggenmann IA-Konferenz 2010 ...Design Thinking Methoden in der Praxis -  Klaus Rüggenmann IA-Konferenz 2010 ...
Design Thinking Methoden in der Praxis - Klaus Rüggenmann IA-Konferenz 2010 ...
Klaus Rüggenmann
 
Hybrid-Apps 2.0 - Status Quo & Performance
Hybrid-Apps 2.0 - Status Quo & PerformanceHybrid-Apps 2.0 - Status Quo & Performance
Hybrid-Apps 2.0 - Status Quo & Performance
FLYACTS GmbH
 
Xavier Amatriain, VP of Engineering, Quora at MLconf SF - 11/13/15
Xavier Amatriain, VP of Engineering, Quora at MLconf SF - 11/13/15Xavier Amatriain, VP of Engineering, Quora at MLconf SF - 11/13/15
Xavier Amatriain, VP of Engineering, Quora at MLconf SF - 11/13/15
MLconf
 
DSP - General insights of digital medium - Version 1
DSP - General insights of digital medium - Version 1DSP - General insights of digital medium - Version 1
DSP - General insights of digital medium - Version 1
AiiM
 
[How digital changes Advertising industry] Digital driven cases in Integrated...
[How digital changes Advertising industry] Digital driven cases in Integrated...[How digital changes Advertising industry] Digital driven cases in Integrated...
[How digital changes Advertising industry] Digital driven cases in Integrated...
AiiM
 
Service Innovation in Retail
Service Innovation in RetailService Innovation in Retail
Service Innovation in Retail
Johannes F. Wrubel
 
Social Media: Plattformen beyond Facebook und deren Use Cases
Social Media: Plattformen beyond Facebook und deren Use CasesSocial Media: Plattformen beyond Facebook und deren Use Cases
Social Media: Plattformen beyond Facebook und deren Use Cases
tinkla GmbH
 
Ben Hamner, Co-founder and CTO, Kaggle at MLconf SF - 11/13/15
Ben Hamner, Co-founder and CTO, Kaggle at MLconf SF - 11/13/15Ben Hamner, Co-founder and CTO, Kaggle at MLconf SF - 11/13/15
Ben Hamner, Co-founder and CTO, Kaggle at MLconf SF - 11/13/15
MLconf
 
Cross platform mobile development
Cross platform mobile developmentCross platform mobile development
Cross platform mobile development
Peter Friese
 
The internet of things is for people
The internet of things is for peopleThe internet of things is for people
The internet of things is for people
yiibu
 
Brainberry Agency Presentation
Brainberry Agency PresentationBrainberry Agency Presentation
Brainberry Agency Presentation
Brainberry
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversation
yiibu
 
Steve Jobs Inspirational Quotes
Steve Jobs Inspirational QuotesSteve Jobs Inspirational Quotes
Steve Jobs Inspirational Quotes
InsideView
 
Instagram Kampagnen - golden rules & brilliant cases #AFBMC
Instagram Kampagnen - golden rules & brilliant cases #AFBMCInstagram Kampagnen - golden rules & brilliant cases #AFBMC
Instagram Kampagnen - golden rules & brilliant cases #AFBMC
AllFacebook.de
 
Presentation Catherine Epstein
Presentation Catherine EpsteinPresentation Catherine Epstein
Presentation Catherine Epstein
Catherine Epstein
 
Le premier Trophée Innovation où les sponsors passent à l'acte
Le premier Trophée Innovation où les sponsors passent à l'acteLe premier Trophée Innovation où les sponsors passent à l'acte
Le premier Trophée Innovation où les sponsors passent à l'acte
Bertrand Petit
 
Curiculum françai[pdf]
Curiculum françai[pdf]Curiculum françai[pdf]
Curiculum françai[pdf]mihoub
 
Erfolg Ausgabe Nr. 9 2015
Erfolg Ausgabe Nr. 9 2015Erfolg Ausgabe Nr. 9 2015
Erfolg Ausgabe Nr. 9 2015
Roland Rupp
 

Andere mochten auch (20)

Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
Design Thinking Methoden in der Praxis - Klaus Rüggenmann IA-Konferenz 2010 ...
Design Thinking Methoden in der Praxis -  Klaus Rüggenmann IA-Konferenz 2010 ...Design Thinking Methoden in der Praxis -  Klaus Rüggenmann IA-Konferenz 2010 ...
Design Thinking Methoden in der Praxis - Klaus Rüggenmann IA-Konferenz 2010 ...
 
Hybrid-Apps 2.0 - Status Quo & Performance
Hybrid-Apps 2.0 - Status Quo & PerformanceHybrid-Apps 2.0 - Status Quo & Performance
Hybrid-Apps 2.0 - Status Quo & Performance
 
Xavier Amatriain, VP of Engineering, Quora at MLconf SF - 11/13/15
Xavier Amatriain, VP of Engineering, Quora at MLconf SF - 11/13/15Xavier Amatriain, VP of Engineering, Quora at MLconf SF - 11/13/15
Xavier Amatriain, VP of Engineering, Quora at MLconf SF - 11/13/15
 
DSP - General insights of digital medium - Version 1
DSP - General insights of digital medium - Version 1DSP - General insights of digital medium - Version 1
DSP - General insights of digital medium - Version 1
 
[How digital changes Advertising industry] Digital driven cases in Integrated...
[How digital changes Advertising industry] Digital driven cases in Integrated...[How digital changes Advertising industry] Digital driven cases in Integrated...
[How digital changes Advertising industry] Digital driven cases in Integrated...
 
Service Innovation in Retail
Service Innovation in RetailService Innovation in Retail
Service Innovation in Retail
 
Social Media: Plattformen beyond Facebook und deren Use Cases
Social Media: Plattformen beyond Facebook und deren Use CasesSocial Media: Plattformen beyond Facebook und deren Use Cases
Social Media: Plattformen beyond Facebook und deren Use Cases
 
Ben Hamner, Co-founder and CTO, Kaggle at MLconf SF - 11/13/15
Ben Hamner, Co-founder and CTO, Kaggle at MLconf SF - 11/13/15Ben Hamner, Co-founder and CTO, Kaggle at MLconf SF - 11/13/15
Ben Hamner, Co-founder and CTO, Kaggle at MLconf SF - 11/13/15
 
Cross platform mobile development
Cross platform mobile developmentCross platform mobile development
Cross platform mobile development
 
The internet of things is for people
The internet of things is for peopleThe internet of things is for people
The internet of things is for people
 
Brainberry Agency Presentation
Brainberry Agency PresentationBrainberry Agency Presentation
Brainberry Agency Presentation
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversation
 
Steve Jobs Inspirational Quotes
Steve Jobs Inspirational QuotesSteve Jobs Inspirational Quotes
Steve Jobs Inspirational Quotes
 
Instagram Kampagnen - golden rules & brilliant cases #AFBMC
Instagram Kampagnen - golden rules & brilliant cases #AFBMCInstagram Kampagnen - golden rules & brilliant cases #AFBMC
Instagram Kampagnen - golden rules & brilliant cases #AFBMC
 
Presentation Catherine Epstein
Presentation Catherine EpsteinPresentation Catherine Epstein
Presentation Catherine Epstein
 
Le premier Trophée Innovation où les sponsors passent à l'acte
Le premier Trophée Innovation où les sponsors passent à l'acteLe premier Trophée Innovation où les sponsors passent à l'acte
Le premier Trophée Innovation où les sponsors passent à l'acte
 
Mis cosas d frances
Mis cosas d francesMis cosas d frances
Mis cosas d frances
 
Curiculum françai[pdf]
Curiculum françai[pdf]Curiculum françai[pdf]
Curiculum françai[pdf]
 
Erfolg Ausgabe Nr. 9 2015
Erfolg Ausgabe Nr. 9 2015Erfolg Ausgabe Nr. 9 2015
Erfolg Ausgabe Nr. 9 2015
 

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

Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung
Martin Reiher
 
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestaltenBTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX GmbH
 
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
Rainer Stropek
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsGünther Haslbeck
 
Universal Theme vs. APEX mobile
Universal Theme vs. APEX mobileUniversal Theme vs. APEX mobile
Universal Theme vs. APEX mobile
Steven Grzbielok
 
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmap
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmapWe4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmap
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmapWe4IT Group
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Jens Küsters
 
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Christian Sauter
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
Marc Müller
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
IKS Gesellschaft für Informations- und Kommunikationssysteme mbH
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Webch.ch
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda Wien
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobject
openbig
 
Enterprise Mobility Plattformen – Aktuelle Lösungen und Trends [White Paper]
Enterprise Mobility Plattformen – Aktuelle Lösungen und Trends [White Paper]Enterprise Mobility Plattformen – Aktuelle Lösungen und Trends [White Paper]
Enterprise Mobility Plattformen – Aktuelle Lösungen und Trends [White Paper]
M-Way Consulting
 
Entwickeln und Betreiben eines Cloud Service
Entwickeln und Betreiben  eines Cloud ServiceEntwickeln und Betreiben  eines Cloud Service
Entwickeln und Betreiben eines Cloud ServiceSITEFORUM
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
denkwerk GmbH
 
Die Megatrends in der Softwarebranche
Die Megatrends in der SoftwarebrancheDie Megatrends in der Softwarebranche
Die Megatrends in der Softwarebranche
Prof. Dr. Alexander Maedche
 
2011 07-13 collaboration solutions day - cedros
2011 07-13 collaboration solutions day - cedros2011 07-13 collaboration solutions day - cedros
2011 07-13 collaboration solutions day - cedros
Philipp_Koenigs
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
Andreas Schulte
 
BTEXX INTRANET-PORTAL – READY TO RUN
BTEXX INTRANET-PORTAL – READY TO RUNBTEXX INTRANET-PORTAL – READY TO RUN
BTEXX INTRANET-PORTAL – READY TO RUN
Björn Adam
 

Ähnlich wie Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus Rüggenmann (20)

Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung
 
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestaltenBTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
BTEXX Fachartikel: Zukunftssichere Anwendungen mit SAP gestalten
 
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
 
Universal Theme vs. APEX mobile
Universal Theme vs. APEX mobileUniversal Theme vs. APEX mobile
Universal Theme vs. APEX mobile
 
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmap
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmapWe4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmap
We4IT LCTY 2013 - x-pages-men - whats next - application modernization roadmap
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
 
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Web
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobject
 
Enterprise Mobility Plattformen – Aktuelle Lösungen und Trends [White Paper]
Enterprise Mobility Plattformen – Aktuelle Lösungen und Trends [White Paper]Enterprise Mobility Plattformen – Aktuelle Lösungen und Trends [White Paper]
Enterprise Mobility Plattformen – Aktuelle Lösungen und Trends [White Paper]
 
Entwickeln und Betreiben eines Cloud Service
Entwickeln und Betreiben  eines Cloud ServiceEntwickeln und Betreiben  eines Cloud Service
Entwickeln und Betreiben eines Cloud Service
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
Die Megatrends in der Softwarebranche
Die Megatrends in der SoftwarebrancheDie Megatrends in der Softwarebranche
Die Megatrends in der Softwarebranche
 
2011 07-13 collaboration solutions day - cedros
2011 07-13 collaboration solutions day - cedros2011 07-13 collaboration solutions day - cedros
2011 07-13 collaboration solutions day - cedros
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
 
BTEXX INTRANET-PORTAL – READY TO RUN
BTEXX INTRANET-PORTAL – READY TO RUNBTEXX INTRANET-PORTAL – READY TO RUN
BTEXX INTRANET-PORTAL – READY TO RUN
 

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

  • 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 ? ? ? ??
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 52.
  • 53.
  • 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
  • 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