Fachtagung. Mobile. CMS. Ausgabekanäle. Trends. Responsive Design. Namics. Johannes Waibel. Senior Consultant.

Transkript

1 Fachtagung. Mobile. CMS. Ausgabekanäle. Trends. Responsive Design. Johannes Waibel. Senior Consultant. 1

2 Optimale Auslieferung der CMS-Inhalte für mobile Endgeräte.

3 Agenda. à Digitale Welt gestern & heute à Multiple Ausgabekanäle à Implementierungsvarianten Responsive Layout Eigene mobile Website(s) Mobile Applikation(en) à Content Erfassung & Darstellung à Zusammenfassung à Fragen Content. Mobile. Devices. Auslieferung.

4 Die digitale Welt gestern & heute Content. Mobile. Devices. Auslieferung.

5 Die digitale Welt gestern & heute. Gestern. Webbrowser Notebook Tastatur Content. Mobile. Devices. Auslieferung.

6 Die digitale Welt gestern & heute. Heute. Large Screen Spielkonsole Notebook Tablet Screen Chat Telefon Mobile Screen Content. Mobile. Devices. Auslieferung.

7 Die digitale Welt gestern & heute. Fazit. à Das Internet ist nur das Medium und überall verfügbar à Verschiedenste Endgeräte konsumieren Inhalte und Informationen über dieses Medium Desktop Computer Notebooks Mobile Devices Tablets TV Objekte (Internet of things) à Heute: Fokus auf Mobile Devices & Tablets Content. Mobile. Devices. Auslieferung.

8 Die digitale Welt gestern & heute. Gartner Web Zugriffe Web Zugriffe By 2013, mobile phones will overtake PCs as the most common on Web access device worldwide. Quelle: (Januar 2010) Mobile Web Desktop Web 2013 Zeit Content. Mobile. Devices. Auslieferung.

9 Websites not optimized for the smaller-screen formats will become a market barrier for their owners much content and many sites will need to be reformatted/rebuilt. Quelle: und wie sieht es mit Ihrer Corporate Website aus? Corporate Website = Mobile Site? Bild:

10 Multiple Ausgabekanäle Content. Mobile. Devices. Auslieferung.

11 Multiple Ausgabekanäle. Ausgabevarianten Anwendersicht. Desktop Mobile Webbrowser Smartphones Tablets Im Büro / Zuhause Komplexe Aufgaben Research Aufgaben Zugriffsdauer: lang Überall (always on, always carried) Dringende Aufgaben Wiederholte Aufgaben Realtime Kommunikation Zugriffsdauer: kurz Zuhause / Business (B2B) Beratung Repräsentierung / Präsentation Medien Konsum Zugriffsdauer: variabel Content. Mobile. Devices. Auslieferung.

12 Multiple Ausgabekanäle. Ausgabevarianten - Technische Sicht. Desktop Mobile Webbrowser IE, FF, Chrome,... Responsive Layout Eigene Mobile Website(s) Applikationen (Browser) (Browser) (Nativ) Content Management System Content. Mobile. Devices. Auslieferung.

13 Beispiele für Implementierungsvarianten Content. Mobile. Devices. Auslieferung.

14 Umsetzungsvarianten im Mobile Web. Responsive Layout (Liquid Layout) Content. Mobile. Devices. Auslieferung.

15 Umsetzungsvarianten im Mobile Web. Responsive Layout (Liquid Layout) Content. Mobile. Devices. Auslieferung.

16 Umsetzungsvarianten im Mobile Web. Responsive Layout - Key Facts. à Es gibt nur 1 Website für alle Devicetypen & Gruppen (One Web) à Es gibt keine eigene mobile URL à Responsive Content bedeutet Umordnung von Modulen Reduktion von Content Dynamische Berechnung von Grössenverhältnissen à Responsive Content wird gesteuert über Screengrösse à Primär clientseitig mit Frontendtechnik (CSS, Java Script) à Meist nur Online Nutzung, inkl. HTML Content. Mobile. Devices. Auslieferung.

17 Eigene mobile Website(s) Content. Mobile. Devices. Auslieferung.

18 Raiffeisen Mobile Website.

