1<br />Fachtagung. Mobile. CMS. Ausgabekanäle.Trends. Responsive Design. Namics.<br />Johannes Waibel. Senior Consultant.<...
Optimale Auslieferung der CMS-Inhalte für mobile Endgeräte.<br />http://www.flickr.com/photos/rkottonau/571288490/<br />
Agenda.<br />Digitale Welt gestern & heute<br />Multiple Ausgabekanäle<br />Implementierungsvarianten<br />Responsive Layo...
Zusammenfassung
Fragen</li></ul>03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />3<br />
Die digitale Welt gestern & heute.<br />03.03.2011<br />4<br />Content. Mobile. Devices. Auslieferung.<br />
Gestern.<br />Die digitale Welt gestern & heute.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />5<br />...
Heute.<br />Die digitale Welt gestern & heute.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung.<br />6<br />La...
Fazit.<br />Das Internet ist “nur” das Medium und überall verfügbar<br />Verschiedenste Endgeräte konsumieren Inhalte und ...
Gartner – Web Zugriffe 2013. <br />Die digitale Welt gestern & heute.<br />03.03.2011<br />Content. Mobile. Devices. Ausli...
“Websites not optimized for the smaller-screen formats will become a market barrier for their owners – much content and ma...
Multiple Ausgabekanäle.<br />03.03.2011<br />10<br />Content. Mobile. Devices. Auslieferung.<br />
Ausgabevarianten – Anwendersicht.<br />Multiple Ausgabekanäle.<br />03.03.2011<br />Content. Mobile. Devices. Auslieferung...
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: lang</li></li></ul><li>Ausgabevarianten - Technische Sicht.<br />Multiple Ausgabekanäle.<br />03.03.2011<br...
Beispiele für Implementierungsvarianten.<br />03.03.2011<br />13<br />Content. Mobile. Devices. Auslieferung.<br />
Responsive Layout (Liquid Layout).<br />Umsetzungsvarianten im Mobile Web.<br />03.03.2011<br />Content. Mobile. Devices. ...
Responsive Layout (Liquid Layout).<br />Umsetzungsvarianten im Mobile Web.<br />03.03.2011<br />Content. Mobile. Devices. ...
Responsive Layout - Key Facts.<br />Es gibt nur 1 Website für alle Devicetypen & Gruppen(OneWeb)<br />Es gibt keine eigene...
„Eigene“ mobile Website(s).<br />03.03.2011<br />17<br />Content. Mobile. Devices. Auslieferung.<br />
Raiffeisen Mobile Website.<br />
„Eigene“ Mobile Website(s) - Key Facts.<br />Eigene Mobile Website(s) zusätzlich zur Corporate Website<br />Mobile URL (m....
Native Applikationen.<br />03.03.2011<br />20<br />Content. Mobile. Devices. Auslieferung.<br />
Raiffeisen Hypothekenrechner.<br />
Native Applikationen - Key Facts.<br />Native Applikationen stehen oft nur teilweise mit dem CMS in einer Beziehung und ha...
Upcoming SlideShare
Loading in …5
×

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

2,169 views
2,059 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,169
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • &gt; Sie haben bei sich im Unternehmen ein Corporate CMS im Einsatz. &gt; Die Frage die sich nun stell: Wie gehen sie mit mobile Endgeräten um?&gt; „Mobile“ ist sehr vereinfacht gesagt “Tablets” &amp; “Smartphones”.
  • Damit Sie am Schluss wissen Weg Sie gehen sollten,habe ich folgende Agenda zusammengestellt.
  • Ichstartemit der digitalen Welt von gestern. Dies so inetwa so aus:
  • &gt; Die Welt von gestern sah in etwa so aus: D.h.&gt; 1 Dimensional – 1 Computer oder Notebook mit Webbroser; Eingabe über Tastatur &amp; Maus&gt; Internet = Webbrowser
  • Die Welt vonHeuteistumfassendergeworden:Einen PC gibtesimmernoch, aber die Umwelt hat sich stark verändert!
  • &gt; Wenn wir uns auf den Teil „Mobile Endgeräte“ mit Internet Connection fokussioren schafft die Studie von Gartner eine Interessante Aussage:&gt; Immer mehr Zugriffe erfolgen global über das “mobile Web” / Im Gegensatz zu Desktop Zugirff&gt; Im Jahre 2014 werden die Mobilen Zugriffe die normalen Zugriffe übersteigen. &gt; In gewissen „Populationen“ oder Anwendungen ist die Schnittpunkt heute schon erreicht/überschritten.
  • &gt; Key Fazit: Websites die nicht auf die Eigenschaften des mobile Kanals eingehen stellen einen Hürde dar.&gt; 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. &gt; Ich starte mit einer Sicht auf die Benutzer und gehe dann auf die 3 Lösungsvarianten ein.
  • 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.
  • 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.
  • &gt; Sie alle haben ein Corporate CMS im Einsatz. &gt; Wie gehen sie mit der Mobile Thematik um? &gt; Das CMS bildet die Datenquelle für ihre Mobilen Ausgabekanäle.
  • HTML:schafttneueMöglichkeiten. Voraussetzungsindmorderne Browser auf Mobiletelefonen&gt; Offline Cache für static content&gt; Offline Storage&gt; Geo Location API&gt; Touch API
  • Im Kern 1spezischer Use Case mithoherInteraktivät
  • &gt; SpielerischerAnsatzmitSchiebreglern&gt; Einfacheserkennen der Zusammenhängenfür die Hypothekarberechnung (Eigenkapital, Einkommen und Kaufpreis). Was istmeineTragbarkeit?
  • &gt; Auswertung Berechnungsergebnisse (1te und 2te Hypothek)&gt; Vorschlag möglicher Immobliien&gt; Conversion
  • - Apps auf Basis von Website-Technologien: z.B. PhoneGap, Titanium resp. NIWEA-Idee
  • Herausforderung!
  • &gt; Externe Mobile EmulatorengebeneinenerstenEindruckwieeineWebseite auf den Mobile Devices aussieht.&gt;
  • Aus
  • Zielgruppen &amp; 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?
  • 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 />

    ×