mobile und trends

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.

johannes.waibel@namics.com@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