Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Wie verändert sich der Designprozess wirklich?
Responsive Design – Reality Check
2
Es gibt viele responsive Websites…
… aber unser Projekt war ein wenig größer
3
Vollständiger Relaunch
der Corporate Website –
“Flagship Store”
4
Was uns aber fehlte war
ein neuer Prozess für
komplexe Projekte.
Eine Responsive
Design Toolbox.
?	
  
01Reality Check
Was die Experten sagen und was wir gemacht haben…
6
Rule01	
  
Kein Photoshop!
7
8
Aber wie können 7 IA
gleichzeitig ein
komplexes
Template-Modul
System als
interaktiven Prototyp
spezifizieren?
9
Der erste Ansatz:
Detaillierte Spezifikation für alle Viewports
Viewport L Viewport M Viewport S
10
Trotzdem sollte die
Spezifikation so klein wie
möglich sein.
Wir erstellten einen
“Responsive Guide”
zur getrennten
Doku...
11
Beispiel für Responsive Regeln:
Generelle Regeln zu den Viewport Definitionen
12
TOOLBOX
Deliverables
Responsive Guide
Für allgemeine Regeln und zur
ersten Abstimmung mit dem
Kunden.
13
Rule02	
  
Mobile First!
14
Aber der Kunde denkt
noch in der Desktop
Welt…
Wie kann man ein
responsive Design
konzipieren, wenn man
“mobile second”...
15
Flurplanung – “Content First”
Wir bauen EINE Website. Es gibt keine
unterschiedlichen Versionen für mobile
und Desktop. Die Reihenfolge von Content
ist ...
17
Responsive Patterns
List with images Carousel Expandable list
18
TOOLBOX
Prozess
Content First
Art und Reihenfolge der Inhalte
zuerst festlegen.
Responsive Patterns
Grundsätzliche Must...
19
Rule03	
  
Kein Wasserfall!
20
Aber bei den meisten
Kunden gibt es
getrennte
Budgets für Design
und Entwicklung.
Daher muss man auch
in einem Wasserfa...
21
Proof of Concept
Neue Konzepte und
Designs werden von
Entwicklern auf Herz
und Nieren geprüſt und
wenn nötig gemeinsam
ü...
22
TOOLBOX
Team
Connected Thinking
Entwickler sind fester Teil
eines Kreativteams
-  Proof of Concept
-  Prototyping
-  Us...
23
Rule04	
  
“No! Pagefold!”
24
“Aber der Preis ist noch
über dem Fold, oder?”
Wie arbeitet man
mit Kunden
zusammen, denen
das Konzept von
Responsive D...
25
Definiert “goldene
Regeln” für das
Responsive Design –
gemeinsam mit euren
Kunden.
Schafft zu Beginn des
Projekts ein
gem...
26
Vertrauen ist
wichtig!
Mit dem Kunden
werden Konzept,
Design und
Funktionalität
abgestimmt, nicht das
responsive Verhal...
27
TOOLBOX
Kundenkommunikation
“Goldene Regeln”
Der Kunde versteht die
Implikationen von Responsive
Design für die Website.
Fallstricke
Was hat nicht so super funktioniert?
29
Problem01	
  
“One size does not fit all”
30
CHECKOUT
Checkout in Viewport L …
… und in Viewport S…
Kritische Prozesse benötigen manchmal
separate Lösungen, die nur mit höherem
technischen Aufwand zu realisieren sind.
32
Problem02	
  
