29-mal heruntergeladen
Hochgeladen vonMartin Reiher
Die mobile Herausforderung
Das Dokument behandelt die Herausforderungen und Lösungen im Bereich mobiler Webseiten, responsive Design und Apps. Es analysiert die Bedürfnisse von Nutzern in einer zunehmend mobilen Welt und schlägt unterschiedliche Strategien vor, um digitale Inhalte plattformübergreifend optimal darzustellen. Darüber hinaus werden praktische Beispiele und Referenzen prominenter Hochschulen zur Verbesserung der mobilen Kommunikation vorgestellt.
Weitere ähnliche Inhalte
Die mobile Herausforderung
- 1.
- 2. Heute für Siehier Martin Reiher Etat Direktor // Leiter Hochschulteam Aperto Jan Gessenhardt Geschäftsführer Aperto Move GmbH
- 3.
- 4. Agentur für Kommunikation Brand Strategy PublicRelations, Issue Campaigning Print, TV, POS, Events, Brand Campaigning Mobile & Apps Online Marketing Web Experiences
- 5. Aperto heute. Facts &Figures. 01 Platz Höchster Anteil digitaler Leistungen aller Werbeagenturen Deutschlands der größten inhabergeführten Werbeagenturen Deutschlands 30 Millionen Euro Umsatz 2012 laut vorläufigem Jahresabschluss 340 Köpfe im Moment und stetig gesund wachsend GWA Ranking 2011, Aperto mit 51% Digitalanteil 08 Platz 5
- 6. Ausgezeichnet in Konzeptionund Design. 6 BarrierefreiheitEffizienzDesignKreativität Design Kommunikations- design Kreativität Digitale Marken- kommunikation
- 7.
- 8.
- 9. Research in Germany2009 - heute Relaunch und stetige Weiterentwicklung der Website 2013: Technik-Relaunch – Migration von CoreMedia auf Magnolia SEA-Marketing und Newsletterversand Forschungsmarketing für die Bundesrepublik Deutschland
- 10. RWTH Aachen 2010- heute Relaunch der zentralen Hochschulwebsite, inkl. 9 Fakultäten und 7 Fachgruppen Umsetzung eines Baukastens für 260 Institute plus Lehrstühle und Forschungsgebiete Erarbeitung einer Social Media Guideline Beratung zur Mobilstrategie Einführung eines Intranets Onlinekommunikation der Exzellenz-Universität RWTH Aachen
- 11. Universität Potsdam 2011- heute Kompletter Relaunch der Hochschulwebsite Technische Umsetzung auf Basis Typo3 IT-Support und laufende Betreuung Erarbeitung eines Konzeptes zur Online- Kommunikation mit Studieninteressierten Relaunch Bereich „Studium“ und IT-Support
- 12. TU Hamburg-Harburg 2012- heute Kompletter Relaunch der Hochschulwebsite (Konzept, Design, Frontend-Umsetzung) Entwicklung CD und Umsetzung Geschäfts- ausstattung Laufender Support und Ausbau der Funktionalitäten Technische Umsetzung auf Typo3 durch TUHH Relaunch Hochschulwebsite
- 14. Über 40% MobileInternetnutzer in Deutschland 0% 5% 10% 15% 20% 25% 30% 35% 40% 45% 2009 2010 2011 2012 2013 seltener mind. 1x pro Monat mind. 1x pro Woche täglich Basis: Deutsche Onlinenutzer ab 14 Jahren Anteil der deutschen Onliner, die das mobile Internet nutzen Mobile Web verdoppelt Nutzerzahl innerhalb eines Jahres Quelle: ARD/ZDF Onlinestudie
- 15. Uni BremenLMU MünchenUni Heidelberg Uni Freiburg FU Berlin Mobile Status bei Deutschlands „Elite-Unis“ 15Uni Göttingen Uni Konstanz Uni Karlsruhe TU MünchenTU Berlin
- 16. Nutzererwartungen (2011) … 36% 64%dieserUser erwarten beim Aufruf einer mobilen Seite die gleichen Inhalte, die sie auch via PC finden 14-19 Jahre alt Smartphone-Nutzer Tablet - Nutzer Aller User ärgern sich regelmäßig über nicht mobil-optimierte Seiten 58% 59% 49% Davon sind: 85% 81% 76% 14-19 Jahre alt Smartphone-Nutzer Tablet - Nutzer Source: Karen McGrane, Mobile Content Strategy , 2011
- 17. Verschiedenste Bildschirmgrößen undGeräte. Mit Touch-Bedienung auch für große Bildschirmflächen 17
- 18. … ebenso wiederen Bedienungskonzepte 18
- 19. Mobile Devices: NeueEinflussfaktoren auf digitale Anwendungen Berücksichtigung neuer Nutzungssituationen 19 01 02 03 04 iOS & Android? Retina Display? Touch & Swipe? Verschiedene Endgeräte Verschiedene Orte Verschiedene Aktivitäten Verschiedene Verbindungen Zu Hause? Im Büro? Unterwegs Social Media? Zeitvertreib? PC-Ersatz? WLAN? Mobiles Netz? Offline?
- 20.
- 21. Die Post-PC Ärawird Wirtschaftsprozesse und Industrien nachhaltig verändern!
- 22. Führende Technologien kämpfen umalle 4 Bildschirme Android/ Motorola Nexus Android Tablets Nexus Q / Google TV Google Play / Cloud Chromebook / Chrome Browser Windows8 Computer Windows / Nokia Surface Windows 8 Tablets Marketplace / AzureXboX One Mac Computer iPhone iPad Apple TV iTunes / iCloud
- 23. Cross-Plattform ist Grundanforderungfür digitale Services geworden 23
- 24. Positive Nutzererfahrung aufverschiedenen Endgeräten wird zum Wettbewerbsvorteil. USER WEBSITEVIDEOSOCIAL Game
- 25. Wie mache icheine Webseite fit für das Cross-Plattform Zeitalter?
- 26. ?Für welches Projektist welche Option geeignet? Mobile Website ? Responsive ? ? ? ? ? ? Apps ?
- 27. Wir haben beiAperto mit allen Disziplinen ein gemeinsames Verständnis entwickelt … Responsive Webdesign Adaptive Device Templates Native Apps
- 28. W… und wirhaben Kombinations-Strategien und Entscheidungskriterien erarbeitet. Responsive Webdesign Adaptive Device Templates Native Apps
- 29. … klassifiziert wurden3 mögliche Cross-Device Umsetzungsoptionen 29 Responsive Web Design Adaptive Web Design Device Templates Auswahl an OS undApp StoresAnpassung der Screengröße Native Apps
- 30.
- 31. Responsive Webdesgin: EinQuellcode, eine Navigation, jeweils angepasste Darstellung 31
- 32. Das CMS generiertalso nur 1 Seite, die dann unterschiedlich dargestellt wird. 32 1 HTML- Seite 1 Seite im CMS
- 33. Ist besonders geeignet,wenn es um die Anpassung der Darstellung auf Bildschirmgrößen geht und nicht um die Abbildung gerätespezifischer Use-Cases. Responsive Webdesign
- 34. Und wenn Ladezeitund Performance auf Smartphones nicht erfolgskritisch sind. Responsive Webdesign https://www.gov.uk, Performance auf Smartphones nicht erfolgskritisch und kaum Bilder.
- 35. Nur wenn diegesamte Website neu gemacht wird, und nicht z.B. die Desktop-Version bleibt! Responsive Webdesign IHK Berlin , Intranet Prototyp umgesetzt von www.aperto.de
- 36. Funktioniert besonders gut,wenn Responsive Design als Komplexitätsreduktion gelebt wird. Responsive Webdesign
- 37. Responsive Webdesign ist besondersgeeignet, … 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
- 38.
- 39. Adaptive Device Templates:Unterschiedliche Site-Quellcode für verschiedene Geräteklassen 39
- 40. Ein CMS, einmaligeEingabe der Inhalte, Ausspielung optimierter Device- Templates HTML- Seite 1 1 Seite im CMS HTML- Seite 3 HTML- Seite 2 40
- 41. Aber am bestenauf Basis EINER Codebasis 41 Responsive HTML-Code 1 Seite im CMS Einzelne Seiten/Module
- 42.
- 43. Share-Funktion direkt im Mobile Gerätaufrufbar! Modularer Aufbau Desktop vs. Smartphone
- 44. Besonders notwendig, wennunterschiedliche Use-Cases auf unterschiedlichen Geräten – und damit jeweils unterschiedliche Features Adaptive Device Templates Z.B. Location Based Services Z.B. Second Screen
- 45. Immer wenn Ladezeitund Performance erfolgskritisch sind, z.B. weil Bilder und Videos eine wichtige Rolle spielen www.rallytheworld.com, umgesetzt von Aperto: Ein responsive Template-Set für Desktop und Tablets, ein adaptives Template-Set für Smartphones Adaptive Device Templates
- 46. Komplexere Features undProzesse wie z.B. Warenkörbe oder komplexe Suchfunktionen sind häufig ein Grund für Device Templates www.sos-kinderdorf.de, umgesetzt von Aperto Adaptive Device Templates
- 47. Wenn eine Desktop-Websiteschon existiert und bestehen bleiben soll, dann besser neue Templates für Smartphones und Tablets www.eads.com, umgesetzt von Aperto Adaptive Device Templates
- 48. Adaptive Device Templates sindbesonders 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
- 49.
- 50. Apps: Native Softwarefür unterschiedliche App-Ökosysteme (Apple, Android, Windows) Windows 8 iOS Android 50
- 51. Alphaguide, Corporate Car-Sharingvon BMW: Fahrzeug finden und buchen, Werkstätten, Unfallberichte in der App. Von Aperto umgesetzt Apps: Native Software für Services und mobile Transaktionen Apps
- 52. Wenn es klargeeignete Use-Cases und Business-Cases gibt! Apps Alphaguide, Corporate Car-Sharing von BMW: Fahrzeug finden und buchen, Werkstätten, Unfallberichte in der App. Beispiel myTaxi: Taxifahrt anbieten, Taxi rufen, Vermittlungsgebühr. Beispiel Spotify: Alle Musik immer dabei. Im Abo.
- 53. Wenn klar ist,dass es echte Software- Entwicklung ist, mit häufigen Updates und laufendem App-Management Apps Beispiel: AutoScout24-App auf allen Systemen: Mehr als 6 Mio App-Downloads
- 54. Apps sind geeignet,wenn Performance und Joy-of-Use zentral sind Apps EADS Upmagazine, umgesetzt von Aperto
- 55. Meist notwendig, wennnative Funktionalitäten von Geräten genutzt werden sollen Apps Beispiele: Die WWF Schneekugel App (Aperto) nutzt den Trägheitssensor.
- 56. Mit Apps kannSichtbarkeit in den jeweiligen App-Stores erreicht werden Apps
- 57. 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
- 58.
- 59. Responsive Design Ein Quellcode,eine Navigation, jeweils angepasste Darstellung Adaptive Templates Unterschiedliche Site-Quellcode für unterschiedliche Geräteklassen Apps Native Software für unterschiedliche App-Ökosysteme (Apple, Android, Windows) 59 Beispiel-Bewertungsskala für Varianten
- 60.
- 61. Meist ist eineKombination der Ansätze notwendig und auch sinnvoll Responsive Website, adaptive Templates und Native Apps
- 62. Cross-Platform Lösung aufBasis von Magnolia Ein zukunftsgerichteter digitaler Multi-Channel Ansatz 62 Up To Planet iOS App Investor Relations iOS App Desktop / Tablet Website Mobile Website
- 63. Zentrale Content-Quelle füralle Kanäle Kanal-übergreifende Content-Pflege, kanal-spezifische Ausspielung 63 Editors create content once API IR iPad App (iOS) Tablet / desktop website (responsive) Adaptive mobile web site (HTML 5 templates) Magnolia CMS ONE content source for all relevant channels Up To Planet App (iOS)
- 64. Das CMS füttertsämtliche Endgeräte – ohne extra redaktionellen Aufwand CMS – eine Inhaltequelle für verschiedene Kanäle Tablets Smartphones 7“ tablets 10“ tablets Responsive Design Device Templates Website
- 65. Was bleibt, wasändert sich? Der Inhalt Webseite bleibt identisch Auch 2012 neue Technologien finden und einsetzen. Auch 2012 neue Technologien finden und einsetzen. Die Pflege der Inhalte ändert sich nicht bzw. nur minimal Es wird mit dem bestehenden CMS gearbeitet Breaking points für Responsive Design Optik und Bedienung für alle Geräte verbessern Neue mobile Templates und Paragraphen
- 66. Cross-Device-Umsetzung RWTH Aachen (Arbeitsstand„Mobile“ September 2013)
- 67. Danke Aperto Move GmbH JanGessenhardt Managing Director E-Mail jan.gessenhardt@aperto.de Telefon +49 (0) 30 – 283 921 – 910 Fax +49 (0) 30 – 283 921 – 29 Aperto AG Martin Reiher Etat Direktor // Leiter Hochschulteam E-Mail martin.reiher@aperto.de Telefon +49 (0) 30 – 283 921 – 315 Fax +49 (0) 30 – 283 921 – 29 ApertoAG – In der Pianofabrik Chausseestr. 5 10115 Berlin