i2summit 2012Content StrategyContent Strategytrifft Responsive Design#i2summit© by Zeix 2012      1
 Responsive DesignI h l  Inhalt und Kontext           dK Content Strategy Fazit© by Zeix 2012         2
Responsive DesignDer Gerätepark wächst          p                        ?   ?© by Zeix 2012              3               ...
Was ist Responsive Design?Neue Inputmethoden       p                             ??© by Zeix 2012               4         ...
Was ist Responsive Design?Was wird angepasst?           g p die Darstellung      optimierte Darstellung für unterschiedli...
© by Zeix 2012Beispiel bostonglobe.com
© by Zeix 2012Beispiel welti‐furrer.ch
Was ist Responsive Design?Was wird angepasst?           g p die Darstellung      optimierte Darstellung für unterschiedli...
© by Zeix 2012Beispiel: http://earthhour.fr/
© by Zeix 2012Beispiel: http://earthhour.fr/
Was ist Responsive Design?Was wird angepasst?           g p die Darstellung      optimierte Darstellung für unterschiedli...
© by Zeix 2012Beispiel: http://angebote.nzz.ch/bestellen.php?title=nzzstud‐abo
Was ist Responsive Design? Technisch                                   Server                                      CSSGlei...
Responsive DesignWas ist Responsive Design?           p           gResponsive Design   =   Für In‐ und Output‐            ...
 Responsive DesignI h l  Inhalt und Kontext           dK Content Strategy Fazit© by Zeix 2012         15
Inhalt und KontextResponsive Design & Kontext   p           gResponsive Design                                =   Für In‐ ...
Inhalt und KontextKontext 1: Gerät/Device                / Responsive Design, wie wir es heute kennenAAngepasste Darstel...
Inhalt und KontextKontext 2: Ort Ortsbezogene Dienste (location‐based services)AAngepasste Darstellung und Inhaltsauswah...
© by Zeix 2012Beispiel: http://www.stadt‐zuerich.ch/content/mobile/stzh/de/index.html
© by Zeix 2012Beispiel: http://www.meetup.com/
Inhalt und KontextKontext 3: Zeit Anpassung der Inhalte je nachdem, wann ein User die   Website besucht:  Website besucht...
© by Zeix 2012Beispiel: http://lenzerheide.com/de/winter
© by Zeix 2012Beispiel: http://lenzerheide.com/de/sommer
© by Zeix 2012Beispiel: http://www.local.ch
Inhalt und KontextKontext 4: User Falls der User bekannt ist können die Inhalte seinen   Präferenzen angepasst werden  Pr...
© by Zeix 2012Beispiel: http://www.amazon.com
© by Zeix 2012Beispiel: http://www.amazon.com
Inhalt und KontextKontext 5: Prozess/Status                  / Device‐übergreifende Prozess‐Unterstützung wird immer   wi...
Quelle: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf                            p //         g g   ...
© by Zeix 2012Beispiel: http://3dprintingmodel.com/marketplace/indexMarketPlace.php
© by Zeix 2012Beispiel: http://3dprintingmodel.com/marketplace/indexMarketPlace.php
© by Zeix 2012Beispiel: http://3dprintingmodel.com/marketplace/indexMarketPlace.php
Inhalt und KontextKontext 5: Prozess/Status                  / Beispiel SBB ‐ Eine gute übergreifende User Experience wär...
Zürich                              Wallisellen                              Mi, 21.11.12   © by Zeix 2012Beispiel: http:/...
21.11.12   © by Zeix 2012Beispiel: http://www.sbb.ch
21.11.          22.11.© by Zeix 2012
Unterwegs mit                   dem iPhone© by Zeix 2012                    37
© by Zeix 2012Beispiel: http://m.sbb.ch
 Responsive DesignI h l  Inhalt und Kontext           dK Content Strategy Fazit© by Zeix 2012         39
Content StrategyVoraussetzungen            gInformationen zur Definition der Regeln, über die die Inhalts‐Anzeige gesteuer...
Content StrategyInformationen über den Kontext Informationen über den Kontext sind immer mehr verfügbar       GPS i i   ...
Content StrategyDie relevanten Inhalte Welche Ihrer Inhalte sind in welchem Kontext relevant?           Für welche User,...
Content StrategyMetainformationen über den Inhalt Mit welchen Informationen müssen die Inhalte angereichert   werden, dam...
 Responsive DesignI h l  Inhalt und Kontext           dK Content Strategy Fazit© by Zeix 2012         44
FazitWo trifft Content Strategy auf Responsive Design?Content Strategy                    =   Selektion von Inhalten und  ...
FazitRelevanz durch Metadaten Egal, welche technologischen Neuigkeiten noch hinzukommen Di E höh  Die Erhöhung der Relev...
Vielen Dank Esther Brunner  esther.bruner@zeix.com  esther bruner@zeix com  @ebr76 Gregor Urech  Gregor Urech  gregor.ur...
 http://www.easyvectors.com/browse/human/cartoon‐brain‐outline‐clip‐art http://www.cnet.de/themen/archiv/39001318/artike...
Upcoming SlideShare
Loading in...5
×

Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21

