SlideShare ist ein Scribd-Unternehmen logo
1Fachtagung. Mobile. CMS. Ausgabekanäle.Trends. Responsive Design. Namics.Johannes Waibel. Senior Consultant.
Optimale Auslieferung der CMS-Inhalte für mobile Endgeräte.http://www.flickr.com/photos/rkottonau/571288490/
Agenda.Digitale Welt gestern & heuteMultiple AusgabekanäleImplementierungsvariantenResponsive Layout„Eigene“ mobile Website(s)Mobile Applikation(en)Content Erfassung & Darstellung
Zusammenfassung
Fragen03.03.2011Content. Mobile. Devices. Auslieferung.3
Die digitale Welt gestern & heute.03.03.20114Content. Mobile. Devices. Auslieferung.
Gestern.Die digitale Welt gestern & heute.03.03.2011Content. Mobile. Devices. Auslieferung.5NotebookWebbrowserTastatur
Heute.Die digitale Welt gestern & heute.03.03.2011Content. Mobile. Devices. Auslieferung.6Large ScreenSpielkonsoleNotebookTablet ScreenChatMobile  ScreenTelefon
Fazit.Das Internet ist “nur” das Medium und überall verfügbarVerschiedenste Endgeräte konsumieren Inhalte und Informationen über dieses MediumDesktop ComputerNotebooksMobile DevicesTabletsTVObjekte (Internet ofthings)Heute: Fokus auf Mobile Devices & TabletsDie digitale Welt gestern & heute.03.03.2011Content. Mobile. Devices. Auslieferung.7
Gartner – Web Zugriffe 2013. Die digitale Welt gestern & heute.03.03.2011Content. Mobile. Devices. Auslieferung.8Web ZugriffeBy2013, mobile phones willovertake PCs as the most commonon Web access device worldwide.Quelle: http://www.gartner.com/it/page.jsp?id=1278413 (Januar 2010)Mobile WebDesktop WebZeit2013
“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?Bild: http://www.flickr.com/photos/snapeverything/4941793006/
Multiple Ausgabekanäle.03.03.201110Content. Mobile. Devices. Auslieferung.
Ausgabevarianten – Anwendersicht.Multiple Ausgabekanäle.03.03.2011Content. Mobile. Devices. Auslieferung.11DesktopMobileWebbrowserSmartphonesTablets Zuhause / Business (B2B)
Beratung
Repräsentierung / Präsentation
Medien Konsum
Zugriffsdauer: variabel
Überall (always on, alwayscarried)
Dringende Aufgaben
Wiederholte Aufgaben
Realtime Kommunikation
Zugriffsdauer: kurz
Im Büro / Zuhause
Komplexe Aufgaben
Research Aufgaben
Zugriffsdauer: langAusgabevarianten - Technische Sicht.Multiple Ausgabekanäle.03.03.2011Content. Mobile. Devices. Auslieferung.12DesktopMobileWebbrowserIE, FF, Chrome,...„Eigene“ Mobile Website(s)(Browser)Applikationen(Nativ)Responsive Layout(Browser)Content Management System
Beispiele für Implementierungsvarianten.03.03.201113Content. Mobile. Devices. Auslieferung.
Responsive Layout (Liquid Layout).Umsetzungsvarianten im Mobile Web.03.03.2011Content. Mobile. Devices. Auslieferung.14http://2010.dconstruct.org/
Responsive Layout (Liquid Layout).Umsetzungsvarianten im Mobile Web.03.03.2011Content. Mobile. Devices. Auslieferung.15http://2010.dconstruct.org/
Responsive Layout - Key Facts.Es gibt nur 1 Website für alle Devicetypen & Gruppen(OneWeb)Es gibt keine eigene mobile URL„Responsive“ Content bedeutetUmordnungvon ModulenReduktion von ContentDynamische Berechnung von Grössenverhältnissen„Responsive“ Content wird gesteuert überScreengrössePrimär clientseitig mit Frontendtechnik (CSS, Java Script)Meist nur Online Nutzung, inkl. HTML503.03.2011Content. Mobile. Devices. Auslieferung.16Umsetzungsvarianten im Mobile Web.
„Eigene“ mobile Website(s).03.03.201117Content. Mobile. Devices. Auslieferung.
Raiffeisen Mobile Website.
„Eigene“ Mobile Website(s) - Key Facts.Eigene Mobile Website(s) zusätzlich zur Corporate WebsiteMobile URL (m.company.com)Kombination mit User Agent ErkennungAnpassung Content und Applikationslogik erfolgt primär serverseitigMeist nur Online Nutzung, inkl. HTML5Umsetzungsvarianten im Mobile Web.03.03.2011Content. Mobile. Devices. Auslieferung.19
Native Applikationen.03.03.201120Content. Mobile. Devices. Auslieferung.
Raiffeisen Hypothekenrechner.
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
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 nativBezug und Vertrieb erfolgt über Applicationstores (Ökosystem)Die Entwicklung erfolgt pro Plattform (iOS, Android,...) mit geringen SynergienEinbezug von Hardware Features (Kamera, GPS, Dokumente,..) möglichFlexible Kombination aus Offline & OnlineUmsetzungsvarianten im Mobile Web.03.03.2011Content. Mobile. Devices. Auslieferung.24

