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

Content Strategy

i2summit 2012

Content Strategytrifft

Responsive Design

#i2summit

© by Zeix 2012 1© by Zeix 2012

Responsive DesignI h l d K Inhalt und Kontext

Content Strategy Fazit


Responsive Design

Der Gerätepark wächstp

??© by Zeix 2012 3© by Zeix 2012 ?

Was ist Responsive Design?

Neue Inputmethodenp

???

© by Zeix 2012 4© by Zeix 2012 ?


Was wird angepasst? die Darstellung

optimierte Darstellung für unterschiedliche Bildschirmgrössen

g p






g p


die Bedienlogikz.B. andere Logik der Navigation





g p


die Bedienlogikz.B. andere Logik der Navigation

der Inhalt/die Funktionalitätz.B. reduzierte Inhaltsmenge in Teasern auf mobilen Geräten

© by Zeix 2012 11© by Zeix 2012


Technisch Server

CSS

Gleicher Code (HTML/CSS/Javascript)

wird an alle Geräte d

HTML

gesendet.

Pro Gerät unterschied‐l h dliche Interpretation des CSS‐Codes im Browser(@media‐Regeln)

© by Zeix 2012 13© by Zeix 2012

Responsive Design

Was ist Responsive Design?p g

Responsive Design Für In‐ und Output‐=Möglichkeiten des Devices optimierte pWebsite

© by Zeix 2012 14© by Zeix 2012

Inhalt und Kontext

Responsive Design & Kontextp g

Responsive Design Für In‐ und Output‐= Anpassen einer Möglichkeiten des Devices optimierte Website an den Kontext, in dem sie pWebsitekonsumiert wird

Oftmals wissen wir mehr über den Kontext als nur dasüber den Kontext als nur das Gerät/Device

© by Zeix 2012 16© by Zeix 2012

Inhalt und Kontext

Kontext 1: Gerät/Device Responsive Design, wie wir es heute kennen

A D ll B di l ik d I h l fü

/

Angepasste Darstellung, Bedienlogik und Inhaltsmengen für Möglichkeiten und Limitationen des entsprechenden Geräts

© by Zeix 2012 17© by Zeix 2012

Inhalt und Kontext

Kontext 2: OrtOrtsbezogene Dienste (location‐based services)

A D ll d I h l hl h Angepasste Darstellung und Inhaltsauswahl nach geografischer Nähe zum Ort von Interesse

© by Zeix 2012 18© by Zeix 2012

© by Zeix 2012

Beispiel: http://www.meetup.com/

Inhalt und Kontext

Kontext 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 2012

Inhalt und Kontext

Kontext 4: User Falls der User bekannt ist können die Inhalte seinen

Präferenzen angepasst werdenPrä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 2012

Inhalt und Kontext

Kontext 5: Prozess/Status/Device‐übergreifende Prozess‐Unterstützung wird immer

wichtigerwichtiger,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© by Zeix 2012

Quelle: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

© by Zeix 2012

p // g g / / / / _ p

Inhalt und Kontext

Kontext 5: Prozess/Status/ Beispiel SBB ‐ Eine gute übergreifende User Experience wäre:

Am Compi im Büro

© by Zeix 2012 33© by Zeix 2012

Büro

ZürichWallisellen

Mi, 21.11.12

© by Zeix 2012Beispiel: http://www.sbb.ch

21.11.12

© by Zeix 2012Beispiel: http://www.sbb.ch

Content Strategy

VoraussetzungengInformationen zur Definition der Regeln, über die die Inhalts‐Anzeige gesteuert wirdAnzeige gesteuert wird.

Falls Kontext X dann Inhalt Y

I f ti üb d K t t

Falls Kontext X dann Inhalt Y

Informationen über den KontextMetainformationen zu den Inhalten

© by Zeix 2012 40© by Zeix 2012

Content Strategy

Informationen über den Kontext Informationen über den Kontext sind immer mehr verfügbar

GPS i i h G ät GPS in immer mehr Geräten 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© by Zeix 2012

Content Strategy

Die relevanten InhalteWelche Ihrer Inhalte sind in welchem Kontext relevant?

Fü l h U Für welche User, 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© by Zeix 2012

Content Strategy

Metainformationen über den InhaltMit welchen Informationen müssen die Inhalte angereichert

werden damit man sie nur dann ausgeben kann wenn siewerden, damit man sie nur dann ausgeben kann, wenn sie relevant sind? Geokoordinaten Geokoordinaten Geografische Relevanz Zeitliche Relevanz Relevanz für unterschiedliche Nutzergruppen Thematische Beschreibung

© by Zeix 2012 43© by Zeix 2012

Fazit

Wo trifft Content Strategy auf Responsive Design?

Content Strategy Selektion von Inhalten und i l i h i= gezielte Anreicherung mit

Metadaten,so dass sie

basierend auf Regeln kontext‐i i i d

Responsive Design = optimiert angezeigt werden können.

© by Zeix 2012 45© by Zeix 2012

Fazit

Relevanz durch Metadaten Egal, welche technologischen Neuigkeiten noch hinzukommen

Di E höh d R l I h l i i dDie Erhöhung der Relevanz von Inhalten ist eine der grossen Herausforderung der kommenden Jahre

Je genauer die Inhalte durchMetadaten beschrieben sind Je genauer die Inhalte durch Metadaten beschrieben sind, um so einfacher ist es, sie in den richtigen Momenten anzeigen zu könnenanzeigen zu können

© by Zeix 2012 46© by Zeix 2012

Vielen Dank Esther Brunner

esther bruner@zeix [email protected]@ebr76

Gregor UrechGregor [email protected]@gurech@g

Zeix AGwww zeix comwww.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© by Zeix 2012

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

Documents

wasistresponsive

facebook connect

google

services

http

responsivedesigni

sbb

3dprintingmodel