495

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
495
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21

  1. 1. i2summit 2012Content StrategyContent Strategytrifft Responsive Design#i2summit© by Zeix 2012 1
  2. 2.  Responsive DesignI h l Inhalt und Kontext dK Content Strategy Fazit© by Zeix 2012 2
  3. 3. Responsive DesignDer Gerätepark wächst p ? ?© by Zeix 2012 3 ?
  4. 4. Was ist Responsive Design?Neue Inputmethoden p ??© by Zeix 2012 4 ?
  5. 5. Was ist Responsive Design?Was wird angepasst? g p die Darstellung optimierte Darstellung für unterschiedliche Bildschirmgrössen optimierte Darstellung für unterschiedliche Bildschirmgrössen© by Zeix 2012 5
  6. 6. © by Zeix 2012Beispiel bostonglobe.com
  7. 7. © by Zeix 2012Beispiel welti‐furrer.ch
  8. 8. Was ist Responsive Design?Was wird angepasst? g p die Darstellung optimierte Darstellung für unterschiedliche Bildschirmgrössen optimierte Darstellung für unterschiedliche Bildschirmgrössen die Bedienlogik z.B. andere Logik der Navigation© by Zeix 2012 8
  9. 9. © by Zeix 2012Beispiel: http://earthhour.fr/
  10. 10. © by Zeix 2012Beispiel: http://earthhour.fr/
  11. 11. Was ist Responsive Design?Was wird angepasst? g p die Darstellung optimierte Darstellung für unterschiedliche Bildschirmgrössen optimierte Darstellung für unterschiedliche Bildschirmgrössen die Bedienlogik z.B. andere Logik der Navigation der Inhalt/die Funktionalität z.B. reduzierte Inhaltsmenge in Teasern auf mobilen Geräten© by Zeix 2012 11
  12. 12. © by Zeix 2012Beispiel: http://angebote.nzz.ch/bestellen.php?title=nzzstud‐abo
  13. 13. Was ist Responsive Design? Technisch Server CSSGleicher Code (HTML/CSS/Javascript) HTMLwird an alle Geräte gesendet. dPro Gerät unterschied‐lichel h Interpretation des  dCSS‐Codes im Browser(@media‐Regeln) © by Zeix 2012 13
  14. 14. Responsive DesignWas ist Responsive Design? p gResponsive Design = Für In‐ und Output‐ Möglichkeiten des  p Devices optimierte  Website© by Zeix 2012 14
  15. 15.  Responsive DesignI h l Inhalt und Kontext dK Content Strategy Fazit© by Zeix 2012 15
  16. 16. Inhalt und KontextResponsive Design & Kontext p gResponsive Design = Für In‐ und Output‐ Anpassen einer  Website an den  Möglichkeiten des  Kontext, in dem sie  p Devices optimierte  konsumiert wird Website Oftmals wissen wir mehr  über den Kontext als nur das  über den Kontext als nur das Gerät/Device© by Zeix 2012 16
  17. 17. Inhalt und KontextKontext 1: Gerät/Device / Responsive Design, wie wir es heute kennenAAngepasste Darstellung, Bedienlogik und Inhaltsmengen für  D ll B di l ik d I h l fü Möglichkeiten und Limitationen des entsprechenden Geräts© by Zeix 2012 17
  18. 18. Inhalt und KontextKontext 2: Ort Ortsbezogene Dienste (location‐based services)AAngepasste Darstellung und Inhaltsauswahl nach  D ll dI h l hl h geografischer Nähe zum Ort von Interesse© by Zeix 2012 18
  19. 19. © by Zeix 2012Beispiel: http://www.stadt‐zuerich.ch/content/mobile/stzh/de/index.html
  20. 20. © by Zeix 2012Beispiel: http://www.meetup.com/
  21. 21. Inhalt und KontextKontext 3: Zeit Anpassung der Inhalte je nachdem, wann ein User die  Website besucht: Website besucht:  Tageszeit  Auch grössere Zeitabschnitte wie Wochentage oder Jahreszeiten Auch grössere Zeitabschnitte wie Wochentage oder Jahreszeiten  denkbar© by Zeix 2012 21
  22. 22. © by Zeix 2012Beispiel: http://lenzerheide.com/de/winter
  23. 23. © by Zeix 2012Beispiel: http://lenzerheide.com/de/sommer
  24. 24. © by Zeix 2012Beispiel: http://www.local.ch
  25. 25. Inhalt und KontextKontext 4: User Falls der User bekannt ist können die Inhalte seinen  Präferenzen angepasst werden Präferenzen angepasst werden  Nach Login  Informationen über den User in Cookies gespeichert Informationen über den User in Cookies gespeichert  Durch Verbindung mit Social Networks (Facebook Connect, Google+) Wird schon sehr stark eingesetzt  In der Werbung: Bsp. Zalando  Von Google  Im E‐Commerce: Bsp. Amazon© by Zeix 2012 25
  26. 26. © by Zeix 2012Beispiel: http://www.amazon.com
  27. 27. © by Zeix 2012Beispiel: http://www.amazon.com
  28. 28. Inhalt und KontextKontext 5: Prozess/Status / Device‐übergreifende Prozess‐Unterstützung wird immer  wichtiger, wichtiger weil User vermehrt zwischen Devices hin und her wechseln und dabei Use Cases auf einem Device beginnen und auf dem und dabei Use Cases auf einem Device beginnen und auf dem  nächsten fortführen.© by Zeix 2012 28
  29. 29. Quelle: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf p // g g / / / / _ p© by Zeix 2012
  30. 30. © by Zeix 2012Beispiel: http://3dprintingmodel.com/marketplace/indexMarketPlace.php
  31. 31. © by Zeix 2012Beispiel: http://3dprintingmodel.com/marketplace/indexMarketPlace.php
  32. 32. © by Zeix 2012Beispiel: http://3dprintingmodel.com/marketplace/indexMarketPlace.php
  33. 33. Inhalt und KontextKontext 5: Prozess/Status / Beispiel SBB ‐ Eine gute übergreifende User Experience wäre: Am Compi im  Büro© by Zeix 2012 33
  34. 34. Zürich Wallisellen Mi, 21.11.12 © by Zeix 2012Beispiel: http://www.sbb.ch
  35. 35. 21.11.12 © by Zeix 2012Beispiel: http://www.sbb.ch
  36. 36. 21.11. 22.11.© by Zeix 2012
  37. 37. Unterwegs mit  dem iPhone© by Zeix 2012 37
  38. 38. © by Zeix 2012Beispiel: http://m.sbb.ch
  39. 39.  Responsive DesignI h l Inhalt und Kontext dK Content Strategy Fazit© by Zeix 2012 39
  40. 40. Content StrategyVoraussetzungen gInformationen zur Definition der Regeln, über die die Inhalts‐Anzeige gesteuert wird.Anzeige gesteuert wird Falls Kontext X Falls Kontext X dann Inhalt Y Inhalt YI f Informationen über den Kontext ti üb d K t t Metainformationen zu den Inhalten© by Zeix 2012 40
  41. 41. Content StrategyInformationen über den Kontext Informationen über den Kontext sind immer mehr verfügbar  GPS i i GPS in immer mehr Geräten h G ät  Vernetzung von Benutzerprofilen (z.B. Facebook Connect)  Persönliche Geräte für Internetzugriff (Smartphones) Persönliche Geräte für Internetzugriff (Smartphones)© by Zeix 2012 41
  42. 42. Content StrategyDie relevanten Inhalte Welche Ihrer Inhalte sind in welchem Kontext relevant?  Für welche User, Fü l h U  die sich in welcher Lebenssituation/in welchem Prozess befinden,  die sich wo befinden, die sich wo befinden,  zu welcher Zeit,  Auf welchem Gerät?© by Zeix 2012 42
  43. 43. Content StrategyMetainformationen über den Inhalt Mit welchen Informationen müssen die Inhalte angereichert  werden, damit man sie nur dann ausgeben kann, wenn sie  werden damit man sie nur dann ausgeben kann wenn sie relevant sind?  Geokoordinaten  Geografische Relevanz  Zeitliche Relevanz  Relevanz für unterschiedliche Nutzergruppen  Thematische Beschreibung© by Zeix 2012 43
  44. 44.  Responsive DesignI h l Inhalt und Kontext dK Content Strategy Fazit© by Zeix 2012 44
  45. 45. FazitWo trifft Content Strategy auf Responsive Design?Content Strategy = Selektion von Inhalten und  gezielte Anreicherung mit  i l i h i Metadaten, so dass sieResponsive Design = basierend auf Regeln kontext‐ optimiert angezeigt werden  i i i d können.© by Zeix 2012 45
  46. 46. FazitRelevanz durch Metadaten Egal, welche technologischen Neuigkeiten noch hinzukommen Di E höh Die Erhöhung der Relevanz von Inhalten ist eine der grossen  d R l I h l i i d Herausforderung der kommenden Jahre Je genauer die Inhalte durch Metadaten beschrieben sind Je genauer die Inhalte durch Metadaten beschrieben sind,  um so einfacher ist es, sie in den richtigen Momenten  anzeigen zu können anzeigen zu können© by Zeix 2012 46
  47. 47. Vielen Dank Esther Brunner esther.bruner@zeix.com esther bruner@zeix com @ebr76 Gregor Urech Gregor Urech gregor.urech@zeix.com @g @gurech Zeix AG www.zeix.com www zeix com @zeix© by Zeix 2012 47
  48. 48.  http://www.easyvectors.com/browse/human/cartoon‐brain‐outline‐clip‐art http://www.cnet.de/themen/archiv/39001318/artikel zum thema sommer.htm http://www.cnet.de/themen/archiv/39001318/artikel_zum_thema_sommer.htm http://www.iphonehacks.com/2010/12/kinect‐like‐touchless‐gesture‐user‐ interface‐for‐ipad‐will‐be‐demoed‐at‐ces.html http://services google com/fh/files/misc/multiscreenworld final pdf http://services.google.com/fh/files/misc/multiscreenworld_final.pdf© by Zeix 2012 48
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×