mobile und trends

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

Upload: namics

Post on 14-Apr-2017

1.427 views

Category:

Business


0 download

TRANSCRIPT

Page 1: Mobile und Trends

1

Fachtagung. Mobile. CMS. Ausgabekanäle.Trends. Responsive Design. Namics.

Johannes Waibel. Senior Consultant.

Page 2: Mobile und Trends

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/

Page 3: Mobile und Trends

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

Page 4: Mobile und Trends

Namics.

Die digitale Welt gestern & heute.

03.03.2011 4 Content. Mobile. Devices. Auslieferung.

Page 5: Mobile und Trends

Namics.

Gestern.

Die digitale Welt gestern & heute.

03.03.2011 Content. Mobile. Devices. Auslieferung.5

Webbrowser

Tastatur

Notebook

Page 6: Mobile und Trends

Namics.

Heute.

Die digitale Welt gestern & heute.

03.03.2011 Content. Mobile. Devices. Auslieferung.6

NotebookTablet Screen

Mobile Screen

Large ScreenSpielkonsole

Telefon

Chat

Page 7: Mobile und Trends

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

Page 8: Mobile und Trends

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

Page 9: Mobile und Trends

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?

Page 10: Mobile und Trends

Namics.

Multiple Ausgabekanäle.

03.03.2011 10 Content. Mobile. Devices. Auslieferung.

Page 11: Mobile und Trends

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

Page 12: Mobile und Trends

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

Page 13: Mobile und Trends

Namics.

Beispiele für Implementierungsvarianten.

03.03.2011 13 Content. Mobile. Devices. Auslieferung.

Page 14: Mobile und Trends

Namics.

Responsive Layout (Liquid Layout).

Umsetzungsvarianten im Mobile Web.

03.03.2011 Content. Mobile. Devices. Auslieferung.14

http://2010.dconstruct.org/

Page 15: Mobile und Trends

Namics.

Responsive Layout (Liquid Layout).

Umsetzungsvarianten im Mobile Web.

03.03.2011 Content. Mobile. Devices. Auslieferung.15

http://2010.dconstruct.org/

Page 16: Mobile und Trends

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.

Page 17: Mobile und Trends

Namics.

„Eigene“ mobile Website(s).

03.03.2011 17 Content. Mobile. Devices. Auslieferung.

Page 18: Mobile und Trends

Namics.

Raiffeisen Mobile Website.

Page 19: Mobile und Trends

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

Page 20: Mobile und Trends

Namics.

Native Applikationen.

03.03.2011 20 Content. Mobile. Devices. Auslieferung.

Page 21: Mobile und Trends

Namics.

Raiffeisen Hypothekenrechner.

Page 22: Mobile und Trends

Namics.

Page 23: Mobile und Trends

Namics.

Page 24: Mobile und Trends

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

Page 25: Mobile und Trends

Namics.

Wann welche “Mobile” Variante wählen?

03.03.2011 25 Content. Mobile. Devices. Auslieferung.

Page 26: Mobile und Trends

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

Page 27: Mobile und Trends

Namics.

Content Erfassung & Darstellung.

03.03.2011 27 Content. Mobile. Devices. Auslieferung.

Page 28: Mobile und Trends

Wie sieht der „Mobile“ Content auf den verschiedenen Mobile Devices aus?

Page 29: Mobile und Trends

Namics.

Heute.

03.03.2011 Content. Mobile. Devices. Auslieferung.29

Content Erfassung & Darstellung.

Page 30: Mobile und Trends

Namics.

Zukunft. CMS mit integrierten Mobile Emulatoren Wie geht das?

Content Erfassung & Darstellung.

03.03.2011 Content. Mobile. Devices. Auslieferung.30

Page 31: Mobile und Trends

Namics.

Demo.

Content Erfassung & Darstellung.

03.03.2011 Content. Mobile. Devices. Auslieferung.31

Demo

Page 32: Mobile und Trends

Namics.

Zusammenfassung.

03.03.2011 32 Content. Mobile. Devices. Auslieferung.

Page 33: Mobile und Trends

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

Page 34: Mobile und Trends

Namics.

Vielen Dank für Ihre Aufmerksamkeit.

[email protected]@joewaibel

03.03.2011 34 Content. Mobile. Devices. Auslieferung.

Page 35: Mobile und Trends

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.

Page 36: Mobile und Trends

Namics.

Responsive Layout (Liquid Layout).

03.03.2011 Content. Mobile. Devices. Auslieferung.36

Page 37: Mobile und Trends

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.-

Page 38: Mobile und Trends

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