RESPONSIVE DESIGN Konsumenten gehen mit Desktop- und Laptop-Computern, Tablets und Smartphones ins Netz. Eine Herausforderung für die Commerce-Branche wie für die Content-Produzenten. Die Antwort auf diese Vielzahl an dafür nötigen Codes heißt heute Responsive Webdesign: „One size fits all“. Und es macht vieles leichter. Aber zu welchem Preis ist es zu haben? Birgit Sedlmayer-Gansinger ist als Account Director für die Kundenbeziehungen der Retail-Kunden von von vi knallgrau verantwortlich. Am Standort Wien leitet sie ein Team von 7 Mitarbeitern und entwickelt für ihre Kunden SPAR, Sport Eybl, Generali, s.Oliver, Santander, WIFI Österreich, etc. Lösungen für Social Media, Web & Online Advertising. Ihre Ansprechpartner auf Kundenseite richtig zu verstehen, die konkreten wie auch unausgesprochenen Anforderungen, die aktuelle Situation und Zielsetzungen – fachlich wie persönlich, das sind gleichermaßen Herausforderung wie Motivation. Die Aufgabe besteht darin, dies in die Sprache der Kreation, der Technik und der Redaktion zu übersetzen und ein gemeinsames Verständnis sicherzustellen. Die “Onlinerin des Jahres” 2008 hat über 12 Jahre Berufserfahrung in Online-Agenturen als Projektmanagerin und Kundenberaterin hinter sich. Bei Ogilvy Interactive zu Beginn der 2000er Jahre war Online “noch ein richtiger Hype” und viele Kunden mit Digital Branding ge- und überfordert, bei Draftfci begleitete sie internationale Projekte wie den Webrelauch von Lindt & Sprüngli mit 20 Länder-RollOuts, das Intranet der Vienna Insurance Group, das digitale Marketing von Zipfer, etc. Nach der klassischen Marketingausbildung an der Uni Linz (Handelswissenschaft, ein Jahr Erasmus an der Ecole Supèrieure de Brest, Bretagne) startete sie zuerst “offline” bei der PR- & Dialogmarketing Agentur Sery in Linz und stieß erst mit dem Ortswechsel nach Wien auf die Digitale Businesswelt. Als Mitglied von Digitalista ist ihr die Präsenz als Onlinerin ein Anliegen, die Vernetzung in der Branche und speziell unter jungen Frauen ist ihr wichtig. Die Oberösterreicherin ist verheiratet, liebt gleichermaßen Kultur wie Natur, Literatur und Sport. Sie ist ausgebildete Skitouren-Instruktorin, langjährige ehrenamtliche Jugendleiterin und ausgebildetete Trainerin im Bereich Jugendpädagogik.

1. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
Responsive Webdesign:
Was erwartet den Auftraggeber?

2. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau2
_ vi knallgrau ist eine Digital Full Service Agentur
_ Gegründet 1995 in Freiburg (Virtual Identity)
_ Büros in Wien, Freiburg, München & Berlin
_ Umsatz 2012: ca. € 15,5 Mio.
_ Ca. 160 Mitarbeiter, davon 50 in Wien
_ Über 3.000 realisierte Projekte
Über vi knallgrau

3. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau3
Unser Credo:
Wir verbinden Marken
und Unternehmen mit der vernetzten
Gesellschaft.

4. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
Herausforderung Responsive im Projektalltag
Der Wunsch:

5. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
Herausforderung Responsive im Projektalltag
Der Weg:

6. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
Herausforderung Responsive im Projektalltag
Der Weg:

7. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
Herausforderung Responsive im Projektalltag
Das Ergebnis:

8. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
Worauf kommt es an?
• Welche Veränderungen ergeben sich durch responsive
Design im Projektalltag für den Auftraggeber?
• Welche Entscheidungen muss der Auftraggeber
während des Projektes treffen?

9. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
Wie arbeitet die Kreation?
1. Vom Kleinen zum Großen:
 Entwicklung von mobile Design zuerst, dann Tablet, dann PC
2. Jedes Element (Navigation wie Content) ist separat zu konzipieren:
 Ein Grid kann helfen, Komplexität zu reduzieren.
3. Das Thema Bandbreite:
 Große Bilder und viele Elemente sind im mobilen Web schwierig zu verwenden
4. Frühes html-Prototyping unterstützt die Konzeption:
 Enge Abstimmung mit Technik & Programmierung ist hilfreich.

10. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau

11. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
Was bedeutet das für den Auftraggeber?

12. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
1. Treffen Sie Entscheidungen.

13. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
1. Treffen Sie Entscheidungen.
• Welche Elemente sind
wichtiger als andere?
 Für jedes einzelne Template
gilt es zu entscheiden, wie sich
Content-Elemente verhalten.

14. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
1. Treffen Sie Entscheidungen.
• Welche Elemente sind
wichtiger als andere?
 Gilt auch für die
Navigation:
 Prioritäten setzen!

15. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
1. Treffen Sie Entscheidungen.
• Welche Elemente sind
wichtiger als andere?
 Gilt auch für die
Navigation:

16. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
1. Treffen Sie Entscheidungen.
• Welcher Inhalt ist in welcher Ebene der
Informationsarchitektur zu platzieren?
 Je weiter unten, desto schwieriger ist der Inhalt für den
User auf mobilen devices zu finden.
 Eine möglichst flache Navigations-Hierarchie ist
anzustreben.

17. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
1. Treffen Sie Entscheidungen.
• Welche User-Anliegen haben Priorität?
 Jeder Userflow ist auf jedem Device zu planen.
 Die wesentlichen Userwege zuerst.

18. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
1. Treffen Sie Entscheidungen.
• Welche User-Anliegen haben Priorität?
 Jeder Userflow ist auf jedem Device zu planen.
 Die wesentlichen Userwege zuerst.

19. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
1. Treffen Sie Entscheidungen.
• Welche User-Anliegen haben Priorität?
 Jeder Userflow ist auf jedem Device zu planen.
 Die wesentlichen Userwege zuerst.

20. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
2. Nehmen Sie sich Zeit.

21. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
• Die Projektdurchlaufzeit ist länger als bisher:
 Aufgrund der höheren Komplexität erfordert jedes Arbeitspaket
mehr Zeit & Aufmerksamkeit.
2. Nehmen Sie sich Zeit.

22. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
• Testing ist ein Kern-Erfolgsfaktor für das Projekt.
 Mehr als der doppelte Aufwand für Agentur / Umsetzungspartner
sowie auch für den Auftraggeber.
 Planen Sie ausreichend Zeit zum Testen ein, dies kann die
Agentur nicht komplett übernehmen
 Legen Sie Testszenarien fest:
Vereinbarung über Browser, Devices und deren Prioritäten.
2. Nehmen Sie sich Zeit.

23. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
• Die Projektdurchlaufzeit ist länger als bisher:
 Aufgrund der höheren Komplexität erfordert jedes Arbeitspaket
mehr Zeit & Aufmerksamkeit als bisher bei einem Webrelaunch.
 Planen Sie ausreichend Zeit zum Testen ein, dies kann die
Agentur nicht komplett übernehmen.
2. Nehmen Sie sich Zeit.

24. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
• Die Projektdurchlaufzeit ist länger als bisher:
 Aufgrund der höheren Komplexität erfordert jedes Arbeitspaket
mehr Zeit & Aufmerksamkeit als bisher bei einem Webrelaunch.
 Planen Sie ausreichend Zeit zum Testen ein, dies kann die
Agentur nicht komplett übernehmen.
2. Nehmen Sie sich Zeit.

25. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
3. Sprechen Sie miteinander.

26. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
• Denken Sie an alle Personen in Ihrem Team:
 Managen Sie die Erwartungshaltung Ihrer internen Stakeholder:
 Bringen Sie zu Beginn alle Beteiligten Personen an einen Tisch,
um Wissens- & Informationsgleichstand über Responsive
Design herzustellen.
3. Sprechen Sie miteinander.

27. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
• Manche Details entscheiden sich erst in der Umsetzung:
3. Sprechen Sie miteinander.
 Protoyping hilft, schon früh
fehlende oder mangelhafte
Überlegungen zu
identifizieren.

28. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
• Manche Details entscheiden sich erst in der Umsetzung:
 Nicht jede Ausprägung kann gelayoutet werden - zu einem
vernünftigen Preis-/Leistungsverhältnis.
 Eine enge Zusammenarbeit zwischen Auftraggeber und
Umsetzungspartner erleichtert den Projektfortschritt.
 Geben Sie auch Rückmeldung über nicht finale Arbeitspakete.
3. Sprechen Sie miteinander.

29. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
3. Sprechen Sie miteinander.
2. Nehmen Sie sich Zeit.
1. Treffen Sie Entscheidungen.

30. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
SEO für Reponsive Web

31. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
SEO für Reponsive Web
• Grundsätzlich gilt:
• Google bevorzugt Responsive Webdesign gegenüber:
• Mobile Domains
• Device specific html (also idente URL, jedoch unterschiedlicher Content für
unterschiedliche Geräte & Displaygrößen)

32. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
SEO für Reponsive Web
• SEO-Vorteile eines Responsive Designs:
• Der SEO Value (Links Shares, Social Mentions, etc.) wird aus
mobile und Desktop auf die URL übertragen
 Somit hat eine URL für mobile und Desktop mehr Wert als zwei getrennte URLs.
• Weniger Komplexität im SEO Handling
• Keine Gefahr für Duplicate Content aufgrund von Indexing-Fehlern.

33. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
Vielen Dank!

34. Innovation – Insights – Interaction
Birgit Sedlmayer-Gansinger vi knallgrau
Mag. Birgit Sedlmayer-Gansinger
Account Director
birgit.sedlmayer@virtual-identity.com
vi knallgrau GmbH
Schönbrunnerstr. 213-215
1120 Wien
Kontakt
t +43.1.522 76 37
f +43.1.522 76 38
www.knallgrau.at
www.DIGITALandRETAIL.com
Wien | Freiburg | München | Berlin