Die mobile Herausforderung
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Die mobile Herausforderung

  • 1,359 views
Uploaded on

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

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.

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,359
On Slideshare
928
From Embeds
431
Number of Embeds
5

Actions

Shares
Downloads
20
Comments
0
Likes
3

Embeds 431

http://hochschulmarketing-magazin.de 419
http://feedreader.com 8
http://www.feedreader.com 2
http://cloud.feedly.com 1
http://localhost 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Die mobile Herausforderung Responsivevs.mobileWebsitevs.Apps LösungsansätzeundPraxisbeispiele Hannover, 12.09.2013
  • 2. Heute für Sie hier Martin Reiher Etat Direktor // Leiter Hochschulteam Aperto Jan Gessenhardt Geschäftsführer Aperto Move GmbH
  • 3. Wer wir sind.
  • 4. Agentur für Kommunikation Brand Strategy Public Relations, 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 Konzeption und Design. 6 BarrierefreiheitEffizienzDesignKreativität Design Kommunikations- design Kreativität Digitale Marken- kommunikation
  • 7. Unsere SCIENCE-Expertise (Auswahl)
  • 8. Ausgewählte Referenzen (Hochschulen und Wissenschafts- einrichtungen) 8
  • 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. 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
  • 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. 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. 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. Verschiedenste Bildschirmgrößen und Geräte. Mit Touch-Bedienung auch für große Bildschirmflächen 17
  • 17. … ebenso wie deren Bedienungskonzepte 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. Die tatsächliche Herausforderung: Digitale Ökosysteme sind im Wandel
  • 20. Die Post-PC Ära wird Wirtschaftsprozesse und Industrien nachhaltig verändern!
  • 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. Cross-Plattform ist Grundanforderung für digitale Services geworden 23
  • 23. Positive Nutzererfahrung auf verschiedenen Endgeräten wird zum Wettbewerbsvorteil. USER WEBSITEVIDEOSOCIAL Game
  • 24. Wie mache ich eine Webseite fit für das Cross-Plattform Zeitalter?
  • 25. ?Für welches Projekt ist welche Option geeignet? Mobile Website ? Responsive ? ? ? ? ? ? Apps ?
  • 26. Wir haben bei Aperto mit allen Disziplinen ein gemeinsames Verständnis entwickelt … Responsive Webdesign Adaptive Device Templates Native Apps
  • 27. W… und wir haben Kombinations-Strategien und Entscheidungskriterien erarbeitet. Responsive Webdesign Adaptive Device Templates Native Apps
  • 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. Responsive Webdesign Responsive Webdesign Adaptive Device Templates Native Apps
  • 30. Responsive Webdesgin: Ein Quellcode, eine Navigation, jeweils angepasste Darstellung 31
  • 31. Das CMS generiert also nur 1 Seite, die dann unterschiedlich dargestellt wird. 32 1 HTML- Seite 1 Seite im CMS
  • 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. 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. 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. Funktioniert besonders gut, wenn Responsive Design als Komplexitätsreduktion gelebt wird. Responsive Webdesign
  • 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. Adaptive Device Templates Responsive Webdesign Adaptive Device Templates Native Apps
  • 38. Adaptive Device Templates: Unterschiedliche Site-Quellcode für verschiedene Geräteklassen 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. Aber am besten auf Basis EINER Codebasis 41 Responsive HTML-Code 1 Seite im CMS Einzelne Seiten/Module
  • 41. Cross-Plattform-Umsetzung nah am Templating
  • 42. Share-Funktion direkt im Mobile Gerät aufrufbar! Modularer Aufbau Desktop vs. Smartphone
  • 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. 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. 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. 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. 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. Apps Responsive Webdesign Adaptive Device Templates Native Apps
  • 49. Apps: Native Software für unterschiedliche App-Ökosysteme (Apple, Android, Windows) Windows 8 iOS Android 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. 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. 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. Apps sind geeignet, wenn Performance und Joy-of-Use zentral sind Apps EADS Upmagazine, umgesetzt von Aperto
  • 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. Mit Apps kann Sichtbarkeit in den jeweiligen App-Stores erreicht werden Apps
  • 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. Bewertung der Varianten
  • 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. Cross-Plattform Strategien sind clevere Kombinationen! Responsive Webdesign Adaptive Device Templates Native Apps
  • 60. Meist ist eine Kombination der Ansätze notwendig und auch sinnvoll Responsive Website, adaptive Templates und Native Apps
  • 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. 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. 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. 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. Cross-Device-Umsetzung RWTH Aachen (Arbeitsstand „Mobile“ September 2013)
  • 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