Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Mobile Digital Consumer
Next
Upcoming SlideShare
Mobile Digital Consumer
Next
Download to read offline and view in fullscreen.

Share

Responsive Design - Reality Check

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

Views

Total views

4,658

On Slideshare

0

From embeds

0

Number of embeds

724

Actions

Downloads

132

Shares

0

Comments

0

Likes

23

×