1
Fachtagung. Mobile. CMS. Ausgabekanäle.Trends. Responsive Design. Namics.
Johannes Waibel. Senior Consultant.
Namics.
Optimale Auslieferung der CMS-Inhalte für mobile Endgeräte.
http
://w
ww
.flic
kr.c
om/p
hoto
s/rk
otto
nau/
5712
8849
0/
Namics.
Agenda. Digitale Welt gestern & heute Multiple Ausgabekanäle Implementierungsvarianten
Responsive Layout
„Eigene“ mobile Website(s)
Mobile Applikation(en)
Content Erfassung & Darstellung Zusammenfassung Fragen
03.03.2011 Content. Mobile. Devices. Auslieferung.3
Namics.
Die digitale Welt gestern & heute.
03.03.2011 4 Content. Mobile. Devices. Auslieferung.
Namics.
Gestern.
Die digitale Welt gestern & heute.
03.03.2011 Content. Mobile. Devices. Auslieferung.5
Webbrowser
Tastatur
Notebook
Namics.
Heute.
Die digitale Welt gestern & heute.
03.03.2011 Content. Mobile. Devices. Auslieferung.6
NotebookTablet Screen
Mobile Screen
Large ScreenSpielkonsole
Telefon
Chat
Namics.
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
Die digitale Welt gestern & heute.
03.03.2011 Content. Mobile. Devices. Auslieferung.7
Namics.
Gartner – Web Zugriffe 2013.
Die digitale Welt gestern & heute.
03.03.2011 Content. Mobile. Devices. Auslieferung.8
Web Zugriffe
Zeit2013
By 2013, mobile phones willovertake PCs as the most commonon Web access device worldwide.Quelle: http://www.gartner.com/it/page.jsp?id=1278413 (Januar 2010)
Desktop Web
Mobile Web
Namics.Bild: http://www.flickr.com/photos/snapeverything/4941793006/
“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: http://www.gartner.com/it/page.jsp?id=1278413
…und wie sieht es mit Ihrer Corporate Website aus?
Corporate Website = Mobile Site?
Namics.
Multiple Ausgabekanäle.
03.03.2011 10 Content. Mobile. Devices. Auslieferung.
Namics.
Ausgabevarianten – Anwendersicht.
Multiple Ausgabekanäle.
03.03.2011 Content. Mobile. Devices. Auslieferung.11
Webbrowser
Desktop
Smartphones
• Zuhause / Business (B2B)
• Beratung• Repräsentierung /
Präsentation• Medien Konsum
• Zugriffsdauer: variabel
• Überall (always on, always carried)
• Dringende Aufgaben• Wiederholte Aufgaben• Realtime Kommunikation
• Zugriffsdauer: kurz
• Im Büro / Zuhause
• Komplexe Aufgaben• Research Aufgaben
• Zugriffsdauer: lang
Mobile
Tablets
Namics.
Ausgabevarianten - Technische Sicht.
Multiple Ausgabekanäle.
03.03.2011 Content. Mobile. Devices. Auslieferung.12
Content Management System
WebbrowserIE, FF, Chrome,...
„Eigene“ Mobile Website(s)
(Browser)
Applikationen
(Nativ)
Responsive Layout
(Browser)
Desktop Mobile
Namics.
Beispiele für Implementierungsvarianten.
03.03.2011 13 Content. Mobile. Devices. Auslieferung.
Namics.
Responsive Layout (Liquid Layout).
Umsetzungsvarianten im Mobile Web.
03.03.2011 Content. Mobile. Devices. Auslieferung.14
http://2010.dconstruct.org/
Namics.
Responsive Layout (Liquid Layout).
Umsetzungsvarianten im Mobile Web.
03.03.2011 Content. Mobile. Devices. Auslieferung.15
http://2010.dconstruct.org/
Namics.
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. HTML5
03.03.2011 Content. Mobile. Devices. Auslieferung.16
Umsetzungsvarianten im Mobile Web.
Namics.
„Eigene“ mobile Website(s).
03.03.2011 17 Content. Mobile. Devices. Auslieferung.
Namics.
Raiffeisen Mobile Website.
Namics.
„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. HTML5
Umsetzungsvarianten im Mobile Web.
03.03.2011 Content. Mobile. Devices. Auslieferung.19
Namics.
Native Applikationen.
03.03.2011 20 Content. Mobile. Devices. Auslieferung.
Namics.
Raiffeisen Hypothekenrechner.
Namics.
Namics.
Namics.
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
Umsetzungsvarianten im Mobile Web.
03.03.2011 Content. Mobile. Devices. Auslieferung.24
Namics.
Wann welche “Mobile” Variante wählen?
03.03.2011 25 Content. Mobile. Devices. Auslieferung.
Namics.
Wann welche “Mobile” Variante wählen?
Umsetzungsvarianten im Mobile Web.
03.03.2011 Content. Mobile. Devices. Auslieferung.26
Responsive Layout Eigene Mobile Website(s)
Applikationen
1 Website Eigene Website(s) für definierte Devicegruppen
Ausreizen von plattformspezifischen Funktionen
Ansatz
Gleicher Content bei unterschiedlicher Darstellung
„Mobiler“ Content mit eigener Darstellung
„Mobiler“ Content mit hoher Interaktivität
Content und Interaktion
„Normale Website“ „Normale Website“, reduzierter Umfang
Eigenes Ökosystem: Sichtbarkeit, Ratings, Bezahlsystem
Ökosystem
gering gering + gering hochKosten für Entwicklung
Namics.
Content Erfassung & Darstellung.
03.03.2011 27 Content. Mobile. Devices. Auslieferung.
Wie sieht der „Mobile“ Content auf den verschiedenen Mobile Devices aus?
Namics.
Heute.
03.03.2011 Content. Mobile. Devices. Auslieferung.29
Content Erfassung & Darstellung.
Namics.
Zukunft. CMS mit integrierten Mobile Emulatoren Wie geht das?
Content Erfassung & Darstellung.
03.03.2011 Content. Mobile. Devices. Auslieferung.30
Namics.
Demo.
Content Erfassung & Darstellung.
03.03.2011 Content. Mobile. Devices. Auslieferung.31
Demo
Namics.
Zusammenfassung.
03.03.2011 32 Content. Mobile. Devices. Auslieferung.
Namics.Content. Mobile. Devices. Auslieferung.
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
Zusammenfassung – Umsetzungsvarianten.
03.03.2011 33
Responsive Design
Eigene Mobile Website(s)
Native Applikation(en)
1
2
3
Namics.
Vielen Dank für Ihre Aufmerksamkeit.
[email protected]@joewaibel
03.03.2011 34 Content. Mobile. Devices. Auslieferung.
Namics.
Trend – „Mobile First“.
03.03.2011 Content. Mobile. Devices. Auslieferung.35
= Mobile Site
- Reduktion Anwendungsfälle / Inhalte
Gesamte Corporate Website
Traditioneller Ansatz
+ weitere Anwendungsfälle / Inhalte
= Gesamte Corporate Website
Mobile Site
Neuer Ansatz
Umsetzungsvarianten im Mobile Web.
Namics.
Responsive Layout (Liquid Layout).
03.03.2011 Content. Mobile. Devices. Auslieferung.36
Namics.Content. Mobile. Devices. Auslieferung.37
In Zukunft könnten CMS-Offerten so aussehen:
Zusammenfassung – Umsetzungsvarianten.
03.03.2011
Desktopwebsite(s):
2 meistverwendete Desktopbrowser
Internet Explorer 7 + CHF 10‘000.-
Internet Explorer 6 + CHF 15‘000.-
...
Mobile
Responsive Design (Tablet & Smartphones) + CHF 10‘000.-
Eigene“ Mobile Website (Tablet & Smartphones) + CHF 40‘000.-
Mobile Applikationen (Tablet & Smartphones) + CHF x.-
Namics.
Mobile Strategie – Arbeitsschritte.
Mobile Strategie
03.05.2023 Mobile. Context is King. ZRH.
1. Analyse
2. Vision und Ziele
3. Zielgruppen & Bedürfnisse
4. Ableitung Mobile Services
5. Planung
= Mobile Strategie
Mobile.Namics
Top Related