Weitere ähnliche Inhalte

Andere mochten auch

Brandschutz beim Bauen im Bestand
Brandschutz beim Bauen im BestandBrandschutz beim Bauen im Bestand
Brandschutz beim Bauen im Bestand
hhpberlin
 
Obsessão e desobsessão
Obsessão e desobsessãoObsessão e desobsessão
Obsessão e desobsessão
KATIA MARIA FARAH V DA SILVA
 
Das Büro als Denkraum - Orte, Umgebungen und Schnittstellen zukünftiger Wisse...
Das Büro als Denkraum - Orte, Umgebungen und Schnittstellen zukünftiger Wisse...Das Büro als Denkraum - Orte, Umgebungen und Schnittstellen zukünftiger Wisse...
Das Büro als Denkraum - Orte, Umgebungen und Schnittstellen zukünftiger Wisse...
FutureManagementGroup AG
 
CLOUDPILOTS Präsentation vom 14.07.2011 bei der Hamburger IBM Notes-User Grou...
CLOUDPILOTS Präsentation vom 14.07.2011 bei der Hamburger IBM Notes-User Grou...CLOUDPILOTS Präsentation vom 14.07.2011 bei der Hamburger IBM Notes-User Grou...
CLOUDPILOTS Präsentation vom 14.07.2011 bei der Hamburger IBM Notes-User Grou...
CLOUDPILOTS Software & Consulting GmbH
 
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
Namics – A Merkle Company
 
Warum spielt die Friedensbewegung keine Rolle in den Leitmedien?
Warum spielt die Friedensbewegung keine Rolle in den Leitmedien?Warum spielt die Friedensbewegung keine Rolle in den Leitmedien?
Warum spielt die Friedensbewegung keine Rolle in den Leitmedien?
Uwe Krüger
 
Propiedades de-la-materia-masa-volumen-y-densidad1
Propiedades de-la-materia-masa-volumen-y-densidad1Propiedades de-la-materia-masa-volumen-y-densidad1
Propiedades de-la-materia-masa-volumen-y-densidad1
danielozano
 
Visual thinking usability coffee st gallen 19 03 2015
Visual thinking usability coffee st gallen 19 03 2015Visual thinking usability coffee st gallen 19 03 2015
Visual thinking usability coffee st gallen 19 03 2015
soultank AG
 
Cadera
Cadera Cadera
Markenpositionierung - Bedeutung für den Erfolg einer Marke in dynamischen Mä...
Markenpositionierung - Bedeutung für den Erfolg einer Marke in dynamischen Mä...Markenpositionierung - Bedeutung für den Erfolg einer Marke in dynamischen Mä...
Markenpositionierung - Bedeutung für den Erfolg einer Marke in dynamischen Mä...
Creative Advantage GmbH
 
Motores
MotoresMotores
Motores
brenohsouza
 
LES ARTS PLÀSTIQUES: ARQUITECTURA
LES ARTS PLÀSTIQUES: ARQUITECTURALES ARTS PLÀSTIQUES: ARQUITECTURA
LES ARTS PLÀSTIQUES: ARQUITECTURA
Antonio Núñez
 
E-commerce et propriété intellectuelle
E-commerce et propriété intellectuelleE-commerce et propriété intellectuelle
E-commerce et propriété intellectuelle
Prof. Jacques Folon (Ph.D)
 
Dematerialisation et offre en bibliotheque
Dematerialisation et offre en bibliothequeDematerialisation et offre en bibliotheque
Dematerialisation et offre en bibliotheque
Xavier Galaup
 
Grand diaporama la mission de Saint Paul
Grand diaporama la mission de Saint PaulGrand diaporama la mission de Saint Paul
Grand diaporama la mission de Saint Paul
kt42 catechisme
 
Equipement techonologique en france - ARCEP - Décembre 2011
Equipement techonologique en france - ARCEP - Décembre 2011Equipement techonologique en france - ARCEP - Décembre 2011
Equipement techonologique en france - ARCEP - Décembre 2011
Romain Fonnier
 
Rss lunch-8_sqli agency_avril2010
Rss lunch-8_sqli agency_avril2010Rss lunch-8_sqli agency_avril2010
Rss lunch-8_sqli agency_avril2010
Wax Interactive
 
Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...
Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...
Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...
PYR
 

