Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,991 views

Published on

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)

Published in: Technology
  • Be the first to comment

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

  1. 1. 1<br />Fachtagung. Mobile. CMS. Ausgabekanäle.Trends. Responsive Design. Namics.<br />Johannes Waibel. Senior Consultant.<br />
  2. 2. Optimale Auslieferung der CMS-Inhalte für mobile Endgeräte.<br />http://www.flickr.com/photos/rkottonau/571288490/<br />
  3. 3. Agenda.<br />Digitale Welt gestern & heute<br />Multiple Ausgabekanäle<br />Implementierungsvarianten<br />Responsive Layout<br />„Eigene“ mobile Website(s)<br />Mobile Applikation(en)<br /><ul><li>Content Erfassung & Darstellung
  4. 4. Zusammenfassung
  5. 5. Fragen</li></ul>03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />3<br />
  6. 6. Die digitale Welt gestern & heute.<br />03.03.2011<br />4<br />Content. Mobile. Devices. Auslieferung.<br />
  7. 7. Gestern.<br />Die digitale Welt gestern & heute.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />5<br />Notebook<br />Webbrowser<br />Tastatur<br />
  8. 8. Heute.<br />Die digitale Welt gestern & heute.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />6<br />Large Screen<br />Spielkonsole<br />Notebook<br />Tablet Screen<br />Chat<br />Mobile Screen<br />Telefon<br />
  9. 9. Fazit.<br />Das Internet ist “nur” das Medium und überall verfügbar<br />Verschiedenste Endgeräte konsumieren Inhalte und Informationen über dieses Medium<br />Desktop Computer<br />Notebooks<br />Mobile Devices<br />Tablets<br />TV<br />Objekte (Internet ofthings)<br />Heute: Fokus auf Mobile Devices & Tablets<br />Die digitale Welt gestern & heute.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />7<br />
  10. 10. Gartner – Web Zugriffe 2013. <br />Die digitale Welt gestern & heute.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />8<br />Web Zugriffe<br />By2013, mobile phones willovertake PCs as the most commonon Web access device worldwide.<br />Quelle: http://www.gartner.com/it/page.jsp?id=1278413 (Januar 2010)<br />Mobile Web<br />Desktop Web<br />Zeit<br />2013<br />
  11. 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.”<br />Quelle: http://www.gartner.com/it/page.jsp?id=1278413<br />…und wie sieht es mit Ihrer Corporate Website aus?<br />Corporate Website = Mobile Site?<br />Bild: http://www.flickr.com/photos/snapeverything/4941793006/<br />
  12. 12. Multiple Ausgabekanäle.<br />03.03.2011<br />10<br />Content. Mobile. Devices. Auslieferung.<br />
  13. 13. Ausgabevarianten – Anwendersicht.<br />Multiple Ausgabekanäle.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />11<br />Desktop<br />Mobile<br />Webbrowser<br />Smartphones<br />Tablets <br /><ul><li>Zuhause / Business (B2B)
  14. 14. Beratung
  15. 15. Repräsentierung / Präsentation
  16. 16. Medien Konsum
  17. 17. Zugriffsdauer: variabel
  18. 18. Überall (always on, alwayscarried)
  19. 19. Dringende Aufgaben
  20. 20. Wiederholte Aufgaben
  21. 21. Realtime Kommunikation
  22. 22. Zugriffsdauer: kurz
  23. 23. Im Büro / Zuhause
  24. 24. Komplexe Aufgaben
  25. 25. Research Aufgaben
  26. 26. Zugriffsdauer: lang</li></li></ul><li>Ausgabevarianten - Technische Sicht.<br />Multiple Ausgabekanäle.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />12<br />Desktop<br />Mobile<br />Webbrowser<br />IE, FF, Chrome,...<br />„Eigene“ Mobile Website(s)(Browser)<br />Applikationen<br />(Nativ)<br />Responsive Layout(Browser)<br />Content Management System<br />
  27. 27. Beispiele für Implementierungsvarianten.<br />03.03.2011<br />13<br />Content. Mobile. Devices. Auslieferung.<br />
  28. 28. Responsive Layout (Liquid Layout).<br />Umsetzungsvarianten im Mobile Web.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />14<br />http://2010.dconstruct.org/<br />
  29. 29. Responsive Layout (Liquid Layout).<br />Umsetzungsvarianten im Mobile Web.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />15<br />http://2010.dconstruct.org/<br />
  30. 30. Responsive Layout - Key Facts.<br />Es gibt nur 1 Website für alle Devicetypen & Gruppen(OneWeb)<br />Es gibt keine eigene mobile URL<br />„Responsive“ Content bedeutet<br />Umordnungvon Modulen<br />Reduktion von Content<br />Dynamische Berechnung von Grössenverhältnissen<br />„Responsive“ Content wird gesteuert überScreengrösse<br />Primär clientseitig mit Frontendtechnik (CSS, Java Script)<br />Meist nur Online Nutzung, inkl. HTML5<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />16<br />Umsetzungsvarianten im Mobile Web.<br />
  31. 31. „Eigene“ mobile Website(s).<br />03.03.2011<br />17<br />Content. Mobile. Devices. Auslieferung.<br />
  32. 32. Raiffeisen Mobile Website.<br />
  33. 33. „Eigene“ Mobile Website(s) - Key Facts.<br />Eigene Mobile Website(s) zusätzlich zur Corporate Website<br />Mobile URL (m.company.com)<br />Kombination mit User Agent Erkennung<br />Anpassung Content und Applikationslogik erfolgt primär serverseitig<br />Meist nur Online Nutzung, inkl. HTML5<br />Umsetzungsvarianten im Mobile Web.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />19<br />
  34. 34. Native Applikationen.<br />03.03.2011<br />20<br />Content. Mobile. Devices. Auslieferung.<br />
  35. 35. Raiffeisen Hypothekenrechner.<br />
  36. 36.
  37. 37.
  38. 38. Native Applikationen - Key Facts.<br />Native Applikationen stehen oft nur teilweise mit dem CMS in einer Beziehung und haben starken „Applikationscharakter“<br />Verwenden keinen Browser sondern laufen nativ<br />Bezug und Vertrieb erfolgt über Applicationstores (Ökosystem)<br />Die Entwicklung erfolgt pro Plattform (iOS, Android,...) mit geringen Synergien<br />Einbezug von Hardware Features (Kamera, GPS, Dokumente,..) möglich<br />Flexible Kombination aus Offline & Online<br />Umsetzungsvarianten im Mobile Web.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />24<br />
  39. 39. Wann welche “Mobile” Variante wählen?<br />03.03.2011<br />25<br />Content. Mobile. Devices. Auslieferung.<br />
  40. 40. Wann welche “Mobile” Variante wählen?<br />Umsetzungsvarianten im Mobile Web.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />26<br />Responsive Layout<br />Eigene Mobile Website(s)<br />Applikationen<br />1 Website<br />Ausreizen von plattformspezifischen Funktionen<br />Ansatz<br />Eigene Website(s) für definierte Devicegruppen<br />Gleicher Content bei unterschiedlicher Darstellung<br />Content und Interaktion<br />„Mobiler“ Content mit eigener Darstellung<br />„Mobiler“ Content mit hoher Interaktivität<br />„Normale Website“<br />Ökosystem<br />„Normale Website“, reduzierter Umfang<br />Eigenes Ökosystem: Sichtbarkeit, Ratings, Bezahlsystem<br />gering<br />KostenfürEntwicklung<br />gering + gering<br />hoch<br />
  41. 41. Content Erfassung & Darstellung.<br />03.03.2011<br />27<br />Content. Mobile. Devices. Auslieferung.<br />
  42. 42. Wie sieht der „Mobile“ Content auf den<br /> verschiedenen Mobile Devices aus?<br />
  43. 43. Heute.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />29<br />Content Erfassung & Darstellung.<br />
  44. 44. Zukunft.<br />CMS mit integrierten Mobile Emulatoren<br />Wie geht das?<br />Content Erfassung & Darstellung.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />30<br />
  45. 45. Demo.<br />Content Erfassung & Darstellung.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />31<br />Demo<br />
  46. 46. Zusammenfassung.<br />03.03.2011<br />32<br />Content. Mobile. Devices. Auslieferung.<br />
  47. 47. Zusammenfassung.<br />Jedes Display (Desktop Browser, Notebook, Tablet-PC, Mobile Endgeräte, TV,...) wird in Zukunft Internetinhalte abrufen können.<br />In Zukunft erleichtern integrierte Mobile Emulatoren die Arbeit von Content Redakteuren<br />Entscheidung welche „Mobile“ Variante gewählt wird<br />Zusammenfassung – Umsetzungsvarianten.<br />Content. Mobile. Devices. Auslieferung.<br />03.03.2011<br />33<br />Responsive Design<br />1<br />Eigene Mobile Website(s)<br />2<br />3<br />Native Applikation(en)<br />
  48. 48. Vielen Dank für Ihre Aufmerksamkeit.<br />johannes.waibel@namics.com@joewaibel<br />03.03.2011<br />34<br />Content. Mobile. Devices. Auslieferung.<br />
  49. 49. Trend – „Mobile First“.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />35<br />Traditioneller Ansatz<br />Neuer Ansatz<br />Gesamte Corporate Website <br />= Gesamte Corporate Website<br />- Reduktion Anwendungsfälle / Inhalte<br />+ weitere Anwendungsfälle / Inhalte<br />= Mobile Site<br />Mobile Site<br />Umsetzungsvarianten im Mobile Web.<br />
  50. 50. Responsive Layout (Liquid Layout).<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />36<br />
  51. 51. In Zukunft könnten CMS-Offerten so aussehen:<br />Zusammenfassung – Umsetzungsvarianten.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />37<br /><ul><li>Desktopwebsite(s): </li></ul>2 meistverwendete Desktopbrowser<br />Internet Explorer 7 + CHF 10‘000.-<br />Internet Explorer 6 + CHF 15‘000.-<br />...<br /><ul><li>Mobile</li></ul>Responsive Design (Tablet & Smartphones) + CHF 10‘000.-<br />Eigene“ Mobile Website (Tablet & Smartphones) + CHF 40‘000.-<br />Mobile Applikationen (Tablet & Smartphones) + CHF x.-<br />
  52. 52. Mobile Strategie – Arbeitsschritte.<br />Mobile Strategie<br />02.03.11<br />Mobile. Context is King. ZRH.<br />Mobile.Namics<br />1. Analyse<br />2. Vision und Ziele<br />= Mobile Strategie<br />3. Zielgruppen & Bedürfnisse<br />4. Ableitung <br />Mobile Services<br />5. Planung<br />

×