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