Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Responsive Design - Reality Check

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 40 Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Responsive Design - Reality Check (20)

Anzeige
Anzeige

Aktuellste (20)

Responsive Design - Reality Check

  1. 1. Wie verändert sich der Designprozess wirklich? Responsive Design – Reality Check
  2. 2. 2 Es gibt viele responsive Websites… … aber unser Projekt war ein wenig größer
  3. 3. 3 Vollständiger Relaunch der Corporate Website – “Flagship Store”
  4. 4. 4 Was uns aber fehlte war ein neuer Prozess für komplexe Projekte. Eine Responsive Design Toolbox. ?  
  5. 5. 01Reality Check Was die Experten sagen und was wir gemacht haben…
  6. 6. 6 Rule01   Kein Photoshop!
  7. 7. 7
  8. 8. 8 Aber wie können 7 IA gleichzeitig ein komplexes Template-Modul System als interaktiven Prototyp spezifizieren?
  9. 9. 9 Der erste Ansatz: Detaillierte Spezifikation für alle Viewports Viewport L Viewport M Viewport S
  10. 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. 11 Beispiel für Responsive Regeln: Generelle Regeln zu den Viewport Definitionen
  12. 12. 12 TOOLBOX Deliverables Responsive Guide Für allgemeine Regeln und zur ersten Abstimmung mit dem Kunden.
  13. 13. 13 Rule02   Mobile First!
  14. 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. 15 Flurplanung – “Content First”
  16. 16. Wir bauen EINE Website. Es gibt keine unterschiedlichen Versionen für mobile und Desktop. Die Reihenfolge von Content ist immer dieselbe.
  17. 17. 17 Responsive Patterns List with images Carousel Expandable list
  18. 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. 19 Rule03   Kein Wasserfall!
  20. 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. 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. 22 TOOLBOX Team Connected Thinking Entwickler sind fester Teil eines Kreativteams -  Proof of Concept -  Prototyping -  Usability Testing
  23. 23. 23 Rule04   “No! Pagefold!”
  24. 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. 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. 26 Vertrauen ist wichtig! Mit dem Kunden werden Konzept, Design und Funktionalität abgestimmt, nicht das responsive Verhalten.
  27. 27. 27 TOOLBOX Kundenkommunikation “Goldene Regeln” Der Kunde versteht die Implikationen von Responsive Design für die Website.
  28. 28. Fallstricke Was hat nicht so super funktioniert?
  29. 29. 29 Problem01   “One size does not fit all”
  30. 30. 30 CHECKOUT Checkout in Viewport L … … und in Viewport S…
  31. 31. Kritische Prozesse benötigen manchmal separate Lösungen, die nur mit höherem technischen Aufwand zu realisieren sind.
  32. 32. 32 Problem02   Responsive Advertising
  33. 33. 33 FIXE WERBEFORMATE Werbeformen verhalten sich nicht responsiv beim Verkleinern des Viewports.
  34. 34. 34 SEPARATE FORMATE PRO VIEWPORT Viewport M<1023px Viewport S <650 px
  35. 35. Wirklich responsive Werbeformate werden von Vermarktern (noch) nicht angeboten.
  36. 36. 03Responsive Design Toolbox Unsere Erfahrungen auf einen Blick
  37. 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. 38
  39. 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. 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

×