Das Dokument diskutiert die Herausforderungen und Best Practices im Designprozess für responsive Websites. Es hebt die Bedeutung eines neuen Prozesses und Tools hervor, um komplexe Projekte effektiv anzugehen, einschließlich der Prinzipien Mobile First, iterativer Arbeit und klarer Kommunikation mit dem Kunden. Zudem werden Probleme wie separate Lösungen für kritische Prozesse und nicht-responsives Verhalten von Werbeformaten thematisiert.

1. Wie verändert sich der Designprozess wirklich?
Responsive Design – Reality Check

2. 2
Es gibt viele responsive Websites…
… aber unser Projekt war ein wenig größer

3. 3
Vollständiger Relaunch
der Corporate Website –
“Flagship Store”

4. 4
Was uns aber fehlte war
ein neuer Prozess für
komplexe Projekte.
Eine Responsive
Design Toolbox.
?

5. 01Reality Check
Was die Experten sagen und was wir gemacht haben…

6. 6
Rule01
Kein Photoshop!

7. 7

8. 8
Aber wie können 7 IA
gleichzeitig ein
komplexes
Template-Modul
System als
interaktiven Prototyp
spezifizieren?

9. 9
Der erste Ansatz:
Detaillierte Spezifikation für alle Viewports
Viewport L Viewport M Viewport S

10. 10
Trotzdem sollte die
Spezifikation so klein wie
möglich sein.
Wir erstellten einen
“Responsive Guide”
zur getrennten
Dokumentation von
responsive Regeln und
Modulspezifikation.

11. 11
Beispiel für Responsive Regeln:
Generelle Regeln zu den Viewport Definitionen

12. 12
TOOLBOX
Deliverables
Responsive Guide
Für allgemeine Regeln und zur
ersten Abstimmung mit dem
Kunden.

13. 13
Rule02
Mobile First!

14. 14
Aber der Kunde denkt
noch in der Desktop
Welt…
Wie kann man ein
responsive Design
konzipieren, wenn man
“mobile second”
arbeitet?

15. 15
Flurplanung – “Content First”

16. Wir bauen EINE Website. Es gibt keine
unterschiedlichen Versionen für mobile
und Desktop. Die Reihenfolge von Content
ist immer dieselbe.

17. 17
Responsive Patterns
List with images Carousel Expandable list

18. 18
TOOLBOX
Prozess
Content First
Art und Reihenfolge der Inhalte
zuerst festlegen.
Responsive Patterns
Grundsätzliche Muster werden
auf alle Module angewendet.

19. 19
Rule03
Kein Wasserfall!

20. 20
Aber bei den meisten
Kunden gibt es
getrennte
Budgets für Design
und Entwicklung.
Daher muss man auch
in einem Wasserfall
Prozess die
verschiedenen Skills
kombinieren.

21. 21
Proof of Concept
Neue Konzepte und
Designs werden von
Entwicklern auf Herz
und Nieren geprüſt und
wenn nötig gemeinsam
überarbeitet.

22. 22
TOOLBOX
Team
Connected Thinking
Entwickler sind fester Teil
eines Kreativteams
- Proof of Concept
- Prototyping
- Usability Testing

23. 23
Rule04
“No! Pagefold!”

24. 24
“Aber der Preis ist noch
über dem Fold, oder?”
Wie arbeitet man
mit Kunden
zusammen, denen
das Konzept von
Responsive Design neu
ist?

25. 25
Definiert “goldene
Regeln” für das
Responsive Design –
gemeinsam mit euren
Kunden.
Schafft zu Beginn des
Projekts ein
gemeinsames
Verständnis.
(oder auch für andere Themen – z.B.
Personalisierung)

26. 26
Vertrauen ist
wichtig!
Mit dem Kunden
werden Konzept,
Design und
Funktionalität
abgestimmt, nicht das
responsive Verhalten.

27. 27
TOOLBOX
Kundenkommunikation
“Goldene Regeln”
Der Kunde versteht die
Implikationen von Responsive
Design für die Website.

28. Fallstricke
Was hat nicht so super funktioniert?

29. 29
Problem01
“One size does not fit all”

30. 30
CHECKOUT
Checkout in Viewport L …
… und in Viewport S…

31. Kritische Prozesse benötigen manchmal
separate Lösungen, die nur mit höherem
technischen Aufwand zu realisieren sind.

32. 32
Problem02
Responsive Advertising

33. 33
FIXE
WERBEFORMATE
Werbeformen verhalten sich nicht responsiv beim
Verkleinern des Viewports.

34. 34
SEPARATE FORMATE
PRO VIEWPORT Viewport M<1023px
Viewport S <650 px

35. Wirklich responsive Werbeformate
werden von Vermarktern (noch) nicht
angeboten.

36. 03Responsive Design Toolbox
Unsere Erfahrungen auf einen Blick

37. 37
TOOLBOX
Bewährte Methoden:
• Prototyping
• Mobile First
• Kombiniert und iterativ
arbeiten
Unsere Erfahrungen:
• Responsive Guide
• Content
First
• Responsive Patterns
• Connected Thinking
• Goldene Regeln
Oder…
• …

38. 38

39. © 2013 SAPIENT CORPORATION | CONFIDENTIAL
Dankeschön!
Sabine Berghaus
Senior Information Architect
E-Mail: sberghaus@sapient.com
Twitter: @stadtnomadin
Website: about.me/sabineberghaus

40. 40
Image references
Pages 4, 9, 11, 12, 15, 17, 18, 33, 34, 37 : Own images
Page 3:
http://www.flickr.com/photos/kinghuang/3234346294/
by: King Chung Huang
Page 10:
http://www.flickr.com/photos/romytetue/8099431861/
By: tetue
Page 14:
http://commons.wikimedia.org/wiki/File:IMac_aluminium.png
by: Matthieu Riegler
Page 20:
http://www.flickr.com/photos/68751915@N05/6869762317/
by: 401(K) 2013
Page 21:
http://www.flickr.com/photos/genista/4449316/sizes/o/
by: Genista
Page 24:
http://pixabay.com/en/number-digit-folding-rule-measure-92412/
by: weinstock
Page 26:
http://pixabay.com/en/michelangelo-abstract-boy-child-71282/
By: Public Domain Pictures
Page 38:
http://farm4.static.flickr.com/3394/3526522573_8f40a675b6.jpg
by: walknboston