19 Umsetzungsvarianten im Mobile Web. Eigene Mobile Website(s) - Key Facts. à Eigene Mobile Website(s) zusätzlich zur Corporate Website à Mobile URL (m.company.com) à Kombination mit User Agent Erkennung à Anpassung Content und Applikationslogik erfolgt primär serverseitig à Meist nur Online Nutzung, inkl. HTML Content. Mobile. Devices. Auslieferung.

20 Native Applikationen Content. Mobile. Devices. Auslieferung.

21 Raiffeisen Hypothekenrechner.

22

23

24 Umsetzungsvarianten im Mobile Web. Native Applikationen - Key Facts. à Native Applikationen stehen oft nur teilweise mit dem CMS in einer Beziehung und haben starken Applikationscharakter à Verwenden keinen Browser sondern laufen nativ à Bezug und Vertrieb erfolgt über Applicationstores (Ökosystem) à Die Entwicklung erfolgt pro Plattform (ios, Android,...) mit geringen Synergien à Einbezug von Hardware Features (Kamera, GPS, Dokumente,..) möglich à Flexible Kombination aus Offline & Online Content. Mobile. Devices. Auslieferung.

25 Wann welche Mobile Variante wählen? Content. Mobile. Devices. Auslieferung.

26 Umsetzungsvarianten im Mobile Web. Wann welche Mobile Variante wählen? Responsive Layout Eigene Mobile Website(s) Applikationen Ansatz 1 Website Eigene Website(s) für definierte Devicegruppen Ausreizen von plattformspezifischen Funktionen Content und Interaktion Gleicher Content bei unterschiedlicher Darstellung Mobiler Content mit eigener Darstellung Mobiler Content mit hoher Interaktivität Ökosystem Normale Website Normale Website, reduzierter Umfang Eigenes Ökosystem: Sichtbarkeit, Ratings, Bezahlsystem Kosten für Entwicklung gering gering + gering hoch Content. Mobile. Devices. Auslieferung.

27 Content Erfassung & Darstellung Content. Mobile. Devices. Auslieferung.

28 Wie sieht der Mobile Content auf den verschiedenen Mobile Devices aus?

29 Content Erfassung & Darstellung. Heute Content. Mobile. Devices. Auslieferung.

30 Content Erfassung & Darstellung. Zukunft. à CMS mit integrierten Mobile Emulatoren à Wie geht das? Content. Mobile. Devices. Auslieferung.

31 Content Erfassung & Darstellung. Demo. Demo Content. Mobile. Devices. Auslieferung.

32 Zusammenfassung Content. Mobile. Devices. Auslieferung.

33 Zusammenfassung Umsetzungsvarianten. Zusammenfassung. à Jedes Display (Desktop Browser, Notebook, Tablet-PC, Mobile Endgeräte, TV,...) wird in Zukunft Internetinhalte abrufen können. à In Zukunft erleichtern integrierte Mobile Emulatoren die Arbeit von Content Redakteuren à Entscheidung welche Mobile Variante gewählt wird 1 Responsive Design 2 Eigene Mobile Website(s) 3 Native Applikation(en) Content. Mobile. Devices. Auslieferung.

34 Vielen Dank für Ihre Content. Mobile. Devices. Auslieferung.

35 Umsetzungsvarianten im Mobile Web. Trend Mobile First. à Traditioneller Ansatz à Neuer Ansatz Gesamte Corporate Website = Gesamte Corporate Website - Reduktion Anwendungsfälle / Inhalte + weitere Anwendungsfälle / Inhalte = Mobile Site Mobile Site Content. Mobile. Devices. Auslieferung.

36 Responsive Layout (Liquid Layout) Content. Mobile. Devices. Auslieferung.

37 Zusammenfassung Umsetzungsvarianten. In Zukunft könnten CMS-Offerten so aussehen: à Desktopwebsite(s): 2 meistverwendete Desktopbrowser Internet Explorer 7 + CHF Internet Explorer 6 + CHF à Mobile Responsive Design (Tablet & Smartphones) + CHF Eigene Mobile Website (Tablet & Smartphones) + CHF Mobile Applikationen (Tablet & Smartphones) + CHF x Content. Mobile. Devices. Auslieferung.

38 Mobile Strategie Mobile Strategie Arbeitsschritte. Mobile.Namics 1. Analyse 2. Vision und Ziele 3. Zielgruppen & Bedürfnisse 4. Ableitung Mobile Services = Mobile Strategie 5. Planung 5/2/11 Mobile. Context is King. ZRH.