Andere mochten auch (18)

Brandschutz beim Bauen im Bestand
Brandschutz beim Bauen im BestandBrandschutz beim Bauen im Bestand
Brandschutz beim Bauen im Bestand
 
Obsessão e desobsessão
Obsessão e desobsessãoObsessão e desobsessão
Obsessão e desobsessão
 
Das Büro als Denkraum - Orte, Umgebungen und Schnittstellen zukünftiger Wisse...
Das Büro als Denkraum - Orte, Umgebungen und Schnittstellen zukünftiger Wisse...Das Büro als Denkraum - Orte, Umgebungen und Schnittstellen zukünftiger Wisse...
Das Büro als Denkraum - Orte, Umgebungen und Schnittstellen zukünftiger Wisse...
 
CLOUDPILOTS Präsentation vom 14.07.2011 bei der Hamburger IBM Notes-User Grou...
CLOUDPILOTS Präsentation vom 14.07.2011 bei der Hamburger IBM Notes-User Grou...CLOUDPILOTS Präsentation vom 14.07.2011 bei der Hamburger IBM Notes-User Grou...
CLOUDPILOTS Präsentation vom 14.07.2011 bei der Hamburger IBM Notes-User Grou...
 
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
 
Warum spielt die Friedensbewegung keine Rolle in den Leitmedien?
Warum spielt die Friedensbewegung keine Rolle in den Leitmedien?Warum spielt die Friedensbewegung keine Rolle in den Leitmedien?
Warum spielt die Friedensbewegung keine Rolle in den Leitmedien?
 
Propiedades de-la-materia-masa-volumen-y-densidad1
Propiedades de-la-materia-masa-volumen-y-densidad1Propiedades de-la-materia-masa-volumen-y-densidad1
Propiedades de-la-materia-masa-volumen-y-densidad1
 
Visual thinking usability coffee st gallen 19 03 2015
Visual thinking usability coffee st gallen 19 03 2015Visual thinking usability coffee st gallen 19 03 2015
Visual thinking usability coffee st gallen 19 03 2015
 
Cadera
Cadera Cadera
Cadera
 
Markenpositionierung - Bedeutung für den Erfolg einer Marke in dynamischen Mä...
Markenpositionierung - Bedeutung für den Erfolg einer Marke in dynamischen Mä...Markenpositionierung - Bedeutung für den Erfolg einer Marke in dynamischen Mä...
Markenpositionierung - Bedeutung für den Erfolg einer Marke in dynamischen Mä...
 
Motores
MotoresMotores
Motores
 
LES ARTS PLÀSTIQUES: ARQUITECTURA
LES ARTS PLÀSTIQUES: ARQUITECTURALES ARTS PLÀSTIQUES: ARQUITECTURA
LES ARTS PLÀSTIQUES: ARQUITECTURA
 
E-commerce et propriété intellectuelle
E-commerce et propriété intellectuelleE-commerce et propriété intellectuelle
E-commerce et propriété intellectuelle
 
Dematerialisation et offre en bibliotheque
Dematerialisation et offre en bibliothequeDematerialisation et offre en bibliotheque
Dematerialisation et offre en bibliotheque
 
Grand diaporama la mission de Saint Paul
Grand diaporama la mission de Saint PaulGrand diaporama la mission de Saint Paul
Grand diaporama la mission de Saint Paul
 
Equipement techonologique en france - ARCEP - Décembre 2011
Equipement techonologique en france - ARCEP - Décembre 2011Equipement techonologique en france - ARCEP - Décembre 2011
Equipement techonologique en france - ARCEP - Décembre 2011
 
Rss lunch-8_sqli agency_avril2010
Rss lunch-8_sqli agency_avril2010Rss lunch-8_sqli agency_avril2010
Rss lunch-8_sqli agency_avril2010
 
Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...
Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...
Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...
 

Ähnlich wie 2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design

design
designdesign
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
 
Entstehung einer mobilen App für mittelständische Unternehmen
Entstehung einer mobilen App für mittelständische UnternehmenEntstehung einer mobilen App für mittelständische Unternehmen
Entstehung einer mobilen App für mittelständische Unternehmen
Björn Rohles
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)
Wolfram Nagel
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Peter Rozek
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Wolfram Nagel
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
fabianmoritz
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
Jürg Stuker
 
Trendreport: Die Zukunft des Semantic Web
Trendreport: Die Zukunft des Semantic WebTrendreport: Die Zukunft des Semantic Web
Trendreport: Die Zukunft des Semantic Web
innowise research & consulting GmbH
 
Die Zukunft des Semantic Web
Die Zukunft des Semantic WebDie Zukunft des Semantic Web
Die Zukunft des Semantic Web
Gábor Molnár
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
Christoph Zeller
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
denkwerk GmbH
 
Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015
ETH-Bibliothek
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
Ralf Lütke
 
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11
Leif Janzik
 
