Umsetzungsstrategien für Cross-Plattform Projekte - IA Konferenz 2013 Klaus Rüggenmann
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 4,323 views

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

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.

Statistics

Views

Total Views
4,323
Views on SlideShare
3,543
Embed Views
780

Actions

Likes
30
Downloads
189
Comments
4

20 Embeds 780

http://my-container.de 310
http://www.usabilityblog.de 145
http://greatmobileux.com 136
http://storify.com 91
http://feeds2.feedburner.com 37
http://lanyrd.com 19
http://www.eqs-insight.intra 13
http://blog.fsd.li 7
http://feeds.feedburner.com 4
http://ranchero.com 4
http://www.365dailyjournal.com 3
http://newsblur.com 2
https://twitter.com 2
http://feedreader.com 1
http://www.feedreader.com 1
http://www.content-crew.de 1
http://cloud.feedly.com 1
http://zootool.com 1
http://blog.storify.com 1
http://my-container.de.netzcheck.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Umsetzungsstrategien fürCross-Plattform ProjekteIA Konferenz 2013, BerlinKlaus Rüggenmann, Aperto
  • 2. Cross-Plattform ist Grundanforderunggeworden – explizit oder implizit2
  • 3. Verschiedenste Bildschirmgrößen und Geräte,auch auf großen Bildschirmen Touch-Bedieung.3
  • 4. Die Projekt-Anforderungen sind häufig unscharfund nicht immer reden alle über dasselbe…4„Die Websitesoll responsiveumgesetztwerden…“„… optimiert fürmobileEndgeräte“„Mein Chefwill dafüreine App…“„Wir dachten,das funktioniertdann auf allenGeräten …“
  • 5. Häufig wird früh im Projekt über dieUmsetzungsstrategie entschieden.5TechnikKunde /BriefingProjektmanager /Budget?
  • 6. MobileWebsite??Aber zwischen welchenOptionen entscheiden wir da?Responsive Apps?????
  • 7. Für welches Projekt istwelche Option geeignet?MobileWebsite??Responsive Apps?????
  • 8. Die Strategie-Entscheidungbringt Freiheitsgrade oderEinschränkungen!
  • 9. Insbesondere für Konzept und Design!9
  • 10. Es braucht eine gemeinsameGrundlage undEntscheidungskriterien- über alle Disziplinen hinweg
  • 11. Wir haben bei Aperto mit allen Disziplinen eingemeinsames Verständnis entwickelt …11ResponsiveWebdesignDeviceTemplatesPlatformSolutionApps
  • 12. … und wir haben Kombinations-Strategienund Entscheidungskriterien erarbeitet.12
  • 13. Responsive WebdesignResponsiveWebdesignDeviceTemplatesPlatformSolutionApps
  • 14. Responsive Webdesgin: Ein Quellcode, eineNavigation, jeweils angepasste Darstellung14
  • 15. Das CMS generiert also nur 1 Seite, die dannunterschiedlich dargestellt wird.151 HTML-Seite1 Seite imCMS
  • 16. Ist besonders geeignet, wenn es um dieAnpassung der Darstellung aufBildschirmgrößen geht, …16Responsive Webdesignwww.baden-wuerttemberg.de umgesetzt vonwww.ressourcenmangel.de
  • 17. …, und nicht um die Abbildunggerätespezifischer Use-Cases.17Responsive Webdesignwww.mcdonalds.de umgesetzt von www.razorfish.de
  • 18. 18www.lancs.ac.uk umgesetzt vonwww.theroundhouse.co.uk
  • 19. Nur wenn die gesamte Website neu gemachtwird, und nicht z.B. die Desktop-Version bleibensoll!19Responsive Webdesignwww.ableton.com , toll umgesetzt vonwww.edenspiekermann.com/de/blog/297
  • 20. Gut geeignet, wenn keine komplexen Featureswie Warenkörbe oder Facettensuchen.20Responsive Webdesign20www.microsoft.com umgesetzt vonhttp://paravelinc.com, Shop liegt außerhalb
  • 21. Und wenn Ladezeit und Performance aufSmartphones nicht erfolgskritisch sind.21Responsive Webdesignhttps://www.gov.uk, Performance auf Smartphonesnicht erfolgskritisch und kaum Bilder.
  • 22. 22http://disney.com/?intoverride=true ist schön gemacht, aberauf 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 ResponsiveDesign als Komplexitätsreduktion gelebt wird.23Responsive Webdesignwww.kiwibank.co.nz umgesetztdurch www.springload.co.nz
  • 24. Responsive Webdesignist besonders geeignet, …wenn Anpassung derDarstellung aufBildschirmgrößen und keineDevice-spezifischenUse-Caseswenn Responsive Designals Methode derKomplexitätsreduktiongelebt wirdwenn die gesamte Websiteneu umgesetzt und vonAnfang anplattformübergreifendgestaltet wirdwenn Ladezeit undPerformance aufSmartphones nichterfolgskritisch sindals Grundlage für alleCross-Plattform Projekte,auch wenn Teile durchDevice-Templates gelöstwerdenwenn es keine komplexenFeatures wie z.B.Warenkörbe gibt (dieseüber mobile Templatesintegrieren)wenn die Umsetzung aufBasis von Patterns erfolgenkannwenn nicht für ältere mobileEndgeräte optimiertwerden musswenn die Komplexität derTemplates gering gehaltenwerden soll
  • 25. Device TemplatesResponsiveWebdesignDeviceTemplatesPlatformSolutionApps
  • 26. Device Templates: UnterschiedlicherQuellcode für unterschiedliche Geräteklassen26
  • 27. Ein CMS, einmalige Eingabe der Inhalte,Ausspielung optimierter Device-Templates27HTML-Seite 11 Seite imCMSHTML-Seite 3HTML-Seite 2
  • 28. Häufig für Desktop und Tablets gemeinsam,für Smartphones separate Device-Templates.28HTML-Seite 11 Seite imCMSHTML-Seite 2
  • 29. Meist hat der Code gar keine gemeinsameBasis – das kann auch notwendig sein.29HTML-Seite 11 Seite imCMSHTML-Seite 2
  • 30. Schlau: Es werden nur einzelne Seitenseparat ausgespielt…301 responsiveHTML-Code1 Seite imCMSEinzelneSeiten
  • 31. … oder einzelne Module von Seiten. Der Restist eine gemeinsame Responsive Grundlage.311 responsiveHTML-Code1 Seite imCMSEinzelneModule
  • 32. Besonders notwendig, wenn unterschiedlicheUse-Cases auf unterschiedlichen Geräten –und damit jeweils unterschiedliche Features32Device TemplatesZ.B. Location Based Services Z.B. Second Screen
  • 33. Immer wenn Ladezeit und Performanceerfolgskritisch sind, z.B. weil Bilder undVideos eine wichtige Rolle spielen33Device Templateswww.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 Suchfunktionensind häufig ein Grund für Device Templates34Device Templateswww.sos-kinderdorf.de, umgesetzt von Aperto
  • 35. Wenn eine Desktop-Website schon existiertund bestehen bleiben soll, dann besser neueTemplates für Smartphones und Tablets35Device Templateswww.eads.com, umgesetzt von Aperto
  • 36. Device Templatessind besonders geeignet, …wenn es spezifische Use-Cases für Smartphones gibtund damit zusätzlicheFeatures, wie z.B. LocationBased Serviceswenn Ladezeit undPerformance erfolgskritischsind, z..B. wenn Bilder undVideos eine wichtige Rolleauf der Website spielenwenn es spezifische Use-Cases für Tablets gibt unddamit zusätzliche Features,wie z.B. Second ScreenAnwendungenwenn komplexe Featuresund Prozesse wie z.B.Warenkörbe oder komplexeSuchfunktionen abgebildetwerden sollenwenn stark auf Touch-Nutzung optimiert werdensoll, eventuell auchgeräteklassenspezifischwenn eine Desktop-Websiteschon existiert und nurmobilisiert werden sollwenn schrittweiseumgesetzt werden muss(erst wichtigste Templates,dann später weitere)wenn später eine Hybrid-App wahrscheinlich ist, diedann auf die Device-Templates zurückgreifensoll
  • 37. Plattform SolutionResponsiveWebdesignDeviceTemplatesPlatformSolutionApps
  • 38. Platform Solution: AutomatischeOptimierung für hunderte Einzelgeräte38DeviceDatenbankCMS und Templatesin BiscuitML oder FitMLPlattform generiertAnsichten aus Device DBGerätespezifischeDarstellungBiscuitML/FitML
  • 39. Aus den für Geräteklassen definierten Templateswerden gerätespezifische Seiten generiert39HTML-Seite 11 Seite imCMSBiscuitML/FitMLSeite 3BiscuitML/FitMLSeite 2
  • 40. Kaum zu umgehen, wenn maximaleGeräteabdeckung gefordert ist - insbesondereauch für ältere Geräte und international.40Platform Solutionm.ebay.com, mobile.paypal.com, wap.bild.de, m.spiegel.de laufen alle auf der Netbiscuits Plattform
  • 41. 41sdfAlphaguide, Corporate Car Sharing von BMW:mobile Websites und Apps, international,Umsetzung von Aperto.
  • 42. Auch bei sehr hohen Anforderungen anLadezeit und Performance, insbesondere beiBild- und Video-lastigen Projekten42Platform Solutionmobil.rtl.de und wap.bild.de laufen auf netbiscuits
  • 43. Nur wenn für laufenden Betrieb hohes Budgetzur Verfügung steht (15-20 k/Jahr) oder einekostengünstige Cloud-Lösung akzeptabel ist43Platform Solutionm.postbank.de läuft auf sevenval
  • 44. Wenn es akzeptabel ist, in einer proprietärenBeschreibungssprache Templates zuentwickeln, z.B. BiscuitML von netbiscuits …44Platform Solutionhttps://my.netbiscuits.com/biscuitml-reference
  • 45. … oder FitML, der proprietärenBeschreibungssprache der Plattform Sevenval.45Platform Solutionwww.fitml.com
  • 46. Platform Solutionssind besonders geeignet, …wenn maximaleGeräteabdeckung gefordertist, insbesondere auch fürältere Geräte undinternationalwenn komplexe Features,komplexe Prozesse oderkomplexe Inhalte abgebildetwerden sollenbei extrem hohenAnforderungen an Ladezeitund Performance, z.B. fürBild- und Video-lastigeProjektewenn für den laufendenBetrieb hohes Budget(eigene Installation) zurVerfügung steht oderkostengünstige Cloudlösungwenn bestehende Websitesmobilisiert werden sollen,insbesondere wenn dieexistierende Code-Basisschlecht istwenn es akzeptabel ist, ineiner proprietärenBeschreibungsspracheTemplates zu entwickeln(z.B. BiscuitML, FITML)wenn externe Systemeangebunden werden sollen,z.B. Shopsysteme
  • 47. AppsResponsiveWebdesignDeviceTemplatesPlatformSolutionApps
  • 48. Apps: Native Software für die dreiunterschiedlichen Ökosysteme48Windows 8iOSAndroid
  • 49. Bitte nur, wenn es klar geeignete Use-Casesund Business-Cases gibt!49AppsAlphaguide, Corporate Car-Sharing vonBMW: Fahrzeug finden und buchen,Werkstätten, Unfallberichte in der App.Von Aperto umgesetztBeispiel myTaxi:Taxifahrt anbieten, Taxi rufen,Vermittlungsgebühr.Beispiel Spotify:Alle Musik immer dabei. Im Abo.
  • 50. Und nur, wenn klar ist, dass es echteSoftware-Entwicklung ist, mit häufigenUpdates und laufendem App-Management50AppsBeispiel: AutoScout24-App auf allen Systemen: Mehr als 6 Mio App-Downloads
  • 51. Apps sind geeignet, wenn Performance undJoy-of-Use zentral sind51AppsEADS Upmagazine, umgesetzt von Aperto
  • 52. Performance und Joy-of-Use zählen vor allembei Spielen. Also auch dafür Apps.54AppsVolkswagen „Rally the World. The Game“, Aperto
  • 53. 55
  • 54. 56
  • 55. 57
  • 56. Meist notwendig, wenn native Funktionalitätenvon Geräten genutzt werden sollen58AppsBeispiele: Die WWF Schneekugel App (Aperto) nutzt den Trägheitssensor.
  • 57. Mit Apps kann Sichtbarkeit in den jeweiligenApp-Stores erreicht werden59AppsVolkswagen „Rally the World. The Game.“ wurde im Appstore gefeatured. App für iOS und Android, von Aperto
  • 58. Appssind besonders geeignet, …wenn es klare Use-Casesgibt, die sich zur Umsetzungin einer App eignenWenn Performance extremwichtig istwenn es klareBusiness-Cases gibt,z.B. Abo oder Verkaufwenn hoher Joy-of-Useerreicht werden sollwenn nativeFunktionalitäten der Gerätegenutzt werden sollen (z.B.Trägheitssensor)wenn komplexeInteraktionen abgebildetwerden müssenwenn klar ist, dass App-Entwicklung Software-Entwicklung ist, Updatesund App-Managementnotwendig sindwenn Sichtbarkeit inApp-Stores erreicht undreichweitenstark vermarktetwerden sollwenn man auf wenige OSeingrenzen kann
  • 59. Cross-PlattformStrategien sind clevereKombinationen!ResponsiveWebdesignDeviceTemplatesPlatformSolutionApps
  • 60. Responsive Webdesign isteigentlich immer die Basis,die nach Bedarf ergänzt wird.
  • 61. Responsive WebdesignGut 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 sindUmsetzungsstrategie 1Alles über Responsive abdecken (+Apps)
  • 62. Gut geeignet, … wenn es spezielle Use-Cases für Smartphones oder Tablets gibt und damitzusä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 sollResponsive oderDevice TemplatesResponsive Webdesign Device TemplatesUmsetzungsstrategie 2aResponsive plus Device Templates (+Apps)
  • 63. Gut geeignet, … wenn es spezielle Use-Cases für Smartphones oder Tablets gibt und damitzusä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 sollUmsetzungsstrategie 2bDevice Templates nur für einzelne Seiten u. ModuleDevice Templateseinzelne Seiten / ModuleDevice Templateseinzelne Seiten / ModuleResponsive Webdesign
  • 64. Gut geeignet, … wenn hohes Budget für den Betrieb einer eigenen Installation zur Verfügung steht odereine 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 zuentwickelnUmsetzungsstrategie 3Responsive plus Plattform Solution66Platform SolutionResponsive Webdesign Responsive oderPlatform Solution
  • 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 sollUmsetzungsstrategie 4Apps und Hybrid-AppsDesktop AppsApps undHybrid-AppsApps undHybrid-Apps
  • 66. UmsetzungsstrategienResponsive WebdesignDesktop AppsApps undHybrid-AppsApps undHybrid-AppsDevice Templateseinzelne Seiten / ModuleResponsive oderDevice TemplatesDevice Templateseinzelne Seiten / ModuleResponsive WebdesignResponsive WebdesignDevice Templates68Platform SolutionResponsive Webdesign Responsive oderPlatform Solution
  • 67. Vielen Dank undviel Spaß auf der IAK 2013!Klaus Rüggenmann, Aperto AGhttp://www.xing.com/profile/Klaus_Rueggenmannf