SlideShare ist ein Scribd-Unternehmen logo

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

•
•
Johannes Waibel
Johannes Waibel

Optimale Auslieferung der CMS-Inhalte für mobile Endgeräte: 3 Implementierungsvarianten werden aufgezeigt & beurteilt: a) Responsive Design b) „Eigene“ mobile Website(s) und c) Mobile Applikation(en)

1 von 38
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

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?