Mobile Apps mit Mehrwert
Mobile Apps mit MehrwertMobile Apps mit Mehrwert
Mobile Apps mit Mehrwert
cssgmbh
 
Bayerische Staatsbibliothek: mobiler OPACplus
Bayerische Staatsbibliothek: mobiler OPACplusBayerische Staatsbibliothek: mobiler OPACplus
Bayerische Staatsbibliothek: mobiler OPACplus
Andreas Neumann
 

Ähnlich wie 2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design (20)

design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Entstehung einer mobilen App für mittelständische Unternehmen
Entstehung einer mobilen App für mittelständische UnternehmenEntstehung einer mobilen App für mittelständische Unternehmen
Entstehung einer mobilen App für mittelständische Unternehmen
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
 
Trendreport: Die Zukunft des Semantic Web
Trendreport: Die Zukunft des Semantic WebTrendreport: Die Zukunft des Semantic Web
Trendreport: Die Zukunft des Semantic Web
 
Die Zukunft des Semantic Web
Die Zukunft des Semantic WebDie Zukunft des Semantic Web
Die Zukunft des Semantic Web
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015
 
SoSem 2014 | IT-Zertifikat: Tools & Methods in Digital Humanities - 01_Zwisch...
SoSem 2014 | IT-Zertifikat: Tools & Methods in Digital Humanities - 01_Zwisch...SoSem 2014 | IT-Zertifikat: Tools & Methods in Digital Humanities - 01_Zwisch...
SoSem 2014 | IT-Zertifikat: Tools & Methods in Digital Humanities - 01_Zwisch...
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11
 
Mobile Apps mit Mehrwert
Mobile Apps mit MehrwertMobile Apps mit Mehrwert
Mobile Apps mit Mehrwert
 
Bayerische Staatsbibliothek: mobiler OPACplus
Bayerische Staatsbibliothek: mobiler OPACplusBayerische Staatsbibliothek: mobiler OPACplus
Bayerische Staatsbibliothek: mobiler OPACplus
 
Html5 - Traum oder Wirklichkeit
Html5 - Traum oder WirklichkeitHtml5 - Traum oder Wirklichkeit
Html5 - Traum oder Wirklichkeit
 

Mehr von Johannes Waibel

2016 - Mobile als zentraler Treiber der «Digitalen Transformation»
2016 - Mobile als zentraler Treiber der «Digitalen Transformation»2016 - Mobile als zentraler Treiber der «Digitalen Transformation»
2016 - Mobile als zentraler Treiber der «Digitalen Transformation»
Johannes Waibel
 
2011 - Mobile Strategie / Fachartikel Netzwoche
2011 - Mobile Strategie / Fachartikel Netzwoche2011 - Mobile Strategie / Fachartikel Netzwoche
2011 - Mobile Strategie / Fachartikel Netzwoche
Johannes Waibel
 
2016 - Mobile Connectivity: What is your connection?
2016 - Mobile Connectivity: What is your connection?2016 - Mobile Connectivity: What is your connection?
2016 - Mobile Connectivity: What is your connection?
Johannes Waibel
 
2012 - Agile Commerce: Fachartikel in Marketing & Kommunikation
2012 - Agile Commerce: Fachartikel in Marketing & Kommunikation2012 - Agile Commerce: Fachartikel in Marketing & Kommunikation
2012 - Agile Commerce: Fachartikel in Marketing & Kommunikation
Johannes Waibel
 
2012 - Mobile Commerce: Fachartikel in Marketing & Kommunikation
2012 - Mobile Commerce: Fachartikel in Marketing & Kommunikation2012 - Mobile Commerce: Fachartikel in Marketing & Kommunikation
2012 - Mobile Commerce: Fachartikel in Marketing & Kommunikation
Johannes Waibel
 
2011 - Mobile Strategie - Kantonalbanken Schweiz
2011 - Mobile Strategie - Kantonalbanken Schweiz2011 - Mobile Strategie - Kantonalbanken Schweiz
2011 - Mobile Strategie - Kantonalbanken Schweiz
Johannes Waibel
 
2010 - Mobile Trends / Referat Microsoft Schweiz
2010 - Mobile Trends / Referat Microsoft Schweiz2010 - Mobile Trends / Referat Microsoft Schweiz
2010 - Mobile Trends / Referat Microsoft Schweiz
Johannes Waibel
 
2016 - IoT - Service Design development
2016 - IoT - Service Design development2016 - IoT - Service Design development
2016 - IoT - Service Design development
Johannes Waibel
 
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen. 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
Johannes Waibel
 
