Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Wird geladen in …3
×
1 von 69

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

29

Teilen

Herunterladen, um offline zu lesen

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.

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

  1. 1. Umsetzungsstrategien für Cross-Plattform Projekte IA Konferenz 2013, Berlin Klaus Rüggenmann, Aperto
  2. 2. Cross-Plattform ist Grundanforderung geworden – explizit oder implizit 2
  3. 3. Verschiedenste Bildschirmgrößen und Geräte, auch auf großen Bildschirmen Touch-Bedieung. 3
  4. 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. 5. Häufig wird früh im Projekt über die Umsetzungsstrategie entschieden. 5 Technik Kunde / Briefing Projektmanager / Budget ?
  6. 6. Mobile Website? ? Aber zwischen welchen Optionen entscheiden wir da? Responsive Apps ? ? ? ??
  7. 7. Für welches Projekt ist welche Option geeignet? Mobile Website? ?Responsive Apps ? ? ? ??
  8. 8. Die Strategie-Entscheidung bringt Freiheitsgrade oder Einschränkungen!
  9. 9. Insbesondere für Konzept und Design! 9
  10. 10. Es braucht eine gemeinsame Grundlage und Entscheidungskriterien - über alle Disziplinen hinweg
  11. 11. Wir haben bei Aperto mit allen Disziplinen ein gemeinsames Verständnis entwickelt … 11 Responsive Webdesign Device Templates Platform Solution Apps
  12. 12. … und wir haben Kombinations-Strategien und Entscheidungskriterien erarbeitet. 12
  13. 13. Responsive Webdesign Responsive Webdesign Device Templates Platform Solution Apps
  14. 14. Responsive Webdesgin: Ein Quellcode, eine Navigation, jeweils angepasste Darstellung 14
  15. 15. Das CMS generiert also nur 1 Seite, die dann unterschiedlich dargestellt wird. 15 1 HTML- Seite 1 Seite im CMS
  16. 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. 17. …, und nicht um die Abbildung gerätespezifischer Use-Cases. 17 Responsive Webdesign www.mcdonalds.de umgesetzt von www.razorfish.de
  18. 18. 18www.lancs.ac.uk umgesetzt von www.theroundhouse.co.uk
  19. 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. 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. 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. 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. 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. 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. 25. Device Templates Responsive Webdesign Device Templates Platform Solution Apps
  26. 26. Device Templates: Unterschiedlicher Quellcode für unterschiedliche Geräteklassen 26
  27. 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. 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. 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. 30. Schlau: Es werden nur einzelne Seiten separat ausgespielt… 30 1 responsive HTML-Code 1 Seite im CMS Einzelne Seiten
  31. 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. 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. 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. 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. 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. 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. 37. Plattform Solution Responsive Webdesign Device Templates Platform Solution Apps
  38. 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. 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. 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. 41. 41sdf Alphaguide, Corporate Car Sharing von BMW: mobile Websites und Apps, international, Umsetzung von Aperto.
  42. 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. 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. 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. 45. … oder FitML, der proprietären Beschreibungssprache der Plattform Sevenval. 45 Platform Solution www.fitml.com
  46. 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. 47. Apps Responsive Webdesign Device Templates Platform Solution Apps
  48. 48. Apps: Native Software für die drei unterschiedlichen Ökosysteme 48 Windows 8 iOS Android
  49. 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. 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. 51. Apps sind geeignet, wenn Performance und Joy-of-Use zentral sind 51 Apps EADS Upmagazine, umgesetzt von Aperto
  52. 52. 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
  53. 53. 55
  54. 54. 56
  55. 55. 57
  56. 56. Meist notwendig, wenn native Funktionalitäten von Geräten genutzt werden sollen 58 Apps Beispiele: Die WWF Schneekugel App (Aperto) nutzt den Trägheitssensor.
  57. 57. 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
  58. 58. 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
  59. 59. Cross-Plattform Strategien sind clevere Kombinationen! Responsive Webdesign Device Templates Platform Solution Apps
  60. 60. Responsive Webdesign ist eigentlich immer die Basis, die nach Bedarf ergänzt wird.
  61. 61. 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)
  62. 62. 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)
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. Vielen Dank und viel Spaß auf der IAK 2013! Klaus Rüggenmann, Aperto AG http://www.xing.com/profile/Klaus_Rueggenmann f

×