Responsive Advertising
33
FIXE
WERBEFORMATE
Werbeformen verhalten sich nicht responsiv beim
Verkleinern des Viewports.
34
SEPARATE FORMATE
PRO VIEWPORT Viewport M<1023px
Viewport S <650 px
Wirklich responsive Werbeformate
werden von Vermarktern (noch) nicht
angeboten.
03Responsive Design Toolbox
Unsere Erfahrungen auf einen Blick
37
TOOLBOX
Bewährte Methoden:
•  Prototyping
•  Mobile First
•  Kombiniert und iterativ
arbeiten
Unsere Erfahrungen:
•  Re...
38
© 2013 SAPIENT CORPORATION | CONFIDENTIAL
Dankeschön!
Sabine Berghaus
Senior Information Architect
E-Mail: sberghaus@sapie...
40
Image references
Pages 4, 9, 11, 12, 15, 17, 18, 33, 34, 37 : Own images
Page 3:
http://www.flickr.com/photos/kinghuang...
Nächste SlideShare
Wird geladen in …5
×

von

Responsive Design - Reality Check Slide 1 Responsive Design - Reality Check Slide 2 Responsive Design - Reality Check Slide 3 Responsive Design - Reality Check Slide 4 Responsive Design - Reality Check Slide 5 Responsive Design - Reality Check Slide 6 Responsive Design - Reality Check Slide 7 Responsive Design - Reality Check Slide 8 Responsive Design - Reality Check Slide 9 Responsive Design - Reality Check Slide 10 Responsive Design - Reality Check Slide 11 Responsive Design - Reality Check Slide 12 Responsive Design - Reality Check Slide 13 Responsive Design - Reality Check Slide 14 Responsive Design - Reality Check Slide 15 Responsive Design - Reality Check Slide 16 Responsive Design - Reality Check Slide 17 Responsive Design - Reality Check Slide 18 Responsive Design - Reality Check Slide 19 Responsive Design - Reality Check Slide 20 Responsive Design - Reality Check Slide 21 Responsive Design - Reality Check Slide 22 Responsive Design - Reality Check Slide 23 Responsive Design - Reality Check Slide 24 Responsive Design - Reality Check Slide 25 Responsive Design - Reality Check Slide 26 Responsive Design - Reality Check Slide 27 Responsive Design - Reality Check Slide 28 Responsive Design - Reality Check Slide 29 Responsive Design - Reality Check Slide 30 Responsive Design - Reality Check Slide 31 Responsive Design - Reality Check Slide 32 Responsive Design - Reality Check Slide 33 Responsive Design - Reality Check Slide 34 Responsive Design - Reality Check Slide 35 Responsive Design - Reality Check Slide 36 Responsive Design - Reality Check Slide 37 Responsive Design - Reality Check Slide 38 Responsive Design - Reality Check Slide 39 Responsive Design - Reality Check Slide 40
Nächste SlideShare
Mobile Digital Consumer
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

23 Gefällt mir

Teilen

Herunterladen, um offline zu lesen

Responsive Design - Reality Check

Herunterladen, um offline zu lesen

Presentation by Sabine Berghaus, SapientNitro, held 03.05.2013 at the IA conference in Berlin

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

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
  • michaaax

    Jul. 30, 2015
  • lieblingsleni

    Nov. 25, 2014
  • mirx

    Jun. 13, 2014
  • spy23

    Jun. 13, 2014
  • uerdmann

    Jan. 14, 2014
  • pilieva

    Jan. 4, 2014
  • svenjaeggers

    Nov. 7, 2013
  • hemba

    Sep. 8, 2013
  • maddesigns.de

    Sep. 5, 2013
  • LarsGeisel

    Jul. 9, 2013
  • ipietta

    Jun. 17, 2013
  • klausmartinmeyer

    May. 30, 2013
  • katrinherms

    May. 29, 2013
  • DietmarSchulte

    May. 21, 2013
  • sebhart

    May. 8, 2013
  • iakonferenz

    May. 7, 2013
  • r000pert

    May. 6, 2013
  • CKuehn85

    May. 6, 2013
  • Lilablassblau

    May. 6, 2013
  • sfreimark

    May. 5, 2013

Presentation by Sabine Berghaus, SapientNitro, held 03.05.2013 at the IA conference in Berlin

Aufrufe

Aufrufe insgesamt

4.680

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

724

Befehle

Downloads

132

Geteilt

0

Kommentare

0

Likes

23

×