2016 - M-Commerce is dead - long live M-Commerce!
2016 - M-Commerce is dead - long live M-Commerce!2016 - M-Commerce is dead - long live M-Commerce!
2016 - M-Commerce is dead - long live M-Commerce!
Johannes Waibel
 
2016 - Datenbrillen im digitalen Ökosystem / WalkIn-Lab.
2016 - Datenbrillen im digitalen Ökosystem / WalkIn-Lab.2016 - Datenbrillen im digitalen Ökosystem / WalkIn-Lab.
2016 - Datenbrillen im digitalen Ökosystem / WalkIn-Lab.
Johannes Waibel
 
2016 - Mobile Business Apps - Vorgehensmodell.
2016 - Mobile Business Apps - Vorgehensmodell.2016 - Mobile Business Apps - Vorgehensmodell.
2016 - Mobile Business Apps - Vorgehensmodell.
Johannes Waibel
 
2015 - Namics - Walk-in Lab / Wearables & Mobile Connectivity / 18 Tage mit d...
2015 - Namics - Walk-in Lab / Wearables & Mobile Connectivity / 18 Tage mit d...2015 - Namics - Walk-in Lab / Wearables & Mobile Connectivity / 18 Tage mit d...
2015 - Namics - Walk-in Lab / Wearables & Mobile Connectivity / 18 Tage mit d...
Johannes Waibel
 
2013 - M-Commerce - in der Schweiz - Jetzt oder nie!
2013 - M-Commerce - in der Schweiz - Jetzt oder nie!2013 - M-Commerce - in der Schweiz - Jetzt oder nie!
2013 - M-Commerce - in der Schweiz - Jetzt oder nie!
Johannes Waibel
 
2013 - (All) about Mobile - Status Quo & Best Practices
2013 - (All) about Mobile - Status Quo & Best Practices2013 - (All) about Mobile - Status Quo & Best Practices
2013 - (All) about Mobile - Status Quo & Best Practices
Johannes Waibel
 
2011 - E-Commerce Shopsysteme im Vergleich - Magento, hybris und Sitecore
2011 - E-Commerce Shopsysteme im Vergleich - Magento, hybris und Sitecore2011 - E-Commerce Shopsysteme im Vergleich - Magento, hybris und Sitecore
2011 - E-Commerce Shopsysteme im Vergleich - Magento, hybris und Sitecore
Johannes Waibel
 
2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"
Johannes Waibel
 
2012 - Mobile Strategie
2012 - Mobile Strategie2012 - Mobile Strategie
2012 - Mobile Strategie
Johannes Waibel
 

Mehr von Johannes Waibel (18)

2016 - Mobile als zentraler Treiber der «Digitalen Transformation»
2016 - Mobile als zentraler Treiber der «Digitalen Transformation»2016 - Mobile als zentraler Treiber der «Digitalen Transformation»
2016 - Mobile als zentraler Treiber der «Digitalen Transformation»
 
2011 - Mobile Strategie / Fachartikel Netzwoche
2011 - Mobile Strategie / Fachartikel Netzwoche2011 - Mobile Strategie / Fachartikel Netzwoche
2011 - Mobile Strategie / Fachartikel Netzwoche
 
2016 - Mobile Connectivity: What is your connection?
2016 - Mobile Connectivity: What is your connection?2016 - Mobile Connectivity: What is your connection?
2016 - Mobile Connectivity: What is your connection?
 
2012 - Agile Commerce: Fachartikel in Marketing & Kommunikation
2012 - Agile Commerce: Fachartikel in Marketing & Kommunikation2012 - Agile Commerce: Fachartikel in Marketing & Kommunikation
2012 - Agile Commerce: Fachartikel in Marketing & Kommunikation
 
2012 - Mobile Commerce: Fachartikel in Marketing & Kommunikation
2012 - Mobile Commerce: Fachartikel in Marketing & Kommunikation2012 - Mobile Commerce: Fachartikel in Marketing & Kommunikation
2012 - Mobile Commerce: Fachartikel in Marketing & Kommunikation
 
2011 - Mobile Strategie - Kantonalbanken Schweiz
2011 - Mobile Strategie - Kantonalbanken Schweiz2011 - Mobile Strategie - Kantonalbanken Schweiz
2011 - Mobile Strategie - Kantonalbanken Schweiz
 
2010 - Mobile Trends / Referat Microsoft Schweiz
2010 - Mobile Trends / Referat Microsoft Schweiz2010 - Mobile Trends / Referat Microsoft Schweiz
2010 - Mobile Trends / Referat Microsoft Schweiz
 
2016 - IoT - Service Design development
2016 - IoT - Service Design development2016 - IoT - Service Design development
2016 - IoT - Service Design development
 
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen. 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
 
