• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Zeix i2 summit2012_responsivedesign&contentstrategy_v1-0_2012-11-21
 

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

on

  • 516 views

 

Statistics

Views

Total Views
516
Views on SlideShare
446
Embed Views
70

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 70

https://twitter.com 69
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 unterschiedliche Bildschirmgrössen optimierte Darstellung für unterschiedliche Bildschirmgrössen© by Zeix 2012 5
    • © 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 unterschiedliche Bildschirmgrössen optimierte Darstellung für unterschiedliche Bildschirmgrössen die Bedienlogik z.B. andere Logik der Navigation© by Zeix 2012 8
    • © 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 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
    • © by Zeix 2012Beispiel: http://angebote.nzz.ch/bestellen.php?title=nzzstud‐abo
    • 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
    • Responsive DesignWas ist Responsive Design? p gResponsive Design = Für In‐ und Output‐ Möglichkeiten des  p Devices optimierte  Website© by Zeix 2012 14
    •  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‐ 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
    • 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
    • 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
    • © 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:  Tageszeit  Auch grössere Zeitabschnitte wie Wochentage oder Jahreszeiten Auch grössere Zeitabschnitte wie Wochentage oder Jahreszeiten  denkbar© by Zeix 2012 21
    • © 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ä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
    • © 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  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
    • Quelle: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf p // g g / / / / _ p© by Zeix 2012
    • © 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äre: Am Compi im  Büro© by Zeix 2012 33
    • Zürich Wallisellen Mi, 21.11.12 © by Zeix 2012Beispiel: http://www.sbb.ch
    • 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 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
    • 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
    • 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
    • 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
    •  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  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
    • 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
    • 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
    •  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