Die mobile Herausforderung

1,845 views
1,786 views

Published on

Responsive vs. mobile Website vs. Apps: Lösungsansätze und Praxisbeispiele

Vortrag von Martin Reiher und Jan Gessenhardt am 12.09.2013 auf der Jahrestagung des Bundesverbandes für Hochschulkommunikation in Hannvover.

Published in: Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,845
On SlideShare
0
From Embeds
0
Number of Embeds
619
Actions
Shares
0
Downloads
28
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Die mobile Herausforderung

  1. 1. Die mobile Herausforderung Responsivevs.mobileWebsitevs.Apps LösungsansätzeundPraxisbeispiele Hannover, 12.09.2013
  2. 2. Heute für Sie hier Martin Reiher Etat Direktor // Leiter Hochschulteam Aperto Jan Gessenhardt Geschäftsführer Aperto Move GmbH
  3. 3. Wer wir sind.
  4. 4. Agentur für Kommunikation Brand Strategy Public Relations, Issue Campaigning Print, TV, POS, Events, Brand Campaigning Mobile & Apps Online Marketing Web Experiences
  5. 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. 6. Ausgezeichnet in Konzeption und Design. 6 BarrierefreiheitEffizienzDesignKreativität Design Kommunikations- design Kreativität Digitale Marken- kommunikation
  7. 7. Unsere SCIENCE-Expertise (Auswahl)
  8. 8. Ausgewählte Referenzen (Hochschulen und Wissenschafts- einrichtungen) 8
  9. 9. Research in Germany 2009 - 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. 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. 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. 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
  13. 13. Über 40% Mobile Internetnutzer 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
  14. 14. Uni BremenLMU München Uni Heidelberg Uni Freiburg FU Berlin Mobile Status bei Deutschlands „Elite-Unis“ 15Uni Göttingen Uni Konstanz Uni Karlsruhe TU MünchenTU Berlin
  15. 15. Nutzererwartungen (2011) … 36% 64%dieser User 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
  16. 16. Verschiedenste Bildschirmgrößen und Geräte. Mit Touch-Bedienung auch für große Bildschirmflächen 17
  17. 17. … ebenso wie deren Bedienungskonzepte 18
  18. 18. Mobile Devices: Neue Einflussfaktoren 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?
  19. 19. Die tatsächliche Herausforderung: Digitale Ökosysteme sind im Wandel
  20. 20. Die Post-PC Ära wird Wirtschaftsprozesse und Industrien nachhaltig verändern!
  21. 21. Führende Technologien kämpfen um alle 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
  22. 22. Cross-Plattform ist Grundanforderung für digitale Services geworden 23
  23. 23. Positive Nutzererfahrung auf verschiedenen Endgeräten wird zum Wettbewerbsvorteil. USER WEBSITEVIDEOSOCIAL Game
  24. 24. Wie mache ich eine Webseite fit für das Cross-Plattform Zeitalter?
  25. 25. ?Für welches Projekt ist welche Option geeignet? Mobile Website ? Responsive ? ? ? ? ? ? Apps ?
  26. 26. Wir haben bei Aperto mit allen Disziplinen ein gemeinsames Verständnis entwickelt … Responsive Webdesign Adaptive Device Templates Native Apps
  27. 27. W… und wir haben Kombinations-Strategien und Entscheidungskriterien erarbeitet. Responsive Webdesign Adaptive Device Templates Native Apps
  28. 28. … klassifiziert wurden 3 mögliche Cross-Device Umsetzungsoptionen 29 Responsive Web Design Adaptive Web Design Device Templates Auswahl an OS undApp StoresAnpassung der Screengröße Native Apps
  29. 29. Responsive Webdesign Responsive Webdesign Adaptive Device Templates Native Apps
  30. 30. Responsive Webdesgin: Ein Quellcode, eine Navigation, jeweils angepasste Darstellung 31
  31. 31. Das CMS generiert also nur 1 Seite, die dann unterschiedlich dargestellt wird. 32 1 HTML- Seite 1 Seite im CMS
  32. 32. 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
  33. 33. Und wenn Ladezeit und Performance auf Smartphones nicht erfolgskritisch sind. Responsive Webdesign https://www.gov.uk, Performance auf Smartphones nicht erfolgskritisch und kaum Bilder.
  34. 34. Nur wenn die gesamte Website neu gemacht wird, und nicht z.B. die Desktop-Version bleibt! Responsive Webdesign IHK Berlin , Intranet Prototyp umgesetzt von www.aperto.de
  35. 35. Funktioniert besonders gut, wenn Responsive Design als Komplexitätsreduktion gelebt wird. Responsive Webdesign
  36. 36. 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
  37. 37. Adaptive Device Templates Responsive Webdesign Adaptive Device Templates Native Apps
  38. 38. Adaptive Device Templates: Unterschiedliche Site-Quellcode für verschiedene Geräteklassen 39
  39. 39. Ein CMS, einmalige Eingabe der Inhalte, Ausspielung optimierter Device- Templates HTML- Seite 1 1 Seite im CMS HTML- Seite 3 HTML- Seite 2 40
  40. 40. Aber am besten auf Basis EINER Codebasis 41 Responsive HTML-Code 1 Seite im CMS Einzelne Seiten/Module
  41. 41. Cross-Plattform-Umsetzung nah am Templating
  42. 42. Share-Funktion direkt im Mobile Gerät aufrufbar! Modularer Aufbau Desktop vs. Smartphone
  43. 43. Besonders notwendig, wenn unterschiedliche Use-Cases auf unterschiedlichen Geräten – und damit jeweils unterschiedliche Features Adaptive Device Templates Z.B. Location Based Services Z.B. Second Screen
  44. 44. Immer wenn Ladezeit und 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
  45. 45. Komplexere Features und Prozesse 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
  46. 46. Wenn eine Desktop-Website schon existiert und bestehen bleiben soll, dann besser neue Templates für Smartphones und Tablets www.eads.com, umgesetzt von Aperto Adaptive Device Templates
  47. 47. Adaptive 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
  48. 48. Apps Responsive Webdesign Adaptive Device Templates Native Apps
  49. 49. Apps: Native Software für unterschiedliche App-Ökosysteme (Apple, Android, Windows) Windows 8 iOS Android 50
  50. 50. Alphaguide, Corporate Car-Sharing von BMW: Fahrzeug finden und buchen, Werkstätten, Unfallberichte in der App. Von Aperto umgesetzt Apps: Native Software für Services und mobile Transaktionen Apps
  51. 51. Wenn es klar geeignete 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.
  52. 52. 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
  53. 53. Apps sind geeignet, wenn Performance und Joy-of-Use zentral sind Apps EADS Upmagazine, umgesetzt von Aperto
  54. 54. Meist notwendig, wenn native Funktionalitäten von Geräten genutzt werden sollen Apps Beispiele: Die WWF Schneekugel App (Aperto) nutzt den Trägheitssensor.
  55. 55. Mit Apps kann Sichtbarkeit in den jeweiligen App-Stores erreicht werden Apps
  56. 56. 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
  57. 57. Bewertung der Varianten
  58. 58. 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
  59. 59. Cross-Plattform Strategien sind clevere Kombinationen! Responsive Webdesign Adaptive Device Templates Native Apps
  60. 60. Meist ist eine Kombination der Ansätze notwendig und auch sinnvoll Responsive Website, adaptive Templates und Native Apps
  61. 61. Cross-Platform Lösung auf Basis von Magnolia Ein zukunftsgerichteter digitaler Multi-Channel Ansatz 62 Up To Planet iOS App Investor Relations iOS App Desktop / Tablet Website Mobile Website
  62. 62. Zentrale Content-Quelle für alle 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)
  63. 63. Das CMS füttert sä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
  64. 64. 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
  65. 65. Cross-Device-Umsetzung RWTH Aachen (Arbeitsstand „Mobile“ September 2013)
  66. 66. Danke Aperto Move GmbH Jan Gessenhardt 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

×