2016 - M-Commerce is dead - long live M-Commerce!
2016 - M-Commerce is dead - long live M-Commerce!2016 - M-Commerce is dead - long live M-Commerce!
2016 - M-Commerce is dead - long live M-Commerce!
 
2016 - Datenbrillen im digitalen Ökosystem / WalkIn-Lab.
2016 - Datenbrillen im digitalen Ökosystem / WalkIn-Lab.2016 - Datenbrillen im digitalen Ökosystem / WalkIn-Lab.
2016 - Datenbrillen im digitalen Ökosystem / WalkIn-Lab.
 
2016 - Mobile Business Apps - Vorgehensmodell.
2016 - Mobile Business Apps - Vorgehensmodell.2016 - Mobile Business Apps - Vorgehensmodell.
2016 - Mobile Business Apps - Vorgehensmodell.
 
2015 - Namics - Walk-in Lab / Wearables & Mobile Connectivity / 18 Tage mit d...
2015 - Namics - Walk-in Lab / Wearables & Mobile Connectivity / 18 Tage mit d...2015 - Namics - Walk-in Lab / Wearables & Mobile Connectivity / 18 Tage mit d...
2015 - Namics - Walk-in Lab / Wearables & Mobile Connectivity / 18 Tage mit d...
 
2013 - M-Commerce - in der Schweiz - Jetzt oder nie!
2013 - M-Commerce - in der Schweiz - Jetzt oder nie!2013 - M-Commerce - in der Schweiz - Jetzt oder nie!
2013 - M-Commerce - in der Schweiz - Jetzt oder nie!
 
2013 - (All) about Mobile - Status Quo & Best Practices
2013 - (All) about Mobile - Status Quo & Best Practices2013 - (All) about Mobile - Status Quo & Best Practices
2013 - (All) about Mobile - Status Quo & Best Practices
 
2011 - E-Commerce Shopsysteme im Vergleich - Magento, hybris und Sitecore
2011 - E-Commerce Shopsysteme im Vergleich - Magento, hybris und Sitecore2011 - E-Commerce Shopsysteme im Vergleich - Magento, hybris und Sitecore
2011 - E-Commerce Shopsysteme im Vergleich - Magento, hybris und Sitecore
 
2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"
 
2012 - Mobile Strategie
2012 - Mobile Strategie2012 - Mobile Strategie
2012 - Mobile Strategie
 

