Wie verändert sich der Designprozess wirklich?Responsive Design – Reality Check
2Es gibt viele responsive Websites…… aber unser Projekt war ein wenig größer
3Vollständiger Relaunchder Corporate Website –“Flagship Store”
4Was uns aber fehlte warein neuer Prozess fürkomplexe Projekte.Eine ResponsiveDesign Toolbox.?	  
01Reality CheckWas die Experten sagen und was wir gemacht haben…
6Rule01	  Kein Photoshop!
7
8Aber wie können 7 IAgleichzeitig einkomplexesTemplate-ModulSystem alsinteraktiven Prototypspezifizieren?
9Der erste Ansatz:Detaillierte Spezifikation für alle ViewportsViewport L Viewport M Viewport S
10Trotzdem sollte dieSpezifikation so klein wiemöglich sein.Wir erstellten einen“Responsive Guide”zur getrenntenDokumentati...
11Beispiel für Responsive Regeln:Generelle Regeln zu den Viewport Definitionen
12TOOLBOXDeliverablesResponsive GuideFür allgemeine Regeln und zurersten Abstimmung mit demKunden.
13Rule02	  Mobile First!
14Aber der Kunde denktnoch in der DesktopWelt…Wie kann man einresponsive Designkonzipieren, wenn man“mobile second”arbeitet?
15Flurplanung – “Content First”
Wir bauen EINE Website. Es gibt keineunterschiedlichen Versionen für mobileund Desktop. Die Reihenfolge von Contentist imm...
17Responsive PatternsList with images Carousel Expandable list
18TOOLBOXProzessContent FirstArt und Reihenfolge der Inhaltezuerst festlegen.Responsive PatternsGrundsätzliche Muster werd...
19Rule03	  Kein Wasserfall!
20Aber bei den meistenKunden gibt esgetrennteBudgets für Designund Entwicklung.Daher muss man auchin einem WasserfallProze...
21Proof of ConceptNeue Konzepte undDesigns werden vonEntwicklern auf Herzund Nieren geprüſt undwenn nötig gemeinsamüberarbe...
22TOOLBOXTeamConnected ThinkingEntwickler sind fester Teileines Kreativteams-  Proof of Concept-  Prototyping-  Usability ...
23Rule04	  “No! Pagefold!”
24“Aber der Preis ist nochüber dem Fold, oder?”Wie arbeitet manmit Kundenzusammen, denendas Konzept vonResponsive Design n...
25Definiert “goldeneRegeln” für dasResponsive Design –gemeinsam mit eurenKunden.Schafft zu Beginn desProjekts eingemeinsames...
26Vertrauen istwichtig!Mit dem Kundenwerden Konzept,Design undFunktionalitätabgestimmt, nicht dasresponsive Verhalten.
27TOOLBOXKundenkommunikation“Goldene Regeln”Der Kunde versteht dieImplikationen von ResponsiveDesign für die Website.
FallstrickeWas hat nicht so super funktioniert?
29Problem01	  “One size does not fit all”
30CHECKOUTCheckout in Viewport L …… und in Viewport S…
Kritische Prozesse benötigen manchmalseparate Lösungen, die nur mit höheremtechnischen Aufwand zu realisieren sind.
32Problem02	  Responsive Advertising
33FIXEWERBEFORMATEWerbeformen verhalten sich nicht responsiv beimVerkleinern des Viewports.
34SEPARATE FORMATEPRO VIEWPORT Viewport M<1023pxViewport S <650 px
Wirklich responsive Werbeformatewerden von Vermarktern (noch) nichtangeboten.
03Responsive Design ToolboxUnsere Erfahrungen auf einen Blick
37TOOLBOXBewährte Methoden:•  Prototyping•  Mobile First•  Kombiniert und iterativarbeitenUnsere Erfahrungen:•  Responsive...
38
© 2013 SAPIENT CORPORATION | CONFIDENTIALDankeschön!Sabine BerghausSenior Information ArchitectE-Mail: sberghaus@sapient.c...
40Image referencesPages 4, 9, 11, 12, 15, 17, 18, 33, 34, 37 : Own imagesPage 3:http://www.flickr.com/photos/kinghuang/323...
Nächste SlideShare
Wird geladen in …5
×

Responsive Design - Reality Check

