2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
•
3 gostaram•2,097 visualizações
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)
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (18)
Semelhante a 2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
Semelhante a 2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design (20)
Mais de Johannes Waibel
Mais de Johannes Waibel (18)
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
- 1. 1 Fachtagung. 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/
- 5. Fragen03.03.2011 Content. Mobile. Devices. Auslieferung. 3
- 6. Die digitale Welt gestern & heute. 03.03.2011 4 Content. Mobile. Devices. Auslieferung.
- 7. Gestern. Die digitale Welt gestern & heute. 03.03.2011 Content. Mobile. Devices. Auslieferung. 5 Notebook Webbrowser Tastatur
- 8. Heute. Die digitale Welt gestern & heute. 03.03.2011 Content. Mobile. Devices. Auslieferung. 6 Large Screen Spielkonsole Notebook Tablet Screen Chat Mobile Screen Telefon
- 9. 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 ofthings) Heute: Fokus auf Mobile Devices & Tablets Die digitale Welt gestern & heute. 03.03.2011 Content. Mobile. Devices. Auslieferung. 7
- 10. Gartner – Web Zugriffe 2013. Die digitale Welt gestern & heute. 03.03.2011 Content. Mobile. Devices. Auslieferung. 8 Web Zugriffe By2013, 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 Web Desktop Web Zeit 2013
- 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/
- 12. Multiple Ausgabekanäle. 03.03.2011 10 Content. Mobile. Devices. Auslieferung.
- 14. Beratung
- 16. Medien Konsum
- 18. Überall (always on, alwayscarried)
- 23. Im Büro / Zuhause
- 27. Beispiele für Implementierungsvarianten. 03.03.2011 13 Content. Mobile. Devices. Auslieferung.
- 28. Responsive Layout (Liquid Layout). Umsetzungsvarianten im Mobile Web. 03.03.2011 Content. Mobile. Devices. Auslieferung. 14 http://2010.dconstruct.org/
- 29. Responsive Layout (Liquid Layout). Umsetzungsvarianten im Mobile Web. 03.03.2011 Content. Mobile. Devices. Auslieferung. 15 http://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 bedeutet Umordnungvon Modulen Reduktion von Content Dynamische Berechnung von Grössenverhältnissen „Responsive“ Content wird gesteuert überScreengrö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.
- 31. „Eigene“ mobile Website(s). 03.03.2011 17 Content. Mobile. Devices. Auslieferung.
- 33. „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
- 34. Native Applikationen. 03.03.2011 20 Content. Mobile. Devices. Auslieferung.
- 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 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
- 39. Wann welche “Mobile” Variante wählen? 03.03.2011 25 Content. Mobile. Devices. Auslieferung.
- 40. 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 Ausreizen von plattformspezifischen Funktionen Ansatz Eigene Website(s) für definierte Devicegruppen Gleicher Content bei unterschiedlicher Darstellung Content und Interaktion „Mobiler“ Content mit eigener Darstellung „Mobiler“ Content mit hoher Interaktivität „Normale Website“ Ökosystem „Normale Website“, reduzierter Umfang Eigenes Ökosystem: Sichtbarkeit, Ratings, Bezahlsystem gering KostenfürEntwicklung gering + gering hoch
- 41. Content Erfassung & Darstellung. 03.03.2011 27 Content. Mobile. Devices. Auslieferung.
- 43. Heute. 03.03.2011 Content. Mobile. Devices. Auslieferung. 29 Content Erfassung & Darstellung.
- 44. Zukunft. CMS mit integrierten Mobile Emulatoren Wie geht das? Content Erfassung & Darstellung. 03.03.2011 Content. Mobile. Devices. Auslieferung. 30
- 45. Demo. Content Erfassung & Darstellung. 03.03.2011 Content. Mobile. Devices. Auslieferung. 31 Demo
- 46. Zusammenfassung. 03.03.2011 32 Content. Mobile. Devices. Auslieferung.
- 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 Redakteuren Entscheidung welche „Mobile“ Variante gewählt wird Zusammenfassung – Umsetzungsvarianten. Content. Mobile. Devices. Auslieferung. 03.03.2011 33 Responsive Design 1 Eigene Mobile Website(s) 2 3 Native Applikation(en)
- 48. Vielen Dank für Ihre Aufmerksamkeit. johannes.waibel@namics.com@joewaibel 03.03.2011 34 Content. Mobile. Devices. Auslieferung.
- 49. Trend – „Mobile First“. 03.03.2011 Content. Mobile. Devices. Auslieferung. 35 Traditioneller Ansatz Neuer Ansatz Gesamte Corporate Website = Gesamte Corporate Website - Reduktion Anwendungsfälle / Inhalte + weitere Anwendungsfälle / Inhalte = Mobile Site Mobile Site Umsetzungsvarianten im Mobile Web.
- 50. Responsive Layout (Liquid Layout). 03.03.2011 Content. Mobile. Devices. Auslieferung. 36
- 52. Mobile Strategie – Arbeitsschritte. Mobile Strategie 02.03.11 Mobile. Context is King. ZRH. Mobile.Namics 1. Analyse 2. Vision und Ziele = Mobile Strategie 3. Zielgruppen & Bedürfnisse 4. Ableitung Mobile Services 5. Planung
Notas do Editor
- > 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”.
- 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:
- > 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
- Die Welt vonHeuteistumfassendergeworden:Einen PC gibtesimmernoch, aber die Umwelt hat sich stark verändert!
- > 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.
- > 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.
- 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.
- > 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.
- HTML:schafttneueMöglichkeiten. Voraussetzungsindmorderne Browser auf Mobiletelefonen> Offline Cache für static content> Offline Storage> Geo Location API> Touch API
- Im Kern 1spezischer Use Case mithoherInteraktivät
- > SpielerischerAnsatzmitSchiebreglern> Einfacheserkennen der Zusammenhängenfür die Hypothekarberechnung (Eigenkapital, Einkommen und Kaufpreis). Was istmeineTragbarkeit?
- > Auswertung Berechnungsergebnisse (1te und 2te Hypothek)> Vorschlag möglicher Immobliien> Conversion
- - Apps auf Basis von Website-Technologien: z.B. PhoneGap, Titanium resp. NIWEA-Idee
- Herausforderung!
- > Externe Mobile EmulatorengebeneinenerstenEindruckwieeineWebseite auf den Mobile Devices aussieht.>
- Aus
- 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?