2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design

  • 1. 1Fachtagung. Mobile. CMS. Ausgabekanäle.Trends. Responsive Design. Namics.Johannes Waibel. Senior Consultant.
  • 2. Optimale Auslieferung der CMS-Inhalte für mobile Endgeräte.http://www.flickr.com/photos/rkottonau/571288490/
  • 3. Agenda.Digitale Welt gestern & heuteMultiple AusgabekanäleImplementierungsvariantenResponsive Layout„Eigene“ mobile Website(s)Mobile Applikation(en)Content Erfassung & Darstellung
  • 6. Die digitale Welt gestern & heute.03.03.20114Content. Mobile. Devices. Auslieferung.
  • 7. Gestern.Die digitale Welt gestern & heute.03.03.2011Content. Mobile. Devices. Auslieferung.5NotebookWebbrowserTastatur
  • 8. Heute.Die digitale Welt gestern & heute.03.03.2011Content. Mobile. Devices. Auslieferung.6Large ScreenSpielkonsoleNotebookTablet ScreenChatMobile ScreenTelefon
  • 9. Fazit.Das Internet ist “nur” das Medium und überall verfügbarVerschiedenste Endgeräte konsumieren Inhalte und Informationen über dieses MediumDesktop ComputerNotebooksMobile DevicesTabletsTVObjekte (Internet ofthings)Heute: Fokus auf Mobile Devices & TabletsDie digitale Welt gestern & heute.03.03.2011Content. Mobile. Devices. Auslieferung.7
  • 10. Gartner – Web Zugriffe 2013. Die digitale Welt gestern & heute.03.03.2011Content. Mobile. Devices. Auslieferung.8Web ZugriffeBy2013, mobile phones willovertake PCs as the most commonon Web access device worldwide.Quelle: http://www.gartner.com/it/page.jsp?id=1278413 (Januar 2010)Mobile WebDesktop WebZeit2013
  • 11. “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?Bild: http://www.flickr.com/photos/snapeverything/4941793006/
  • 13. Ausgabevarianten – Anwendersicht.Multiple Ausgabekanäle.03.03.2011Content. Mobile. Devices. Auslieferung.11DesktopMobileWebbrowserSmartphonesTablets Zuhause / Business (B2B)
  • 18. Überall (always on, alwayscarried)
  • 23. Im Büro / Zuhause
  • 26. Zugriffsdauer: langAusgabevarianten - Technische Sicht.Multiple Ausgabekanäle.03.03.2011Content. Mobile. Devices. Auslieferung.12DesktopMobileWebbrowserIE, FF, Chrome,...„Eigene“ Mobile Website(s)(Browser)Applikationen(Nativ)Responsive Layout(Browser)Content Management System
  • 28. Responsive Layout (Liquid Layout).Umsetzungsvarianten im Mobile Web.03.03.2011Content. Mobile. Devices. Auslieferung.14http://2010.dconstruct.org/
  • 29. Responsive Layout (Liquid Layout).Umsetzungsvarianten im Mobile Web.03.03.2011Content. Mobile. Devices. Auslieferung.15http://2010.dconstruct.org/
  • 30. Responsive Layout - Key Facts.Es gibt nur 1 Website für alle Devicetypen & Gruppen(OneWeb)Es gibt keine eigene mobile URL„Responsive“ Content bedeutetUmordnungvon ModulenReduktion von ContentDynamische Berechnung von Grössenverhältnissen„Responsive“ Content wird gesteuert überScreengrössePrimär clientseitig mit Frontendtechnik (CSS, Java Script)Meist nur Online Nutzung, inkl. HTML503.03.2011Content. Mobile. Devices. Auslieferung.16Umsetzungsvarianten im Mobile Web.
  • 33. „Eigene“ Mobile Website(s) - Key Facts.Eigene Mobile Website(s) zusätzlich zur Corporate WebsiteMobile URL (m.company.com)Kombination mit User Agent ErkennungAnpassung Content und Applikationslogik erfolgt primär serverseitigMeist nur Online Nutzung, inkl. HTML5Umsetzungsvarianten im Mobile Web.03.03.2011Content. Mobile. Devices. Auslieferung.19
  • 38. 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 nativBezug und Vertrieb erfolgt über Applicationstores (Ökosystem)Die Entwicklung erfolgt pro Plattform (iOS, Android,...) mit geringen SynergienEinbezug von Hardware Features (Kamera, GPS, Dokumente,..) möglichFlexible Kombination aus Offline & OnlineUmsetzungsvarianten im Mobile Web.03.03.2011Content. Mobile. Devices. Auslieferung.24
  • 39. Wann welche “Mobile” Variante wählen?03.03.201125Content. Mobile. Devices. Auslieferung.
  • 40. Wann welche “Mobile” Variante wählen?Umsetzungsvarianten im Mobile Web.03.03.2011Content. Mobile. Devices. Auslieferung.26Responsive LayoutEigene Mobile Website(s)Applikationen1 WebsiteAusreizen von plattformspezifischen FunktionenAnsatzEigene Website(s) für definierte DevicegruppenGleicher Content bei unterschiedlicher DarstellungContent und Interaktion„Mobiler“ Content mit eigener Darstellung„Mobiler“ Content mit hoher Interaktivität„Normale Website“Ökosystem„Normale Website“, reduzierter UmfangEigenes Ökosystem: Sichtbarkeit, Ratings, BezahlsystemgeringKostenfürEntwicklunggering + geringhoch
  • 41. Content Erfassung & Darstellung.03.03.201127Content. Mobile. Devices. Auslieferung.
  • 42. Wie sieht der „Mobile“ Content auf den verschiedenen Mobile Devices aus?
  • 43. Heute.03.03.2011Content. Mobile. Devices. Auslieferung.29Content Erfassung & Darstellung.
  • 44. Zukunft.CMS mit integrierten Mobile EmulatorenWie geht das?Content Erfassung & Darstellung.03.03.2011Content. Mobile. Devices. Auslieferung.30
  • 45. Demo.Content Erfassung & Darstellung.03.03.2011Content. Mobile. Devices. Auslieferung.31Demo
  • 47. 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 RedakteurenEntscheidung welche „Mobile“ Variante gewählt wirdZusammenfassung – Umsetzungsvarianten.Content. Mobile. Devices. Auslieferung.03.03.201133Responsive Design1Eigene Mobile Website(s)23Native Applikation(en)
  • 48. Vielen Dank für Ihre Aufmerksamkeit.johannes.waibel@namics.com@joewaibel03.03.201134Content. Mobile. Devices. Auslieferung.
  • 49. Trend – „Mobile First“.03.03.2011Content. Mobile. Devices. Auslieferung.35Traditioneller AnsatzNeuer AnsatzGesamte Corporate Website = Gesamte Corporate Website- Reduktion Anwendungsfälle / Inhalte+ weitere Anwendungsfälle / Inhalte= Mobile SiteMobile SiteUmsetzungsvarianten im Mobile Web.
  • 50. Responsive Layout (Liquid Layout).03.03.2011Content. Mobile. Devices. Auslieferung.36
  • 51. In Zukunft könnten CMS-Offerten so aussehen:Zusammenfassung – Umsetzungsvarianten.03.03.2011Content. Mobile. Devices. Auslieferung.37Desktopwebsite(s): 2 meistverwendete DesktopbrowserInternet Explorer 7 + CHF 10‘000.-Internet Explorer 6 + CHF 15‘000.-...MobileResponsive Design (Tablet & Smartphones) + CHF 10‘000.-Eigene“ Mobile Website (Tablet & Smartphones) + CHF 40‘000.-Mobile Applikationen (Tablet & Smartphones) + CHF x.-
  • 52. Mobile Strategie – Arbeitsschritte.Mobile Strategie02.03.11Mobile. Context is King. ZRH.Mobile.Namics1. Analyse2. Vision und Ziele= Mobile Strategie3. Zielgruppen & Bedürfnisse4. Ableitung Mobile Services5. Planung