3.742 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
24 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.742
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
713
Aktionen
Geteilt
0
Downloads
131
Kommentare
0
Gefällt mir
24
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Design - Reality Check

  1. 1. Wie verändert sich der Designprozess wirklich?Responsive Design – Reality Check
  2. 2. 2Es gibt viele responsive Websites…… aber unser Projekt war ein wenig größer
  3. 3. 3Vollständiger Relaunchder Corporate Website –“Flagship Store”
  4. 4. 4Was uns aber fehlte warein neuer Prozess fürkomplexe Projekte.Eine ResponsiveDesign Toolbox.?  
  5. 5. 01Reality CheckWas die Experten sagen und was wir gemacht haben…
  6. 6. 6Rule01  Kein Photoshop!
  7. 7. 7
  8. 8. 8Aber wie können 7 IAgleichzeitig einkomplexesTemplate-ModulSystem alsinteraktiven Prototypspezifizieren?
  9. 9. 9Der erste Ansatz:Detaillierte Spezifikation für alle ViewportsViewport L Viewport M Viewport S
  10. 10. 10Trotzdem sollte dieSpezifikation so klein wiemöglich sein.Wir erstellten einen“Responsive Guide”zur getrenntenDokumentation vonresponsive Regeln undModulspezifikation.
  11. 11. 11Beispiel für Responsive Regeln:Generelle Regeln zu den Viewport Definitionen
  12. 12. 12TOOLBOXDeliverablesResponsive GuideFür allgemeine Regeln und zurersten Abstimmung mit demKunden.
  13. 13. 13Rule02  Mobile First!
  14. 14. 14Aber der Kunde denktnoch in der DesktopWelt…Wie kann man einresponsive Designkonzipieren, wenn man“mobile second”arbeitet?
  15. 15. 15Flurplanung – “Content First”
  16. 16. Wir bauen EINE Website. Es gibt keineunterschiedlichen Versionen für mobileund Desktop. Die Reihenfolge von Contentist immer dieselbe.
  17. 17. 17Responsive PatternsList with images Carousel Expandable list
  18. 18. 18TOOLBOXProzessContent FirstArt und Reihenfolge der Inhaltezuerst festlegen.Responsive PatternsGrundsätzliche Muster werdenauf alle Module angewendet.
  19. 19. 19Rule03  Kein Wasserfall!
  20. 20. 20Aber bei den meistenKunden gibt esgetrennteBudgets für Designund Entwicklung.Daher muss man auchin einem WasserfallProzess dieverschiedenen Skillskombinieren.
  21. 21. 21Proof of ConceptNeue Konzepte undDesigns werden vonEntwicklern auf Herzund Nieren geprüſt undwenn nötig gemeinsamüberarbeitet.
  22. 22. 22TOOLBOXTeamConnected ThinkingEntwickler sind fester Teileines Kreativteams-  Proof of Concept-  Prototyping-  Usability Testing
  23. 23. 23Rule04  “No! Pagefold!”
  24. 24. 24“Aber der Preis ist nochüber dem Fold, oder?”Wie arbeitet manmit Kundenzusammen, denendas Konzept vonResponsive Design neuist?
  25. 25. 25Definiert “goldeneRegeln” für dasResponsive Design –gemeinsam mit eurenKunden.Schafft zu Beginn desProjekts eingemeinsamesVerständnis.(oder auch für andere Themen – z.B.Personalisierung)
  26. 26. 26Vertrauen istwichtig!Mit dem Kundenwerden Konzept,Design undFunktionalitätabgestimmt, nicht dasresponsive Verhalten.
  27. 27. 27TOOLBOXKundenkommunikation“Goldene Regeln”Der Kunde versteht dieImplikationen von ResponsiveDesign für die Website.
  28. 28. FallstrickeWas hat nicht so super funktioniert?
  29. 29. 29Problem01  “One size does not fit all”
  30. 30. 30CHECKOUTCheckout in Viewport L …… und in Viewport S…
  31. 31. Kritische Prozesse benötigen manchmalseparate Lösungen, die nur mit höheremtechnischen Aufwand zu realisieren sind.
  32. 32. 32Problem02  Responsive Advertising
  33. 33. 33FIXEWERBEFORMATEWerbeformen verhalten sich nicht responsiv beimVerkleinern des Viewports.
  34. 34. 34SEPARATE FORMATEPRO VIEWPORT Viewport M<1023pxViewport S <650 px
  35. 35. Wirklich responsive Werbeformatewerden von Vermarktern (noch) nichtangeboten.
  36. 36. 03Responsive Design ToolboxUnsere Erfahrungen auf einen Blick
  37. 37. 37TOOLBOXBewährte Methoden:•  Prototyping•  Mobile First•  Kombiniert und iterativarbeitenUnsere Erfahrungen:•  Responsive Guide•  Content  First  •  Responsive Patterns•  Connected Thinking•  Goldene RegelnOder…•  …
  38. 38. 38
  39. 39. © 2013 SAPIENT CORPORATION | CONFIDENTIALDankeschön!Sabine BerghausSenior Information ArchitectE-Mail: sberghaus@sapient.comTwitter: @stadtnomadinWebsite: about.me/sabineberghaus
  40. 40. 40Image referencesPages 4, 9, 11, 12, 15, 17, 18, 33, 34, 37 : Own imagesPage 3:http://www.flickr.com/photos/kinghuang/3234346294/by: King Chung HuangPage 10:http://www.flickr.com/photos/romytetue/8099431861/By: tetuePage 14:http://commons.wikimedia.org/wiki/File:IMac_aluminium.pngby: Matthieu RieglerPage 20:http://www.flickr.com/photos/68751915@N05/6869762317/by: 401(K) 2013Page 21:http://www.flickr.com/photos/genista/4449316/sizes/o/by: GenistaPage 24:http://pixabay.com/en/number-digit-folding-rule-measure-92412/by: weinstockPage 26:http://pixabay.com/en/michelangelo-abstract-boy-child-71282/By: Public Domain PicturesPage 38:http://farm4.static.flickr.com/3394/3526522573_8f40a675b6.jpgby: walknboston

×