Hinweis der Redaktion

  1. > Sie haben bei sich im Unternehmen ein Corporate CMS im Einsatz. > Die Frage die sich nun stell: Wie gehen sie mit mobile Endgeräten um?> „Mobile“ ist sehr vereinfacht gesagt “Tablets” & “Smartphones”.
  2. Damit Sie am Schluss wissen Weg Sie gehen sollten,habe ich folgende Agenda zusammengestellt.
  3. Ichstartemit der digitalen Welt von gestern. Dies so inetwa so aus:
  4. > Die Welt von gestern sah in etwa so aus: D.h.> 1 Dimensional – 1 Computer oder Notebook mit Webbroser; Eingabe über Tastatur & Maus> Internet = Webbrowser
  5. Die Welt vonHeuteistumfassendergeworden:Einen PC gibtesimmernoch, aber die Umwelt hat sich stark verändert!
  6. > Wenn wir uns auf den Teil „Mobile Endgeräte“ mit Internet Connection fokussioren schafft die Studie von Gartner eine Interessante Aussage:> Immer mehr Zugriffe erfolgen global über das “mobile Web” / Im Gegensatz zu Desktop Zugirff> Im Jahre 2014 werden die Mobilen Zugriffe die normalen Zugriffe übersteigen. > In gewissen „Populationen“ oder Anwendungen ist die Schnittpunkt heute schon erreicht/überschritten.
  7. > Key Fazit: Websites die nicht auf die Eigenschaften des mobile Kanals eingehen stellen einen Hürde dar.> Damit sie entscheiden können welchen Weg sie bzgl. Mobile gehen können, stelle ich im folgenden 3 Varienten vor, wie sie dem Kanal “mobile”entgegnen können. > Ich starte mit einer Sicht auf die Benutzer und gehe dann auf die 3 Lösungsvarianten ein.
  8. Der Weg in die Konzeption der Lösung startet mit der Anwendersicht.Je nach Ausgabekanal gibt es einen ganz eigenen Kontext. Die Maxime “Kontext ist King” gilt insbesonerds in den mobilen Ausgabekanälen.
  9. Der Weg in die Konzeption der Lösung startet mit der Anwendersicht.Je nach Ausgabekanal gibt es einen ganz eigenen Kontext. Die Maxime “Kontext ist King” gilt insbesonerds in den mobilen Ausgabekanälen.
  10. > Sie alle haben ein Corporate CMS im Einsatz. > Wie gehen sie mit der Mobile Thematik um? > Das CMS bildet die Datenquelle für ihre Mobilen Ausgabekanäle.
  11. HTML:schafttneueMöglichkeiten. Voraussetzungsindmorderne Browser auf Mobiletelefonen> Offline Cache für static content> Offline Storage> Geo Location API> Touch API
  12. Im Kern 1spezischer Use Case mithoherInteraktivät
  13. > SpielerischerAnsatzmitSchiebreglern> Einfacheserkennen der Zusammenhängenfür die Hypothekarberechnung (Eigenkapital, Einkommen und Kaufpreis). Was istmeineTragbarkeit?
  14. > Auswertung Berechnungsergebnisse (1te und 2te Hypothek)> Vorschlag möglicher Immobliien> Conversion
  15. - Apps auf Basis von Website-Technologien: z.B. PhoneGap, Titanium resp. NIWEA-Idee
  16. Herausforderung!
  17. > Externe Mobile EmulatorengebeneinenerstenEindruckwieeineWebseite auf den Mobile Devices aussieht.>
  18. Aus
  19. Zielgruppen & BedürfnisseWas sind die Nutzergruppen / Zielgruppen? Welche Bedürfnisse hat welche Zielgruppe?Wie holden wir dies Zielgruppen ab? Service nach Zeit?PlanungWelche Porjekt braucht es?Welche Mobile Services werden Implementiert (Zusammenfassen)Welche beobachten wir weiter? Welche geht man zuerst an?